From 2c9cd88326acf497bff6b8bc63fbe3aef5eed556 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Tue, 14 May 2019 11:37:52 -0700 Subject: [PATCH] rework of front end --- .flask_cache/2029240f6d1128be89ddc32729463129 | Bin 0 -> 8 bytes .flask_cache/49c1419bef5213bdee92277928c7c241 | Bin 0 -> 22 bytes .flask_cache/74bc75c0764cbc805c70645cef1f026b | Bin 0 -> 241 bytes .flask_cache/c59a0149864f3a0ccffa8e150c81bc43 | Bin 0 -> 241 bytes hyperglass/configuration/__init__.py | 6 +- hyperglass/render/__init__.py | 13 +- hyperglass/render/templates/base.html | 13 +- hyperglass/render/templates/credit.html | 1 + hyperglass/render/templates/footer.html | 36 +- hyperglass/render/templates/hyperglass.scss | 8 +- hyperglass/render/templates/index.html | 358 +++++++++--------- hyperglass/static/css/hyperglass.css | 57 ++- hyperglass/static/js/hyperglass.js | 51 ++- .../static/sass/custom/custom_elements.sass | 49 ++- hyperglass/static/sass/hyperglass.scss | 8 +- 15 files changed, 332 insertions(+), 268 deletions(-) create mode 100644 .flask_cache/2029240f6d1128be89ddc32729463129 create mode 100644 .flask_cache/49c1419bef5213bdee92277928c7c241 create mode 100644 .flask_cache/74bc75c0764cbc805c70645cef1f026b create mode 100644 .flask_cache/c59a0149864f3a0ccffa8e150c81bc43 create mode 100644 hyperglass/render/templates/credit.html diff --git a/.flask_cache/2029240f6d1128be89ddc32729463129 b/.flask_cache/2029240f6d1128be89ddc32729463129 new file mode 100644 index 0000000000000000000000000000000000000000..aa3c92e8217bbd3e4a3f1fc269e3b2f029965b3c GIT binary patch literal 8 PcmeZf&}(4vX4V4$2N?l+ literal 0 HcmV?d00001 diff --git a/.flask_cache/49c1419bef5213bdee92277928c7c241 b/.flask_cache/49c1419bef5213bdee92277928c7c241 new file mode 100644 index 0000000000000000000000000000000000000000..f43bd3ab185ebd1c737df6da89f7edbd850f4e8e GIT binary patch literal 22 ZcmebJ!*V-DuYqMMD+2`dFmg@N0{}`41t$Oi literal 0 HcmV?d00001 diff --git a/.flask_cache/74bc75c0764cbc805c70645cef1f026b b/.flask_cache/74bc75c0764cbc805c70645cef1f026b new file mode 100644 index 0000000000000000000000000000000000000000..24b7970a2f864c6212c8d92e08c615483fcada6d GIT binary patch literal 241 zcmXAiF-`+95Jf4de2Py8(#DP#wpgT85d}y{kwQu1*h6BWwHJE~q~ic|!0DjiD0s=A zVl<5a4;WOHbvN5=PDOScl64yB}UOew$kYh{S)-cs3NaLKr#ZR-z4J=HY*nw{aD`U2szaYX F - + {% block head %} {{ site_title }} - + - + - + - + {% endblock %} {% block content %}{% endblock %} - {% if enable_footer == true and enable_credit == true %} -
- {% endif %} {% block scripts %} diff --git a/hyperglass/render/templates/credit.html b/hyperglass/render/templates/credit.html new file mode 100644 index 0000000..09ec3f8 --- /dev/null +++ b/hyperglass/render/templates/credit.html @@ -0,0 +1 @@ +

Powered by Hyperglass. Source code licensed BSD 3-Clause Clear. diff --git a/hyperglass/render/templates/footer.html b/hyperglass/render/templates/footer.html index 1d74b67..a4f28a6 100644 --- a/hyperglass/render/templates/footer.html +++ b/hyperglass/render/templates/footer.html @@ -1,30 +1,12 @@ -

-
-
-
-
- {{ footer_content }} -
+ +{% endif %} diff --git a/hyperglass/render/templates/hyperglass.scss b/hyperglass/render/templates/hyperglass.scss index 249c33e..14c5753 100644 --- a/hyperglass/render/templates/hyperglass.scss +++ b/hyperglass/render/templates/hyperglass.scss @@ -7,15 +7,21 @@ $family-sans-serif: "{{ primary_font_name }}", sans-serif; $family-monospace: "{{ mono_font_name }}", monospace; +/* Color Changes */ +$body-background-color: {{ color_bg }}; +$footer-background-color: $body-background-color; + /* Custom Colors */ $lg-btn-submit: {{ color_btn_submit }}; $lg-tag-loctitle: {{ color_tag_loctitle }}; $lg-tag-cmdtitle: {{ color_tag_cmdtitle }}; $lg-tag-cmd: {{ color_tag_cmd }}; -$lg-hero-bg: {{ color_hero }}; $lg-progressbar: {{ color_progressbar }}; $lg-tag-loc: {{ color_tag_loc }}; +/* Element Changes */ +$footer-padding: 3rem 1.5rem 3rem ; + /*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */ @import "utilities/_all"; @import "base/_all"; diff --git a/hyperglass/render/templates/index.html b/hyperglass/render/templates/index.html index 7bc77c5..6ee8bd2 100644 --- a/hyperglass/render/templates/index.html +++ b/hyperglass/render/templates/index.html @@ -5,7 +5,7 @@ -{% block content %} + {% block content %} {% if modal_active %}
-
-
- +
+
+ {% if title_mode == 'all' %} + +

+ {{ title }} +

+

+ {{ subtitle }} +

+
+ {% elif title_mode == 'text_only' %} +

+ {{ title }} +

+

+ {{ subtitle }} +

+
+ {% elif title_mode == 'logo_title' %} + +

+ {{ title }} +

+ {% elif title_mode == 'logo_only' %} +
+
+
+ +
+
+ {% endif %} +
+ +
+
+
+ +
-
-
-
-
- -
- -
-
-
- -
- -
-
-
-
-
-
-
-
- -
- -
+
+
+
+
+
-
-
- + + +
+ +
+
+
+
+
+
+
+ -
- +
+
+
+
-
-
-
-
-
-
- -
-
-
-
-
-
-

{{ text_results }}

-

-

-

-
- 50% -

-
-
-
-

{{ text_cache }}

+
+
+
+
+
+
+
+ +
+
+
+
+

{{ text_results }}

+

+

+

+
+ 50% +

+
+

+

+
+

{{ text_cache }}

- {% if enable_footer == true %} - {% include "templates/footer.html" %} - {% endif %}
-{% endblock %} +
+{% if enable_footer == true %} +{% include "templates/footer.html" %} +{% endif %} +{% endblock %} diff --git a/hyperglass/static/css/hyperglass.css b/hyperglass/static/css/hyperglass.css index e153324..1558f38 100644 --- a/hyperglass/static/css/hyperglass.css +++ b/hyperglass/static/css/hyperglass.css @@ -1,7 +1,9 @@ /* Fonts */ @import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700"); @import url("https://fonts.googleapis.com/css?family=Fira+Mono"); +/* Color Changes */ /* Custom Colors */ +/* Element Changes */ /*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */ @keyframes spinAround { from { @@ -275,7 +277,7 @@ th { text-align: left; } html { - background-color: white; + background-color: #fbfffe; font-size: 16px; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; @@ -6927,27 +6929,32 @@ label.panel-block { padding: 18rem 1.5rem; } } .footer { - background-color: #fafafa; - padding: 3rem 1.5rem 6rem; } + background-color: #fbfffe; + padding: 3rem 1.5rem 3rem; } /* Looking Glass Imports */ -.hero.lg-hero-bg { - background-color: #fbfffe; +.footer { + position: absolute; + width: 100%; + bottom: 0; + overflow: hidden; } + +#lg-title, #lg-subtitle { color: rgba(0, 0, 0, 0.7); } -.hero-foot.lg-hero-bg { - background-color: #fbfffe; - color: rgba(0, 0, 0, 0.7); } - -.hero.lg-hero-bg .title, .subtitle { - color: rgba(0, 0, 0, 0.7); } - -.hero.is-danger .title, .subtitle { +.is-danger #lg-title, .is-danger #lg-subtitle { color: #fff; } -.hero.lg-hero-bg .navbar-item { +.navbar-menu, .navbar-brand, .navbar-tabs { + background-color: #fbfffe; } + +.navbar-item { color: rgba(0, 0, 0, 0.7); } +a.navbar-item:hover { + color: #40798c; + background-color: transparent; } + .button.lg-btn-submit { background-color: #40798c; border-color: transparent; @@ -6979,13 +6986,29 @@ label.panel-block { .query-output { font-family: "Fira Mono", monospace; - font-size: 0.875em; + font-size: 0.95em; + width: 100%; + -webkit-overflow-scrolling: touch; overflow-x: auto; - white-space: pre; - word-wrap: normal; } + white-space: pre; } .dropdown-content.lg-help { width: 24rem; } +.dropdown-content.lg-help-mobile { + width: 20rem; } + .icon.lg-icon-help { color: #40798c; } + +#ipprefix::-webkit-input-placeholder { + font-family: "Nunito", sans-serif; } + +#ipprefix:-ms-input-placeholder { + font-family: "Nunito", sans-serif; } + +#ipprefix:-moz-placeholder { + font-family: "Nunito", sans-serif; } + +#ipprefix::-moz-placeholder { + font-family: "Nunito", sans-serif; } diff --git a/hyperglass/static/js/hyperglass.js b/hyperglass/static/js/hyperglass.js index cb5efdf..12e94bb 100644 --- a/hyperglass/static/js/hyperglass.js +++ b/hyperglass/static/js/hyperglass.js @@ -5,18 +5,34 @@ var resultsbox = ($('#resultsbox')); resultsbox.hide(); progress.hide(); -$( document ).ready(function(){ - var defaultasn = $ ( "#network" ).val(); +// Bulma Toggable Dropdown - help text +let dropdown = document.querySelector('#help-dropdown'); +dropdown.addEventListener('click', function(event) { + event.stopPropagation(); + dropdown.classList.toggle('is-active'); +}); + +// Adjust behavior of help text dropdown based on device screen size +function adjustHeight() { + var actual_width = window.innerWidth; + if (actual_width < 1024) { + $('#help-dropdown').removeClass('is-right'); + $('.lg-help').addClass('lg-help-mobile').removeClass('lg-help'); + } +} + +$(document).ready(function() { + var defaultasn = $("#network").val(); $.ajax({ url: `/routers/${defaultasn}`, context: document.body, type: 'get', - success: function (data) { + success: function(data) { selectedRouters = JSON.parse(data) console.log(selectedRouters) updateRouters(selectedRouters); }, - error: function (err) { + error: function(err) { console.log(err) } }) @@ -28,24 +44,24 @@ $('#network').on('change', () => { $.ajax({ url: `/routers/${asn}`, type: 'get', - success: function (data) { + success: function(data) { updateRouters(JSON.parse(data)); }, - error: function (err) { + error: function(err) { console.log(err) } }) }) -function updateRouters (routers) { - routers.forEach(function (r) { +function updateRouters(routers) { + routers.forEach(function(r) { $('#router').append($("
`); - } + } // If traceroute, and lookup is an IPv4 address *with* CIDR prefix (e.g. 192.0.2.0/24, NOT 192.0.2.1), show an error. else if (ipv4_cidr.test(ipprefix) == true && cmd == 'traceroute') { $('#ipprefix_error').show() @@ -116,7 +132,7 @@ $('#lgForm').on('submit', function () {
`); - } + } // If ping, and lookup is an IPv6 address *with* CIDR prefix (e.g. 2001:db8::/48, NOT 2001:db8::1), show an error. else if (ipv6_cidr.test(ipprefix) == true && cmd == 'ping') { $('#ipprefix_error').show() @@ -132,7 +148,7 @@ $('#lgForm').on('submit', function () { `); - } + } // If traceroute, and lookup is an IPv6 address *with* CIDR prefix (e.g. 2001:db8::/48, NOT 2001:db8::1), show an error. else if (ipv6_cidr.test(ipprefix) == true && cmd == 'traceroute') { $('#ipprefix_error').show() @@ -148,9 +164,8 @@ $('#lgForm').on('submit', function () { `); - } - else submitForm(); - }); + } else submitForm(); +}); var submitForm = function() { progress.hide(); @@ -187,7 +202,11 @@ var submitForm = function() { $.ajax({ url: `/lg`, type: 'POST', - data: JSON.stringify({router: router, cmd: cmd, ipprefix: ipprefix}), + data: JSON.stringify({ + router: router, + cmd: cmd, + ipprefix: ipprefix + }), contentType: "application/json; charset=utf-8", context: document.body, readyState: resultsbox.show() && progress.show(), diff --git a/hyperglass/static/sass/custom/custom_elements.sass b/hyperglass/static/sass/custom/custom_elements.sass index 991d79a..a0758c1 100644 --- a/hyperglass/static/sass/custom/custom_elements.sass +++ b/hyperglass/static/sass/custom/custom_elements.sass @@ -1,21 +1,26 @@ // Custom Elements -.hero.lg-hero-bg - background-color: $lg-hero-bg - color: findColorInvert($lg-hero-bg) +.footer + position: absolute + width: 100% + bottom: 0 + overflow: hidden -.hero-foot.lg-hero-bg - background-color: $lg-hero-bg - color: findColorInvert($lg-hero-bg) +#lg-title, #lg-subtitle + color: findColorInvert($body-background-color) -.hero.lg-hero-bg .title, .subtitle - color: findColorInvert($lg-hero-bg) - -.hero.is-danger .title, .subtitle +.is-danger #lg-title, .is-danger #lg-subtitle color: findColorInvert($danger) -.hero.lg-hero-bg .navbar-item - color: findColorInvert($lg-hero-bg) +.navbar-menu, .navbar-brand, .navbar-tabs + background-color: $body-background-color + +.navbar-item + color: findColorInvert($body-background-color) + +a.navbar-item:hover + color: $lg-btn-submit + background-color: transparent .button.lg-btn-submit background-color: $lg-btn-submit @@ -48,13 +53,29 @@ .query-output font-family: $family-monospace - font-size: 0.875em + font-size: 0.95em + width: 100% + -webkit-overflow-scrolling: touch overflow-x: auto white-space: pre - word-wrap: normal .dropdown-content.lg-help width: 24rem +.dropdown-content.lg-help-mobile + width: 20rem + .icon.lg-icon-help color: $lg-btn-submit + +#ipprefix::-webkit-input-placeholder + font-family: $family-sans-serif + +#ipprefix:-ms-input-placeholder + font-family: $family-sans-serif + +#ipprefix:-moz-placeholder + font-family: $family-sans-serif + +#ipprefix::-moz-placeholder + font-family: $family-sans-serif diff --git a/hyperglass/static/sass/hyperglass.scss b/hyperglass/static/sass/hyperglass.scss index 3f52ed8..81c0039 100644 --- a/hyperglass/static/sass/hyperglass.scss +++ b/hyperglass/static/sass/hyperglass.scss @@ -7,15 +7,21 @@ $family-sans-serif: "Nunito", sans-serif; $family-monospace: "Fira Mono", monospace; +/* Color Changes */ +$body-background-color: #fbfffe; +$footer-background-color: $body-background-color; + /* Custom Colors */ $lg-btn-submit: #40798c; $lg-tag-loctitle: #330036; $lg-tag-cmdtitle: #330036; $lg-tag-cmd: #ff5e5b; -$lg-hero-bg: #fbfffe; $lg-progressbar: #40798c; $lg-tag-loc: #40798c; +/* Element Changes */ +$footer-padding: 3rem 1.5rem 3rem ; + /*! bulma.io v0.7.4 | MIT License | github.com/jgthms/bulma */ @import "utilities/_all"; @import "base/_all";