github/datasette
1
0
Fork 0
mirror of https://github.com/simonw/datasette.git synced 2025-12-10 16:51:24 +01:00
Code Issues Projects Releases Packages Wiki Activity

Hide sort select on larger screens, closes #300

Browse source
This commit is contained in:
Simon Willison 2018-05-31 07:43:06 -07:00
commit 7381af85e6
No known key found for this signature in database
GPG key ID: 17E2DEA2588B7F52
2 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

10
datasette/static/app.css
View file

@ -35,7 +35,14 @@ table a:link {
table a:visited { table a:visited {
color: #8f54c4; color: #8f54c4;
} }
.small-screen-only,
.select-wrapper.small-screen-only {
display: none;
}
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
.small-screen-only {
display: initial;
}
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */
table.rows-and-columns, table.rows-and-columns,
.rows-and-columns thead, .rows-and-columns thead,
@ -219,6 +226,9 @@ form input[type=submit] {
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
} }
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
.select-wrapper.small-screen-only {
display: inline-block;
}
.select-wrapper { .select-wrapper {
width: 100px; width: 100px;
} }

4
datasette/templates/table.html
View file

@ -69,7 +69,7 @@
</div> </div>
<div class="filter-row"> <div class="filter-row">
{% if is_sortable %} {% if is_sortable %}
<div class="select-wrapper"> <div class="select-wrapper small-screen-only">
<select name="_sort" id="sort_by"> <select name="_sort" id="sort_by">
<option value="">Sort...</option> <option value="">Sort...</option>
{% for column in display_columns %} {% for column in display_columns %}
@ -79,7 +79,7 @@
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<label class="sort_by_desc"><input type="checkbox" name="_sort_by_desc"{% if sort_desc %} checked{% endif %}> descending</label> <label class="sort_by_desc small-screen-only"><input type="checkbox" name="_sort_by_desc"{% if sort_desc %} checked{% endif %}> descending</label>
{% endif %} {% endif %}
{% for facet in sorted_facet_results %} {% for facet in sorted_facet_results %}
<input type="hidden" name="_facet" value="{{ facet.name }}"> <input type="hidden" name="_facet" value="{{ facet.name }}">