Hide sort select on larger screens, closes #300

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;
     }

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 }}">