forked from mirrors/thatmattlove-hyperglass
rework of front end
This commit is contained in:
checktheroads
parent
b901955964
commit
2c9cd88326
15 changed files with 332 additions and 268 deletions
BIN
.flask_cache/2029240f6d1128be89ddc32729463129
Normal file
BIN
.flask_cache/2029240f6d1128be89ddc32729463129
Normal file
Binary file not shown.
BIN
.flask_cache/49c1419bef5213bdee92277928c7c241
Normal file
BIN
.flask_cache/49c1419bef5213bdee92277928c7c241
Normal file
Binary file not shown.
BIN
.flask_cache/74bc75c0764cbc805c70645cef1f026b
Normal file
BIN
.flask_cache/74bc75c0764cbc805c70645cef1f026b
Normal file
Binary file not shown.
BIN
.flask_cache/c59a0149864f3a0ccffa8e150c81bc43
Normal file
BIN
.flask_cache/c59a0149864f3a0ccffa8e150c81bc43
Normal file
Binary file not shown.
|
|
@ -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 = []
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
1
hyperglass/render/templates/credit.html
Normal file
1
hyperglass/render/templates/credit.html
Normal 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>
|
||||
|
|
@ -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>
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
{% if enable_footer == true %}
|
||||
{% include "templates/footer.html" %}
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -5,6 +5,22 @@ var resultsbox = ($('#resultsbox'));
|
|||
resultsbox.hide();
|
||||
progress.hide();
|
||||
|
||||
// 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({
|
||||
|
|
@ -148,8 +164,7 @@ $('#lgForm').on('submit', function () {
|
|||
</div>
|
||||
</article>
|
||||
`);
|
||||
}
|
||||
else submitForm();
|
||||
} else submitForm();
|
||||
});
|
||||
|
||||
var submitForm = function() {
|
||||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue