From fc6201fe8ad3aaaabab6a4d62ad79a37a2141ce1 Mon Sep 17 00:00:00 2001
From: checktheroads <mtt.lov@gmail.com>
Date: Tue, 14 May 2019 16:05:48 -0700
Subject: [PATCH] finally fixed bulma sticky footer nonsense

---
 hyperglass/render/templates/footer.html       |   2 +-
 hyperglass/render/templates/index.html        |  10 +-
 hyperglass/static/css/hyperglass.css          | 116 ++++++++++--------
 .../static/sass/custom/custom_elements.sass   |  18 ++-
 hyperglass/static/sass/hyperglass.scss        |   2 +-
 5 files changed, 82 insertions(+), 66 deletions(-)

diff --git a/hyperglass/render/templates/footer.html b/hyperglass/render/templates/footer.html
index 3fc1e8f..a313385 100644
--- a/hyperglass/render/templates/footer.html
+++ b/hyperglass/render/templates/footer.html
@@ -1,4 +1,4 @@
-<footer class="footer">
+<footer class="footer is-fixed-bottom">
   <div class="container">
     <div class="content is-small has-text-centered">
       {{ footer_content }}
diff --git a/hyperglass/render/templates/index.html b/hyperglass/render/templates/index.html
index 6ee8bd2..77de4cd 100644
--- a/hyperglass/render/templates/index.html
+++ b/hyperglass/render/templates/index.html
@@ -221,16 +221,18 @@
           <br>
           <p class="query-output" id="output">
           </p>
+          {% if text_cache|length > 1 %}
           <hr>
           <p class="is-size-7">{{ text_cache }}</p>
+          {% endif %}
         </div>
       </div>
     </section>
+      {% if enable_footer == true %}
+      {% include "templates/footer.html" %}
+      {% endif %}
+      {% endblock %}
   </div>
 </body>
-{% if enable_footer == true %}
-{% include "templates/footer.html" %}
-{% endif %}
-{% endblock %}
 
 </html>
