clean up minor front end design

hyperglass/render/templates/base.html.j2

@@ -11,9 +11,9 @@
   <link rel="icon" type="image/png" sizes="32x32" href="{{ branding.logo.favicons }}favicon-32x32.png" />
   <link rel="manifest" href="{{ branding.logo.favicons }}site.webmanifest" />
   <link rel="mask-icon" href="{{ branding.logo.favicons }}safari-pinned-tab.svg"
-    color="{{ branding.colors.tag.command }}" />
+    color="{{ branding.colors.primary }}" />
   <link rel="shortcut icon" href="{{ branding.logo.favicons }}favicon.ico" />
-  <meta name="msapplication-TileColor" content="{{ branding.colors.tag.location_title }}" />
+  <meta name="msapplication-TileColor" content="{{ branding.colors.primary }}" />
   <meta name="msapplication-config" content="{{ branding.logo.favicons }}browserconfig.xml" />
   <meta name="theme-color" content="{{ branding.colors.button_submit }}" />
   <link href="ui/hyperglass.css" rel="stylesheet" type="text/css" />

hyperglass/render/templates/footer.html.j2

@@ -1,16 +1,19 @@
-{% if branding.footer.enable %}
 <nav class="navbar fixed-bottom navbar-footer bg-overlay pt-0 pb-0">
   <div class="container-fluid row no-gutters text-center p-0">
+  {% if branding.terms.enable %}
     <div class="col-auto float-left">
       <div class="d-none" id="hg-footer-terms-html">{{ details.footer.content | safe }}</div>
       <a class="btn btn-link" id="hg-footer-terms-btn" href="#" data-toggle="popover" tabindex="0" role="button"
         title="{{ branding.text.terms }}"><small>{{ branding.text.terms }}</small></a>
     </div>
+    {% endif %}
+    {% if branding.help_menu.enable %}
     <div class="col-auto float-left">
       <div class="d-none" id="hg-footer-help-html">{{ rendered_help.content | safe }}</div>
       <a class="btn btn-link" id="hg-footer-help-btn" href="#" data-toggle="popover" tabindex="0" role="button"
         title="{{ branding.text.info }}"><small>{{ branding.text.info }}</small></a>
     </div>
+    {% endif %}
     <div class="col-auto mr-auto"></div>
     {% if branding.credit.enable %}
     <div class="col-auto float-right">
@@ -33,5 +36,4 @@
     </div>
     {% endif %}
   </div>
-</nav>
-{% endif %}
+</nav>

hyperglass/render/templates/theme.sass.j2

@@ -46,6 +46,14 @@ $hg-background: {{ colors.background }}
         $darker-color: scale-color($color, $lightness: 5%)
         @return grayscale($darker-color)
 
+@function findSubtleText($color)
+    @if (lightness($color) > 55%)
+        $subtle-color: scale-color($color, $lightness: -20%)
+        @return grayscale($subtle-color)
+    @else
+        $subtle-color: scale-color($color, $lightness: 40%)
+        @return grayscale($subtle-color)
+
 //// Body Color
 $body-bg:       $hg-background
 $body-color:    findTextColor($body-bg)
@@ -102,7 +110,7 @@ $dropdown-bg:                   $hg-field-bg
 $dropdown-color:                $hg-field-color
 $dropdown-divider-bg:           $hg-border
 $dropdown-border-color:         $hg-border
-$dropdown-header-color:         findSubtleColor($dropdown-color)
+$dropdown-header-color:         findSubtleText($dropdown-color)
 $dropdown-link-color:           $hg-field-color
 $dropdown-link-hover-bg:        $hg-primary
 $dropdown-link-hover-color:     $hg-primary-color
@@ -113,7 +121,7 @@ $dropdown-link-active-color:    $hg-primary-color
 $input-bg:                      $hg-field-bg
 $input-color:                   $hg-field-color
 $input-border-color:            $hg-border
-$input-placeholder-color:       findSubtleColor($hg-field-color)
+$input-placeholder-color:       findSubtleText($hg-field-color)
 $input-btn-focus-box-shadow:    none
 $input-focus-bg:                findSubtleColor($input-bg)
 $input-focus-color:             $input-color

hyperglass/static/hyperglass.es6

@@ -73,19 +73,23 @@ const reloadPage = () => {
 };
 
 queryLocation.selectpicker({
+  iconBase: '',
   liveSearchNormalize: true,
+  selectedTextFormat: 'count > 2',
   style: '',
   styleBase: 'form-control',
-  iconBase: '',
   tickIcon: 'remixicon-check-line',
+}).on('shown.bs.select hidden.bs.select changed.bs.select', (e) => {
+  $(e.currentTarget).nextAll('.dropdown-menu.show').find('input').blur();
 });
 
 queryType.selectpicker({
-  liveSearchNormalize: true,
+  iconBase: '',
+  liveSearch: false,
   style: '',
   styleBase: 'form-control',
-  iconBase: '',
-  tickIcon: 'remixicon-check-line',
+}).on('hidden.bs.select', (e) => {
+  $(e.currentTarget).nextAll('.form-control.dropdown-toggle').blur();
 });
 
 footerTermsBtn.popover({

hyperglass/static/overrides.sass

@@ -247,6 +247,9 @@
     .mh-xl-none
         max-height: none !important
 
+.mh-75
+    max-height: 75% !important
+
 // hyperglass overrides
 #hg-form
     margin-top: 15% !important
@@ -437,4 +440,8 @@
     padding-left: 0.3rem !important
 
 .modal-title
-    padding-bottom: 1rem !important
+    padding-bottom: 1rem !important
+
+.popover-body
+    max-height: 60vh !important
+    overflow-y: auto !important