rework of front end

This commit is contained in:
checktheroads 2019-05-14 11:37:52 -07:00
parent b901955964
commit 2c9cd88326
15 changed files with 332 additions and 268 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -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 = []

View file

@ -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

View file

@ -1,29 +1,26 @@
<!DOCTYPE html>
<html>
<head>
{% block head %}
<title>{{ site_title }}</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="apple-touch-icon" sizes="180x180" href="static/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon/favicon-16x16.png">
<link rel="manifest" href="static/images/favicon/site.webmanifest">
<link rel="mask-icon" href="static/images/favicon/safari-pinned-tab.svg" color="#ff5e5b">
<link rel="mask-icon" href="static/images/favicon/safari-pinned-tab.svg" color="{{ color_tag_cmd }}">
<link rel="shortcut icon" href="static/images/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#330036">
<meta name="msapplication-TileColor" content="{{ color_tag_loctitle }}">
<meta name="msapplication-config" content="static/images/favicon/browserconfig.xml">
<meta name="theme-color" content="#330036">
<meta name="theme-color" content="{{ color_btn_submit }}">
<link href="static/css/icofont/icofont.min.css" rel="stylesheet" />
<link href="static/css/hyperglass.css" rel="stylesheet" />
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
{% if enable_footer == true and enable_credit == true %}
<br>
{% endif %}
</body>
{% block scripts %}
<script src="static/js/jquery-3.4.0.min.js"></script>

View file

@ -0,0 +1 @@
<p>Powered by <a href="https://github.com/checktheroads/hyperglass">Hyperglass</a>. Source code licensed <a href="https://github.com/checktheroads/hyperglass/blob/master/LICENSE">BSD 3-Clause Clear.</a</p>

View file

@ -1,30 +1,12 @@
<div class="hero-foot lg-hero-bg">
<div class="columns">
<div class="column is-1"></div>
<div class="column">
<div class="content is-small has-text-justified">
<footer class="footer">
<div class="container">
<div class="content is-small has-text-centered">
{{ footer_content }}
</div>
</div>
{% if enable_credit == true %}
<div class="column is-1"></div>
<div class="column is-1">
<div class="dropdown is-up is-right is-hoverable">
<div class="dropdown-trigger">
<span class="icon has-text is-size-5 lg-icon-help">
<i class="icofont-info-circle" aria-hidden="true"></i>
</span>
</div>
<div class="dropdown-menu is-expanded" id="dropdown-menu2" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p class="is-small has-icons">
<strong>Powered by <a href="https://github.com/checktheroads/hyperglass">hyperglass</a></strong>
</p>
<div class="content is-small has-text-centered">
{% include "templates/credit.html" %}
</div>
</div>
</div>
</div>
<div class="column is-1"></div>
</div>
{% endif %}
</footer>
{% endif %}

View file

@ -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";

View file

@ -5,7 +5,7 @@
</head>
<body>
{% block content %}
{% block content %}
{% if modal_active %}
<div class="modal is-active" id="ratelimit">
{% else %}
@ -27,14 +27,12 @@
</article>
</div>
</div>
<section class="hero lg-hero-bg is-fullheight is-clipped">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="container is-fluid">
<div class="navbar-brand">
</div>
{% if show_peeringdb == true %}
<div id="navbarMenuHero" class="navbar-menu">
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item" href="https://as{{ primary_asn }}.peeringdb.com">
<span>PeeringDB</span>
@ -48,17 +46,26 @@
{% endif %}
</div>
</nav>
<div class="container has-text-centered">
{% if title_mode == 'both' %}
<section class="section">
<div class="container has-text-centered is-fluid">
{% if title_mode == 'all' %}
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
<h1 class="title is-3">
<h1 class="title is-3" id="lg-title">
{{ title }}
</h1>
<h2 class="subtitle is-5">
<h2 class="subtitle is-5" id="lg-subtitle">
{{ subtitle }}
</h2>
<br>
{% elif title_mode == 'hide_subtitle' %}
{% elif title_mode == 'text_only' %}
<h1 class="title is-1" id="lg-title">
{{ title }}
</h1>
<h2 class="subtitle is-3" id="lg-subtitle">
{{ subtitle }}
</h2>
<br>
{% elif title_mode == 'logo_title' %}
<img src="{{ logo_path }}" style="width: {{ logo_width }}px;">
<h1 class="title is-3">
{{ title }}
@ -73,10 +80,10 @@
{% endif %}
<br>
<form onsubmit="return false" name="queryform" id="lgForm" action="?" method="POST">
<div class="container">
<div class="container is-fluid">
<div class="field has-addons has-addons-centered">
<div class="control has-icons-left is-expanded">
<input type="text" class="input is-medium is-rounded" id="ipprefix" placeholder="{{ placeholder_prefix }}">
<input type="text" class="input is-medium is-rounded is-family-monospace" id="ipprefix" placeholder="{{ placeholder_prefix }}">
<span class="icon is-small is-left"><i class="icofont-at"></i></span>
</div>
</div>
@ -99,17 +106,17 @@
<option id="text_location" selected disabled>{{ text_location }}</option>
</select>
</div>
<span class="icon is-left"><i class="icofont-globe"></i></span>
<span class="icon is-left"><i class="icofont-location-arrow"></i></span>
</div>
</div>
<br>
</div>
<div class="container">
<div class="container is-fluid">
<div class="field has-addons has-addons-centered is-grouped-centered">
<div class="control">
<div class="dropdown is-right is-hoverable">
<div class="dropdown is-right" id="help-dropdown">
<div class="dropdown-trigger">
<button class="button is-rounded is-medium" aria-haspopup="true" aria-controls="dropdown-menu2">
<button class="button is-rounded is-medium" aria-haspopup="true" aria-controls="dropdown-menu2" onclick="adjustHeight()">
<span class="icon is-size-7 lg-icon-help">
<i class="icofont-question" aria-hidden="true"></i>
</span>
@ -200,12 +207,10 @@
</div>
</div>
</form>
</div>
<div class="hero-body">
<div class="container" id="resultsbox">
<div class="tile is-ancestor">
<div class="tile is-12 is-parent">
<div class="tile is-child box">
</section>
<section class="section">
<div class="container is-fluid">
<div class="box" id="resultsbox">
<p class="title" id="results">{{ text_results }}</p>
<p id="queryInfo">
</p>
@ -213,20 +218,19 @@
<br>
<progress class="progress is-medium lg-progressbar" max="100">50%</progress>
</p>
<div id="output">
</div>
<br>
<p class="query-output" id="output">
</p>
<hr>
<p class="is-size-7">{{ text_cache }}</p>
</div>
</div>
</div>
</div>
</div>
{% if enable_footer == true %}
{% include "templates/footer.html" %}
{% endif %}
</section>
{% endblock %}
</div>
</body>
{% if enable_footer == true %}
{% include "templates/footer.html" %}
{% endif %}
{% endblock %}
</html>

View file

@ -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; }

View file

@ -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($("<option>").attr('value', r.location).attr('type', r.type).text(r.location))
})
}
// Submit Form Action
$('#lgForm').on('submit', function () {
$('#lgForm').on('submit', function() {
// Regex to match any IPv4 host address or CIDR prefix
var ipv4_any = new RegExp('^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(/(3[0-2]|2[0-9]|1[0-9]|[0-9]))?$');
@ -148,9 +164,8 @@ $('#lgForm').on('submit', function () {
</div>
</article>
`);
}
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(),

View file

@ -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

View file

@ -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";