Further tweaks to select/input filter styling

Refs #86 - thanks for the help, @natbat!

datasette/static/app.css

@@ -134,19 +134,22 @@ form input[type=submit] {
     font-size: 0.9rem;
     line-height: 1;
     border-radius: .25rem;
+    -webkit-appearance: button;
 }
 
 .filter-row {
-    margin-bottom: 0.3em;
+    margin-bottom: 0.6em;
 }
 
 .select-wrapper {
     border: 1px solid #ccc;
     width: 120px;
     border-radius: 3px;
+    padding: 0;
     background-color: #fafafa;
     position: relative;
     display: inline-block;
+    margin-right: 0.3em;
 }
 .select-wrapper.filter-op {
     width: 80px;
@@ -155,21 +158,59 @@ form input[type=submit] {
     content: "\25BE";
     position: absolute;
     top: 0px;
-    right: 5px;
+    right: 0.4em;
     color: #bbb;
+    pointer-events: none;
+    font-size: 1.2em;
+    padding-top: 0.16em;
 }
 
 .select-wrapper select {
-    padding: 5px 8px;
+    padding: 9px 8px;
     width: 100%;
     border: none;
     box-shadow: none;
     background: transparent;
     background-image: none;
     -webkit-appearance: none;
+    cursor: pointer;
+}
+.select-wrapper select {
+    font-size: 1em;
+    font-family: Helvetica, sans-serif;
+}
+.select-wrapper option {
+    font-size: 1em;
+    font-family: Helvetica, sans-serif;
 }
 
 .select-wrapper select:focus {
     outline: none;
 }
-</style>
+.filters {
+    font-size: 0.8em;
+}
+.filters input.filter-value {
+    width: 200px;
+    border-radius: 3px;
+    -webkit-appearance: none;
+    padding: 9px 4px;
+    text-align: top;
+    font-size: 1em;
+    font-family: Helvetica, sans-serif;
+}
+@media only screen and (max-width: 576px) {
+    .select-wrapper {
+        width: 100px;
+    }
+    .select-wrapper.filter-op {
+        width: 60px;
+    }
+    .filters input.filter-value {
+        width: 140px;
+    }
+    form input[type=submit] {
+        display: block;
+        margin-top: 0.6em;
+    }
+}

datasette/templates/table.html

@@ -40,36 +40,32 @@
                         {% endif %}
                     {% endfor %}
                 </select>
-            </div>
-            <div class="select-wrapper filter-op">
+            </div><div class="select-wrapper filter-op">
                 <select name="_filter_op_{{ loop.index }}">
                     {% for key, display, no_argument in filters.lookups() %}
                         <option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
                     {% endfor %}
                 </select>
-            </div>
-            <input type="text" name="_filter_value_{{ loop.index }}" style="width: 200px" value="{{ value }}">
+            </div><input type="text" name="_filter_value_{{ loop.index }}" class="filter-value" value="{{ value }}">
         </div>
     {% endfor %}
     <div class="filter-row">
         <div class="select-wrapper">
             <select name="_filter_column">
-                <option value="">- pick a column -</option>
+                <option value="">- column -</option>
                 {% for column in display_columns %}
                     {% if column != 'rowid' %}
                         <option>{{ column }}</option>
                     {% endif %}
                 {% endfor %}
             </select>
-        </div>
-        <div class="select-wrapper filter-op">
+        </div><div class="select-wrapper filter-op">
             <select name="_filter_op">
                 {% for key, display, no_argument in filters.lookups() %}
                     <option value="{{ key }}{% if no_argument %}__1{% endif %}"{% if key == lookup %} selected{% endif %}>{{ display }}</option>
                 {% endfor %}
             </select>
-        </div>
-        <input type="text" name="_filter_value" style="width: 200px">
+        </div><input type="text" name="_filter_value" class="filter-value">
         <input type="submit" value="{% if filters.has_selections() %}Apply filters{% else %}Add filter{% endif %}">
     </div>
 </form>