From 7381af85e6e8a2aa13cb308d37ebfe7550dd7331 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Thu, 31 May 2018 07:43:06 -0700
Subject: [PATCH] Hide sort select on larger screens, closes #300

---
 datasette/static/app.css       | 10 ++++++++++
 datasette/templates/table.html |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/datasette/static/app.css b/datasette/static/app.css
index 04b556ec..9e95505f 100644
--- a/datasette/static/app.css
+++ b/datasette/static/app.css
@@ -35,7 +35,14 @@ table a:link {
 table a:visited {
     color: #8f54c4;
 }
+.small-screen-only,
+.select-wrapper.small-screen-only {
+    display: none;
+}
 @media only screen and (max-width: 576px) {
+    .small-screen-only {
+        display: initial;
+    }
     /* Force table to not be like tables anymore */
     table.rows-and-columns,
     .rows-and-columns thead,
@@ -219,6 +226,9 @@ form input[type=submit] {
     font-family: Helvetica, sans-serif;
 }
 @media only screen and (max-width: 576px) {
+    .select-wrapper.small-screen-only {
+        display: inline-block;
+    }
     .select-wrapper {
         width: 100px;
     }
diff --git a/datasette/templates/table.html b/datasette/templates/table.html
index d72710bc..d695da38 100644
--- a/datasette/templates/table.html
+++ b/datasette/templates/table.html
@@ -69,7 +69,7 @@
     </div>
     <div class="filter-row">
         {% if is_sortable %}
-            <div class="select-wrapper">
+            <div class="select-wrapper small-screen-only">
                 <select name="_sort" id="sort_by">
                     <option value="">Sort...</option>
                     {% for column in display_columns %}
@@ -79,7 +79,7 @@
                     {% endfor %}
                 </select>
             </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 %}
         {% for facet in sorted_facet_results %}
             <input type="hidden" name="_facet" value="{{ facet.name }}">