diff --git a/.flask_cache/2029240f6d1128be89ddc32729463129 b/.flask_cache/2029240f6d1128be89ddc32729463129 new file mode 100644 index 0000000..aa3c92e Binary files /dev/null and b/.flask_cache/2029240f6d1128be89ddc32729463129 differ diff --git a/.flask_cache/49c1419bef5213bdee92277928c7c241 b/.flask_cache/49c1419bef5213bdee92277928c7c241 new file mode 100644 index 0000000..f43bd3a Binary files /dev/null and b/.flask_cache/49c1419bef5213bdee92277928c7c241 differ diff --git a/.flask_cache/74bc75c0764cbc805c70645cef1f026b b/.flask_cache/74bc75c0764cbc805c70645cef1f026b new file mode 100644 index 0000000..24b7970 Binary files /dev/null and b/.flask_cache/74bc75c0764cbc805c70645cef1f026b differ diff --git a/.flask_cache/c59a0149864f3a0ccffa8e150c81bc43 b/.flask_cache/c59a0149864f3a0ccffa8e150c81bc43 new file mode 100644 index 0000000..7008df3 Binary files /dev/null and b/.flask_cache/c59a0149864f3a0ccffa8e150c81bc43 differ diff --git a/hyperglass/configuration/__init__.py b/hyperglass/configuration/__init__.py index 5f36be5..592ebbf 100644 --- a/hyperglass/configuration/__init__.py +++ b/hyperglass/configuration/__init__.py @@ -298,13 +298,13 @@ class brand: else: return t["color_progressbar"] - def color_hero(): + def color_bg(): list = [] for t in branding: - if len(t["color_hero"]) == 0: + if len(t["color_bg"]) == 0: return "#fbfffe" else: - return t["color_hero"] + return t["color_bg"] def logo_path(): list = [] diff --git a/hyperglass/render/__init__.py b/hyperglass/render/__init__.py index 4a64df5..bf290bd 100644 --- a/hyperglass/render/__init__.py +++ b/hyperglass/render/__init__.py @@ -18,7 +18,6 @@ env = jinja2.Environment(loader=file_loader) # Converts templates/footer.md from Markdown to HTML md = Markdown() -# footer_file = os.path.join(dir, "templates/footer.md") footer_template = env.get_template("templates/footer.md") footer_jinja = footer_template.render(title=configuration.brand.title()) footer = footer_jinja @@ -53,7 +52,13 @@ class html: title=configuration.brand.title(), subtitle=configuration.brand.subtitle(), title_mode=configuration.brand.title_mode(), - color_hero=configuration.brand.color_hero(), + color_bg=configuration.brand.color_bg(), + color_btn_submit=configuration.brand.color_btn_submit(), + color_progressbar=configuration.brand.color_progressbar(), + color_tag_loctitle=configuration.brand.color_tag_loctitle(), + color_tag_cmdtitle=configuration.brand.color_tag_cmdtitle(), + color_tag_cmd=configuration.brand.color_tag_cmd(), + color_tag_loc=configuration.brand.color_tag_loc(), enable_credit=configuration.brand.enable_credit(), enable_footer=configuration.brand.enable_footer(), footer_content=md.convert(footer), @@ -94,7 +99,7 @@ class css: color_tag_cmdtitle=configuration.brand.color_tag_cmdtitle(), color_tag_cmd=configuration.brand.color_tag_cmd(), color_tag_loc=configuration.brand.color_tag_loc(), - color_hero=configuration.brand.color_hero(), + color_bg=configuration.brand.color_bg(), primary_font_url=configuration.brand.primary_font_url(), primary_font_name=configuration.brand.primary_font_name(), mono_font_url=configuration.brand.mono_font_url(), @@ -112,4 +117,4 @@ class css: logger.info("Rendered Sass templates to CSS files.") except: logger.error("Error rendering Sass template.") - raise TypeError("Error rendering Sass template.") + raise diff --git a/hyperglass/render/templates/base.html b/hyperglass/render/templates/base.html index 7ae4ded..897d168 100644 --- a/hyperglass/render/templates/base.html +++ b/hyperglass/render/templates/base.html @@ -1,29 +1,26 @@ - + {% 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";