Modify search template buttons (#801)

* Modify search page button colors

* Rename Clear Options to Reset and reset URL as well

* Add search improvements to CHANGES

Author: tw4l

CHANGES.rst

@@ -4,9 +4,9 @@ pywb 2.7.3 changelist
 (In progress)
 
 * Catch warcio exceptions when indexing CDX by @oskarhek
-oskarhek 
 * Add ui.logo_home_url as config.yaml option
 * wb-manager: Show error when adding duplicate warc files by @kuechensofa
+* Improve search template and add help text by @krakan
 
 pywb 2.7.2 changelist
 ~~~~~~~~~~~~~~~~~~~~~

pywb/static/search.js

@@ -25,11 +25,12 @@ var elemIds = {
   form: 'search-form',
   resultsNewWindow: 'open-results-new-window',
   advancedOptions: 'advanced-options',
-  clearOptions: 'clear-options',
+  resetSearchForm: 'reset-search-form',
 };
 
-function clearOptions(event) {
+function resetSearchForm(event) {
   for (const field of [
+    elemIds.url,
     elemIds.match,
     elemIds.dateTime.from,
     elemIds.dateTime.fromTime,
@@ -206,7 +207,7 @@ $(document).ready(function() {
     elemIds.dateTime.to,
     document.getElementById(elemIds.dateTime.toBad)
   );
-  document.getElementById(elemIds.clearOptions).onclick = clearOptions;
+  document.getElementById(elemIds.resetSearchForm).onclick = resetSearchForm;
   document.getElementById(elemIds.filtering.add).onclick = addFilter;
   document.getElementById(elemIds.filtering.clear).onclick = clearFilters;
   var searchURLInput = document.getElementById(elemIds.url);

pywb/templates/search.html

@@ -58,16 +58,16 @@ <h4 class="display-4">
                 </div>
             </div>
             <div class="col-7">
-                <button type="submit" id="search-button" class="btn btn-outline-primary float-right" role="button" aria-label="{{ _('Search') }}">
+                <button type="submit" id="search-button" class="btn btn-primary float-right" role="button" aria-label="{{ _('Search') }}">
                     {% trans %}Search{% endtrans %}
                 </button>
-                <button class="btn btn-outline-info float-right mr-3" type="button" role="button"
+                <button class="btn btn-outline-secondary float-right mr-3" type="button" role="button"
                         data-toggle="collapse" data-target="#advancedOptions" id="advanced-options"
                         aria-expanded="false" aria-controls="advancedOptions" aria-label="{{ _('Search Options') }}">
                     {{ _('Search Options') }}
                 </button>
-                <button id="clear-options" class="btn btn-outline-warning float-right mr-3" type="button" role="button" aria-label="{{ _('Reset Options') }}">
-                    {{ _('Reset Options') }}
+                <button id="reset-search-form" class="btn btn-outline-danger float-right mr-3" type="button" role="button" aria-label="{{ _('Reset Options') }}">
+                    {{ _('Reset') }}
                 </button>
             </div>
         </div>
@@ -153,7 +153,7 @@ <h4 class="display-4">
                         <ul id="filter-list" class="filter-list">
                             <li id="filtering-nothing">{% trans %}No Filter{% endtrans %}</li>
                         </ul>
-                        <button id="clear-filters" class="btn btn-outline-warning float-right mr-2" type="button">
+                        <button id="clear-filters" class="btn btn-outline-danger float-right mr-2" type="button">
                             {% trans %}Clear Filters{% endtrans %}
                         </button>
                     </div>