feat: make input styling more universal, retouch results.html filter nav

Author: sal-uva

webtool/static/css/components/buttons.css

@@ -118,7 +118,7 @@ button.no-border {
     border-color: var(--red);
 }
 
-a.button-like, .button-like button, button.button-like, .plain-page button:not(.self-styled), input[type=submit] {
+a.button-like, .button-like button, button.button-like, li.button-like, .plain-page button:not(.self-styled), input[type=submit] {
     padding: 8px;
 }
 

webtool/static/css/components/dataset-overview.css

@@ -9,4 +9,58 @@
 
 .result-list nav.tabs {
     margin: var(--spacing-regular) auto;
+}
+
+/* The bar over the dataset list: the set being looked at on one row, the
+   filters narrowing it down on the next, kept a little apart so they read as
+   two separate decisions. */
+.dataset-filters form {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--spacing-small);
+}
+
+.dataset-filters ul {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-small);
+}
+
+/* gaps do the spacing here, so the margin the metadata bar puts on its nav
+   items would only double it */
+.dataset-metadata > nav.dataset-filters li {
+    margin-right: 0;
+}
+
+/* the set being looked at, called out against the ones that are not */
+.dataset-metadata .dataset-filters .button-like.current,
+.dataset-metadata .dataset-filters .button-like.current:hover {
+    background: var(--bright);
+    border-color: var(--bright);
+    color: var(--semidark);
+}
+
+/* the filter row sits on the dark bar, so its text needs what the buttons
+   around it already get */
+.dataset-filters .dataset-filter-options {
+    color: var(--bright);
+}
+
+.dataset-filters .dataset-filter-options label {
+    display: flex;
+    align-items: center;
+    column-gap: var(--spacing-tiny);
+    white-space: nowrap;
+}
+
+/* the search boxes take whatever the fixed-width controls leave */
+.dataset-filters .dataset-filter-options .search-box {
+    flex: 1 1 10rem;
+    min-width: 0;
+}
+
+/* what submits the row closes it off */
+.dataset-filters .dataset-filter-submit {
+    margin-left: auto;
 }

webtool/static/css/components/forms.css

@@ -79,10 +79,9 @@ form .notice {
     padding: var(--spacing-regular);
 }
 
