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 { ...@@ -13,6 +13,41 @@ body {
max-width: 1800px; 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 { p, dd, li {
line-height:1.4em; line-height:1.4em;
} }
......
...@@ -8,33 +8,36 @@ active ...@@ -8,33 +8,36 @@ active
{% block content %} {% block content %}
<div class="column-group"> <div class="column-group">
<div class="xlarge-100 large-100 small-100 bottom-space" style="padding-right:1em"> <div class="xlarge-100 large-100 small-100 bottom-space">
<form class="ink-form push-right" style="width: 30%;" action="/" method="get"> <div class="search-header">
<div class="control-group all-100" style="margin-bottom: 0.5em"> <form class="ink-form push-right search-bar" action="/" method="get">
<div class="control append-button" role="search"> <div class="control-group all-100" style="margin-bottom: 0">
<span> <div class="control append-button" role="search">
{% if search is none %} <span>
<input type="text" name="search" id="search"> {% if search is none %}
{% else %} <input type="text" name="search" id="search" placeholder="Enter arbitrary regexp term">
<input type="text" name="search" id="search", value="{{search}}"> {% else %}
{% endif %} <input type="text" name="search" id="search", value="{{search}}">
</span> {% endif %}
<button class="ink-button">Search</button> </span>
<button class="ink-button">Search</button>
</div>
</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 %}
<br/>
{% endif %}
{% 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>
</form> </div>
{% 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}}
{% endif %}
<table class="ink-table hover sortable"> <table class="ink-table hover sortable">
<thead> <thead>
<tr> <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