diff --git a/hyperglass/static/css/hyperglass.css b/hyperglass/static/css/hyperglass.css
index bb82dac..975bbd7 100644
--- a/hyperglass/static/css/hyperglass.css
+++ b/hyperglass/static/css/hyperglass.css
@@ -764,13 +764,13 @@ a.has-text-warning:hover, a.has-text-warning:focus {
   background-color: #ffdd57 !important; }
 
 .has-text-danger {
-  color: #000000 !important; }
+  color: #ff3860 !important; }
 
 a.has-text-danger:hover, a.has-text-danger:focus {
-  color: black !important; }
+  color: #ff0537 !important; }
 
 .has-background-danger {
-  background-color: #000000 !important; }
+  background-color: #ff3860 !important; }
 
 .has-text-black-bis {
   color: #121212 !important; }
@@ -1793,30 +1793,30 @@ a.box:active {
         box-shadow: none;
         color: rgba(0, 0, 0, 0.7); }
   .button.is-danger {
-    background-color: #000000;
+    background-color: #ff3860;
     border-color: transparent;
     color: #fff; }
     .button.is-danger:hover, .button.is-danger.is-hovered {
-      background-color: black;
+      background-color: #ff2b56;
       border-color: transparent;
       color: #fff; }
     .button.is-danger:focus, .button.is-danger.is-focused {
       border-color: transparent;
       color: #fff; }
       .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) {
-        box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.25); }
+        box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); }
     .button.is-danger:active, .button.is-danger.is-active {
-      background-color: black;
+      background-color: #ff1f4c;
       border-color: transparent;
       color: #fff; }
     .button.is-danger[disabled],
     fieldset[disabled] .button.is-danger {
-      background-color: #000000;
+      background-color: #ff3860;
       border-color: transparent;
       box-shadow: none; }
     .button.is-danger.is-inverted {
       background-color: #fff;
-      color: #000000; }
+      color: #ff3860; }
       .button.is-danger.is-inverted:hover {
         background-color: #f2f2f2; }
       .button.is-danger.is-inverted[disabled],
@@ -1824,32 +1824,32 @@ a.box:active {
         background-color: #fff;
         border-color: transparent;
         box-shadow: none;
-        color: #000000; }
+        color: #ff3860; }
     .button.is-danger.is-loading::after {
       border-color: transparent transparent #fff #fff !important; }
     .button.is-danger.is-outlined {
       background-color: transparent;
-      border-color: #000000;
-      color: #000000; }
+      border-color: #ff3860;
+      color: #ff3860; }
       .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined:focus {
-        background-color: #000000;
-        border-color: #000000;
+        background-color: #ff3860;
+        border-color: #ff3860;
         color: #fff; }
       .button.is-danger.is-outlined.is-loading::after {
-        border-color: transparent transparent #000000 #000000 !important; }
+        border-color: transparent transparent #ff3860 #ff3860 !important; }
       .button.is-danger.is-outlined[disabled],
       fieldset[disabled] .button.is-danger.is-outlined {
         background-color: transparent;
-        border-color: #000000;
+        border-color: #ff3860;
         box-shadow: none;
-        color: #000000; }
+        color: #ff3860; }
     .button.is-danger.is-inverted.is-outlined {
       background-color: transparent;
       border-color: #fff;
       color: #fff; }
       .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined:focus {
         background-color: #fff;
-        color: #000000; }
+        color: #ff3860; }
       .button.is-danger.is-inverted.is-outlined[disabled],
       fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
         background-color: transparent;
@@ -2255,13 +2255,13 @@ a.box:active {
       box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); }
   .input.is-danger,
   .textarea.is-danger {
-    border-color: #000000; }
+    border-color: #ff3860; }
     .input.is-danger:focus, .input.is-danger.is-focused, .input.is-danger:active, .input.is-danger.is-active,
     .textarea.is-danger:focus,
     .textarea.is-danger.is-focused,
     .textarea.is-danger:active,
     .textarea.is-danger.is-active {
-      box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.25); }
+      box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); }
   .input.is-small,
   .textarea.is-small {
     border-radius: 2px;
@@ -2471,13 +2471,13 @@ a.box:active {
     .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active {
       box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); }
   .select.is-danger:not(:hover)::after {
-    border-color: #000000; }
+    border-color: #ff3860; }
   .select.is-danger select {
-    border-color: #000000; }
+    border-color: #ff3860; }
     .select.is-danger select:hover, .select.is-danger select.is-hovered {
-      border-color: black; }
+      border-color: #ff1f4c; }
     .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active {
-      box-shadow: 0 0 0 0.125em rgba(0, 0, 0, 0.25); }
+      box-shadow: 0 0 0 0.125em rgba(255, 56, 96, 0.25); }
   .select.is-small {
     border-radius: 2px;
     font-size: 0.75rem; }
@@ -2654,19 +2654,19 @@ a.box:active {
     border-color: transparent;
     color: rgba(0, 0, 0, 0.7); }
   .file.is-danger .file-cta {
-    background-color: #000000;
+    background-color: #ff3860;
     border-color: transparent;
     color: #fff; }
   .file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta {
-    background-color: black;
+    background-color: #ff2b56;
     border-color: transparent;
     color: #fff; }
   .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta {
     border-color: transparent;
-    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
     color: #fff; }
   .file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta {
-    background-color: black;
+    background-color: #ff1f4c;
     border-color: transparent;
     color: #fff; }
   .file.is-small {
@@ -2826,7 +2826,7 @@ a.box:active {
   .help.is-warning {
     color: #ffdd57; }
   .help.is-danger {
-    color: #000000; }
+    color: #ff3860; }
 
 .field:not(:last-child) {
   margin-bottom: 0.75rem; }
@@ -3157,7 +3157,7 @@ a.box:active {
     background-color: #ffdd57;
     color: rgba(0, 0, 0, 0.7); }
   .notification.is-danger {
-    background-color: #000000;
+    background-color: #ff3860;
     color: #fff; }
 
 .progress {
@@ -3266,13 +3266,13 @@ a.box:active {
   .progress.is-warning:indeterminate {
     background-image: linear-gradient(to right, #ffdd57 30%, #dbdbdb 30%); }
   .progress.is-danger::-webkit-progress-value {
-    background-color: #000000; }
+    background-color: #ff3860; }
   .progress.is-danger::-moz-progress-bar {
-    background-color: #000000; }
+    background-color: #ff3860; }
   .progress.is-danger::-ms-fill {
-    background-color: #000000; }
+    background-color: #ff3860; }
   .progress.is-danger:indeterminate {
-    background-image: linear-gradient(to right, #000000 30%, #dbdbdb 30%); }
+    background-image: linear-gradient(to right, #ff3860 30%, #dbdbdb 30%); }
   .progress.is-small {
     height: 0.75rem; }
   .progress.is-medium {
@@ -3342,8 +3342,8 @@ a.box:active {
       color: rgba(0, 0, 0, 0.7); }
     .table td.is-danger,
     .table th.is-danger {
-      background-color: #000000;
-      border-color: #000000;
+      background-color: #ff3860;
+      border-color: #ff3860;
       color: #fff; }
     .table td.is-narrow,
     .table th.is-narrow {
@@ -3504,7 +3504,7 @@ a.box:active {
     background-color: #ffdd57;
     color: rgba(0, 0, 0, 0.7); }
   .tag:not(body).is-danger {
-    background-color: #000000;
+    background-color: #ff3860;
     color: #fff; }
   .tag:not(body).is-normal {
     font-size: 0.75rem; }
@@ -4092,13 +4092,13 @@ a.list-item {
       border-color: #ffdd57;
       color: #3b3108; }
   .message.is-danger {
-    background-color: #fafafa; }
+    background-color: #fff5f7; }
     .message.is-danger .message-header {
-      background-color: #000000;
+      background-color: #ff3860;
       color: #fff; }
     .message.is-danger .message-body {
-      border-color: #000000;
-      color: black; }
+      border-color: #ff3860;
+      color: #cd0930; }
 
 .message-header {
   align-items: center;
@@ -4579,7 +4579,7 @@ a.list-item {
         background-color: #ffdd57;
         color: rgba(0, 0, 0, 0.7); } }
   .navbar.is-danger {
-    background-color: #000000;
+    background-color: #ff3860;
     color: #fff; }
     .navbar.is-danger .navbar-brand > .navbar-item,
     .navbar.is-danger .navbar-brand .navbar-link {
@@ -4587,7 +4587,7 @@ a.list-item {
     .navbar.is-danger .navbar-brand > a.navbar-item:hover, .navbar.is-danger .navbar-brand > a.navbar-item.is-active,
     .navbar.is-danger .navbar-brand .navbar-link:hover,
     .navbar.is-danger .navbar-brand .navbar-link.is-active {
-      background-color: black;
+      background-color: #ff1f4c;
       color: #fff; }
     .navbar.is-danger .navbar-brand .navbar-link::after {
       border-color: #fff; }
@@ -4606,17 +4606,17 @@ a.list-item {
       .navbar.is-danger .navbar-end > a.navbar-item.is-active,
       .navbar.is-danger .navbar-end .navbar-link:hover,
       .navbar.is-danger .navbar-end .navbar-link.is-active {
-        background-color: black;
+        background-color: #ff1f4c;
         color: #fff; }
       .navbar.is-danger .navbar-start .navbar-link::after,
       .navbar.is-danger .navbar-end .navbar-link::after {
         border-color: #fff; }
       .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link,
       .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link {
-        background-color: black;
+        background-color: #ff1f4c;
         color: #fff; }
       .navbar.is-danger .navbar-dropdown a.navbar-item.is-active {
-        background-color: #000000;
+        background-color: #ff3860;
         color: #fff; } }
   .navbar > .container {
     align-items: stretch;
@@ -6816,7 +6816,7 @@ label.panel-block {
         .hero.is-warning.is-bold .navbar-menu {
           background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); } }
   .hero.is-danger {
-    background-color: #000000;
+    background-color: #ff3860;
     color: #fff; }
     .hero.is-danger a:not(.button):not(.dropdown-item):not(.tag),
     .hero.is-danger strong {
@@ -6830,14 +6830,14 @@ label.panel-block {
         color: #fff; }
     @media screen and (max-width: 1087px) {
       .hero.is-danger .navbar-menu {
-        background-color: #000000; } }
+        background-color: #ff3860; } }
     .hero.is-danger .navbar-item,
     .hero.is-danger .navbar-link {
       color: rgba(255, 255, 255, 0.7); }
     .hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active,
     .hero.is-danger .navbar-link:hover,
     .hero.is-danger .navbar-link.is-active {
-      background-color: black;
+      background-color: #ff1f4c;
       color: #fff; }
     .hero.is-danger .tabs a {
       color: #fff;
@@ -6853,12 +6853,12 @@ label.panel-block {
     .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover {
       background-color: #fff;
       border-color: #fff;
-      color: #000000; }
+      color: #ff3860; }
     .hero.is-danger.is-bold {
-      background-image: linear-gradient(141deg, black 0%, #000000 71%, #0d0d0d 100%); }
+      background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); }
       @media screen and (max-width: 768px) {
         .hero.is-danger.is-bold .navbar-menu {
-          background-image: linear-gradient(141deg, black 0%, #000000 71%, #0d0d0d 100%); } }
+          background-image: linear-gradient(141deg, #ff0561 0%, #ff3860 71%, #ff5257 100%); } }
   .hero.is-small .hero-body {
     padding-bottom: 1.5rem;
     padding-top: 1.5rem; }
@@ -6933,16 +6933,24 @@ label.panel-block {
   padding: 3rem 1.5rem 3rem; }
 
 /* Looking Glass Imports */
+html, body {
+  height: 100%; }
+
+body {
+  display: flex;
+  flex-direction: column; }
+
 .footer {
-  position: absolute;
+  margin-top: auto;
   width: 100%;
+  flex-shrink: 0;
   bottom: 0;
   overflow: hidden; }
 
 #lg-title, #lg-subtitle {
   color: rgba(0, 0, 0, 0.7); }
 
-.has-background-danger p, a, .title, .subtitle {
+.has-background-danger .title, .has-background-danger .subtitle, .has-background-danger p, .has-background-danger a {
   color: #fff; }
 
 .navbar-menu, .navbar-brand, .navbar-tabs {
diff --git a/hyperglass/static/sass/custom/custom_elements.sass b/hyperglass/static/sass/custom/custom_elements.sass
index 062d342..6325d14 100644
--- a/hyperglass/static/sass/custom/custom_elements.sass
+++ b/hyperglass/static/sass/custom/custom_elements.sass
@@ -1,19 +1,25 @@
 // Custom Elements
 
+html, body
+  height: 100%
+
+body
+  display: flex
+  flex-direction: column
+
 .footer
-  position: absolute
+  margin-top: auto
   width: 100%
+  flex-shrink: 0
   bottom: 0
   overflow: hidden
 
 #lg-title, #lg-subtitle
   color: findColorInvert($body-background-color)
 
-// .danger-text
-//   color: findColorInvert($danger)
-
-.has-background-danger p, a, .title, .subtitle
-  color: findColorInvert($danger)
+.has-background-danger
+  .title, .subtitle, p, a
+    color: findColorInvert($danger)
 
 .navbar-menu, .navbar-brand, .navbar-tabs
   background-color: $body-background-color
diff --git a/hyperglass/static/sass/hyperglass.scss b/hyperglass/static/sass/hyperglass.scss
index 31413d8..6b987f0 100644
--- a/hyperglass/static/sass/hyperglass.scss
+++ b/hyperglass/static/sass/hyperglass.scss
@@ -10,7 +10,7 @@ $family-monospace: "Fira Mono", monospace;
 /* Color Changes */
 $body-background-color: #fbfffe;
 $footer-background-color: transparent;
-$danger: #000000;
+$danger: #ff3860;
 
 /* Custom Colors */
 $lg-btn-submit: #40798c;