-/* Shared form definition for UserInput fields and annotation fields */
-:is(.form-element, .form-controls) input:not([type=checkbox]):not([type=hidden]),
-:is(.form-element, .form-controls) textarea,
-:is(.form-element, .form-controls) select {
+input:not([type=checkbox]):not([type=hidden]),
+textarea,
+select {
     width: 100%;
     box-sizing: border-box;
     font: inherit;
@@ -94,7 +93,7 @@ form .notice {
     padding: var(--spacing-small);
 }
 
-:is(.form-element, .form-controls) select {
+select {
     -moz-appearance:none;
     -webkit-appearance:none;
     appearance:none;
@@ -105,24 +104,24 @@ form .notice {
     padding-right: calc(var(--spacing-small) + 16px);
 }
 
-:is(.form-element, .form-controls) select:open {
+select:open {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="%23333333" stroke-width="2.5" stroke-linecap="butt" stroke-linejoin="miter" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" transform="matrix(1,0,0,-1,0,0)"><polyline points="2,5 8,11 14,5"></polyline></svg>');
 }
 
-:is(.form-element, .form-controls) select:focus {
+select:focus {
     outline: none;
     border-bottom: var(--stroke-heavy) solid var(--fourcat-accent);
 }
 
-:is(.form-element, .form-controls) input:not([type=checkbox]):focus,
-:is(.form-element, .form-controls) textarea:focus,
-:is(.form-element, .form-controls) select:focus {
+input:not([type=checkbox]):focus,
+textarea:focus,
+select:focus {
     outline: var(--stroke) solid var(--fourcat-accent);
     border-bottom: var(--stroke-heavy) solid var(--fourcat-accent);
     outline-offset: calc(-1 * var(--stroke-light));
 }
 
-:is(.form-element, .form-controls) input[type=checkbox] {
+input[type=checkbox] {
   box-sizing: border-box;
   width: 1.2rem;
   height: 1.2rem;
@@ -136,36 +135,35 @@ form .notice {
   transition: outline 0.1s;
 }
 
-:is(.form-element, .form-controls) input[type=checkbox]:checked {
+input[type=checkbox]:checked {
   background-color: var(--button-bg-regular);
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="butt" stroke-linejoin="miter" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><polyline points="2,7 7,12 14,3"></polyline></svg>');
   background-repeat: no-repeat;
   background-position: center;
 }
 
-:is(.form-element, .form-controls) option,
-:is(.form-element, .form-controls) optgroup {
+option,
+optgroup {
     font-family: Chivo, sans-serif;
     font-size: var(--font-body);
 }
 
-:is(.form-element, .form-controls) textarea {
+textarea {
     min-height: 8em;
     resize: vertical;
 }
 
-:is(.form-element, .form-controls) input.invalid,
-:is(.form-element, .form-controls) input:user-invalid,
-:is(.form-element, .form-controls) input.invalid:not([type=checkbox]):not([type=hidden]),
-:is(.form-element, .form-controls) textarea.invalid,
-:is(.form-element, .form-controls) textarea:user-invalid {
+input.invalid,
+input:user-invalid,
+input.invalid:not([type=checkbox]):not([type=hidden]),
+textarea.invalid,
+textarea:user-invalid {
     background: var(--red-light);
     border-color: var(--red);
     color: var(--red);
 }
 
 /* UserInput form widgets */
-
 .form-element .daterange-wrapper {
     display: flex;
     align-items: center;

webtool/templates/components/user-inputs/datasource-select.html

@@ -9,47 +9,66 @@
         <section class="dark result-list dataset-metadata">
             <h1><span>Datasets</span></h1>
 
-            <nav class="tabs">
+            {# Which datasets are being looked at, over how they are narrowed
+               down. The first row are links, so picking a set takes effect at
+               once; it carries the filters along, so they keep applying within
+               the set that was picked. The second row needs submitting, so the
+               button doing that closes it off. #}
+            <nav class="tabs dataset-filters">
                 <form action="{{ url_for("dataset.show_results") }}" method="GET">
                     <input type="hidden" name="depth" value="{{ depth }}">
-                    <ul>
+                    <ul class="dataset-filter-depth">
                         {% if __user_config("privileges.can_view_all_datasets") %}
-                            <li class="button-like{% if depth == "all" %} current{% endif %}"><a
-                                    href="{{ url_for('dataset.show_results') }}?{{ filter|http_query }}&amp;depth=all">All
-                                datasets</a></li>{% endif %}
-                        <li class="button-like{% if not depth or depth == "own" %} current{% endif %}"><a
-                                href="{{ url_for('dataset.show_results') }}?{{ filter|http_query }}&amp;depth=own">My
+                            <li><a class="button-like{% if depth == "all" %} current{% endif %}"
+                                   {% if depth == "all" %}aria-current="page"{% endif %}
+                                   href="{{ url_for('dataset.show_results') }}?{{ filter|http_query }}&amp;depth=all">All
+                                datasets</a></li>
+                        {% endif %}
+                        <li><a class="button-like{% if not depth or depth == "own" %} current{% endif %}"
+                               {% if not depth or depth == "own" %}aria-current="page"{% endif %}
+                               href="{{ url_for('dataset.show_results') }}?{{ filter|http_query }}&amp;depth=own">My
                             own datasets</a></li>
-                        <li class="button-like{% if depth == "favourites" %} current{% endif %}"><a
-                                href="{{ url_for('dataset.show_results') }}?{{ filter|http_query }}&amp;depth=favourites">Favourites
+                        <li><a class="button-like{% if depth == "favourites" %} current{% endif %}"
+                               {% if depth == "favourites" %}aria-current="page"{% endif %}
+                               href="{{ url_for('dataset.show_results') }}?{{ filter|http_query }}&amp;depth=favourites">Favourites
                             only</a></li>
+                    </ul>
 
-                        <li><input aria-label="Filter by query or label" placeholder="Filter datasets..." name="filter"
-                                   value="{{ filter.filter }}"></li>
+                    <ul class="dataset-filter-options">
+                        <li class="search-box">
+                            <input type="search" name="filter" value="{{ filter.filter }}"
+                                   aria-label="Search datasets by query or label"
+                                   placeholder="Search datasets...">
+                        </li>
                         {% if current_user.is_admin %}
-                            <li><input aria-label="User" placeholder="User..." name="user"
-                                       value="{{ filter.user }}"></li>
+                            <li class="search-box">
+                                <input type="search" name="user" value="{{ filter.user }}"
+                                       aria-label="Search datasets by user" placeholder="Search by user...">
+                            </li>
                             <li>
                                 <select aria-label="Sort datasets by" name="sort_by">
-                                    <option value="timestamp"{% if filter.sort_by == "timestamp" %} selected{% endif %}>
-                                        Sort by date
-                                    </option>
-                                    <option value="num_rows"{% if filter.sort_by == "num_rows" %} selected{% endif %}>
-                                        Sort by size
-                                    </option>
+                                    <option value="timestamp"{% if filter.sort_by == "timestamp" %} selected{% endif %}>Sort by date</option>
+                                    <option value="num_rows"{% if filter.sort_by == "num_rows" %} selected{% endif %}>Sort by size</option>
                                 </select>
                             </li>
                         {% endif %}
                         <li>
-                            {% include 'components/user-inputs/datasource-select.html' %}
+                            <select name="datasource" aria-label="Filter by data source">
+                                <option value="all"{% if filter.datasource == "all" %} selected{% endif %}>All data sources</option>
+                                {% for datasource in datasources %}
+                                    <option value="{{ datasource }}"{% if filter.datasource == datasource %} selected{% endif %}>{{ datasources[datasource].name }}</option>
+                                {% endfor %}
+                            </select>
                         </li>
-                        <li><label><input type="checkbox" name="hide_empty" {% if filter.hide_empty %}
-                                          checked="checked"{% endif %}> Hide empty datasets</label></li>
                         <li>
-                            <button>Filter</button>
+                            <label><input type="checkbox" name="hide_empty"
+                                          {% if filter.hide_empty %}checked="checked"{% endif %}> Hide empty
+                                datasets</label>
+                        </li>
+                        <li class="dataset-filter-submit">
+                            <button class="button-like">Filter</button>
                         </li>
                     </ul>
-
                 </form>
             </nav>
         {% if datasets %}