Commit 8c631c11 authored by Tiago Peixoto's avatar Tiago Peixoto

Fix header spacing in mobile

This also adds some usability tips.
parent b9733a1b
......@@ -13,6 +13,41 @@ body {
max-width: 1800px;
}
@media screen and (max-width: 1024px) {
.search-header {
clear: both;
width:100%;
display:inline;
}
.search-bar {
width: 100%;
}
.legend {
position: relative;
}
.ink-navigation {
font-size: 12px;
}
}
@media screen and (min-width: 1025px) {
.search-header {
clear: both;
width:100%;
display:inline-block;
position:relative;
}
.search-bar {
width: 30%;
}
.legend {
position:absolute;
bottom:0;
width: 70%;
}
}
p, dd, li {
line-height:1.4em;
}
......
......@@ -8,13 +8,14 @@ active
{% block content %}
<div class="column-group">
<div class="xlarge-100 large-100 small-100 bottom-space" style="padding-right:1em">
<form class="ink-form push-right" style="width: 30%;" action="/" method="get">
<div class="control-group all-100" style="margin-bottom: 0.5em">
<div class="xlarge-100 large-100 small-100 bottom-space">
<div class="search-header">
<form class="ink-form push-right search-bar" action="/" method="get">
<div class="control-group all-100" style="margin-bottom: 0">
<div class="control append-button" role="search">
<span>
{% if search is none %}
<input type="text" name="search" id="search">
<input type="text" name="search" id="search" placeholder="Enter arbitrary regexp term">
{% else %}
<input type="text" name="search" id="search", value="{{search}}">
{% endif %}
......@@ -23,18 +24,20 @@ active
</div>
</div>
</form>
<div class="legend">
{% if tags is not none %}
Showing only entries with tags:
{% for tag in tags %}
<span class="ink-label grey">{{ tag }}</span>
{% endfor %}
{% endif %}
{% if search is not none %}
{% if tags is not none %}
<br/>
{% endif %}
Showing only entries that match regexp: {{search}}
{% if search is not none %}
Showing only entries that match regexp: {{search}}<br/>
{% endif %}
<span style="font-size:x-small">Tip: click on the table header to sort the list. Hover your mouse to obtain a legend.</span>
</div>
</div>
<table class="ink-table hover sortable">
<thead>
<tr>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment