mirror/checktheroads-hyperglass
1
0
Fork 0
mirror of https://github.com/checktheroads/hyperglass synced 2024-05-11 05:55:08 +00:00
Code Releases Activity

fix responsive styling

Browse Source
This commit is contained in:
checktheroads
2019-08-22 20:27:57 -07:00
parent 87f065a2ac
commit 3a17c47ff5
5 changed files with 85 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
hyperglass/render/templates/base.html.j2
View File

@@ -24,7 +24,7 @@
<body class="d-flex flex-column h-100">
{% include "templates/ratelimit-query.html.j2" %}
{% include "templates/info.html.j2" %}
<div class="container-fluid d-flex w-100 h-100 p-3 mx-auto flex-column">
<div class="container-fluid d-flex w-100 h-100 mx-auto flex-column" id="hg-page-container">
<main role="main" class="flex-shrink-0">
{% block content %}

10
hyperglass/render/templates/results.html.j2
View File

@@ -1,17 +1,15 @@
<div class="container animsition" data-animsition-out-class="fade-out-left" data-animsition-in-class="fade-in-right"
id="hg-results">
<div class="row mb-md-1 mb-lg-3 mb-xl-3 px-1">
<div
class="d-flex col-12 col-lg-6 justify-content-center justify-content-lg-start align-self-end text-center text-lg-left">
<div class="row mb-md-1 mb-lg-3 mb-xl-3 px-3 px-md-1 py-3 py-md-1 mx-0 mw-100 mw-md-none">
<div class="d-flex col-12 col-lg-6 justify-content-center justify-content-lg-start align-self-end text-center text-lg-left">
{% import "templates/title.html.j2" as title %}
{{ title.title(branding, primary_asn, size_title="h1", size_subtitle="h4", direction="left") }}
</div>
<div
class="d-flex col-12 col-lg-6 align-self-end justify-content-center justify-content-lg-end text-center text-lg-right">
<div class="d-flex col-12 col-lg-6 align-self-end justify-content-center justify-content-lg-end text-center text-lg-right">
<h2 class="mb-0" id="hg-results-title"></h2>
</div>
</div>
<div class="row mt-lg-1">
<div class="row mt-lg-1 mx-0 mw-100 mw-md-none">
<div class="col align-self-center">
<div class="accordion" id="hg-accordion">
</div>

13
hyperglass/render/templates/theme.sass.j2
View File

@@ -34,6 +34,17 @@ $hg-footer: findFooterColor($hg-background)
// Theme Overrides
$enable-responsive-font-sizes: true
$enable-validation-icons: false
$theme-colors: ("primary": $hg-primary, "danger": $hg-danger, "warning": $hg-warning, "light": $hg-light, "dark": $hg-dark, "loading": $hg-loading, "footer": $hg-footer)
$body-bg: $hg-background
$body-color: findTextColor($body-bg)
$body-color: findTextColor($body-bg)
$border-radius: .44rem
$border-radius-lg: .4rem
$border-radius-sm: .35rem

26
hyperglass/static/hyperglass.es6
View File

@@ -9,14 +9,16 @@ const ClipboardJS = require('clipboard');
const frontEndConfig = require('./frontend.json');
const inputMessages = frontEndConfig.messages;
const pageContainer = $('#hg-page-container');
const formContainer = $('#hg-form');
const queryLocation = $('#location');
const queryType = $('#query_type');
const queryTarget = $('#query_target');
const queryTargetAppend = $('#hg-target-append');
const submitIcon = $('#hg-submit-icon');
const resultsContainer = $('#hg-results');
const formContainer = $('#hg-form');
const resultsAccordion = $('#hg-accordion');
const resultsColumn = resultsAccordion.parent();
const backButton = $('#hg-back-btn');
const footerHelpBtn = $('#hg-footer-help-btn');
const footerTermsBtn = $('#hg-footer-terms-btn');
@@ -33,6 +35,16 @@ class InputInvalid extends Error {
}
}
const swapSpacing = (goTo) => {
if (goTo === 'form') {
pageContainer.removeClass('px-0 px-md-3');
resultsColumn.removeClass('px-0');
} else if (goTo === 'results') {
pageContainer.addClass('px-0 px-md-3');
resultsColumn.addClass('px-0');
}
};
const resetResults = () => {
queryLocation.selectpicker('deselectAll');
queryLocation.selectpicker('val', '');
@@ -41,6 +53,7 @@ const resetResults = () => {
resultsContainer.animsition('out', formContainer, '#');
resultsContainer.hide();
$('.hg-info-btn').remove();
swapSpacing('form');
formContainer.show();
formContainer.animsition('in');
backButton.addClass('d-none');
@@ -114,9 +127,12 @@ const supportedBtn = qt => `<button class="btn btn-dark hg-info-btn" id="hg-info
queryType.on('changed.bs.select', () => {
const queryTypeId = queryType.val();
const queryTypeBtn = $('.hg-info-btn');
if ((queryTypeId === 'bgp_community') || (queryTypeId === 'bgp_aspath')) {
$('.hg-info-btn').remove();
queryTypeBtn.remove();
queryTargetAppend.prepend(supportedBtn(queryTypeId));
} else {
queryTypeBtn.remove();
}
});
@@ -288,6 +304,7 @@ $('#lgForm').submit((event) => {
queryApp(queryType, queryTypeTitle, queryLocation, queryTarget);
$('#hg-form').animsition('out', $('#hg-results'), '#');
$('#hg-form').hide();
swapSpacing('results');
$('#hg-results').show();
$('#hg-results').animsition('in');
$('#hg-submit-spinner').remove();
@@ -301,10 +318,11 @@ $('#hg-back-btn').click(() => {
const clipboard = new ClipboardJS('.hg-copy-btn');
clipboard.on('success', (e) => {
$(e.trigger).find('.hg-copy-icon').removeClass('remixicon-checkbox-multiple-blank-line').addClass('remixicon-checkbox-multiple-line');
const copyIcon = $(e.trigger).find('.hg-copy-icon');
copyIcon.removeClass('remixicon-checkbox-multiple-blank-line').addClass('remixicon-checkbox-multiple-line');
e.clearSelection();
setTimeout(() => {
$(e.trigger).find('.hg-copy-icon').removeClass('remixicon-checkbox-multiple-line').addClass('remixicon-checkbox-multiple-blank-line');
copyIcon.removeClass('remixicon-checkbox-multiple-line').addClass('remixicon-checkbox-multiple-blank-line');
}, 800);
});
clipboard.on('error', (e) => {

89
hyperglass/static/overrides.sass
View File

@@ -13,8 +13,8 @@
.mw-sm-100
max-width: 100% !important
.mw-sm-auto
max-width: auto !important
.mw-sm-none
max-width: none !important
.mh-sm-25
max-height: 25% !important
@@ -28,8 +28,8 @@
.mh-sm-100
max-height: 100% !important
.mh-sm-auto
max-height: auto !important
.mh-sm-none
max-height: none !important
@media (min-width: 768px)
.mw-md-25
@@ -44,8 +44,8 @@
.mw-md-100
max-width: 100% !important
.mw-md-auto
max-width: auto !important
.mw-md-none
max-width: none !important
.mh-md-25
max-height: 25% !important
@@ -59,8 +59,8 @@
.mh-md-100
max-height: 100% !important
.mh-md-auto
max-height: auto !important
.mh-md-none
max-height: none !important
@media (min-width: 992px)
.mw-lg-25
@@ -75,8 +75,8 @@
.mw-lg-100
max-width: 100% !important
.mw-lg-auto
max-width: auto !important
.mw-lg-none
max-width: none !important
.mh-lg-25
max-height: 25% !important
@@ -90,8 +90,8 @@
.mh-lg-100
max-height: 100% !important
.mh-lg-auto
max-height: auto !important
.mh-lg-none
max-height: none !important
@media (min-width: 1200px)
.mw-xl-25
@@ -106,8 +106,8 @@
.mw-xl-100
max-width: 100% !important
.mw-xl-auto
max-width: auto !important
.mw-xl-none
max-width: none !important
.mh-xl-25
max-height: 25% !important
@@ -121,8 +121,8 @@
.mh-xl-100
max-height: 100% !important
.mh-xl-auto
max-height: auto !important
.mh-xl-none
max-height: none !important
@media (min-width: 576px)
.mw-sm-25
max-width: 25% !important
@@ -136,8 +136,8 @@
.mw-sm-100
max-width: 100% !important
.mw-sm-auto
max-width: auto !important
.mw-sm-none
max-width: none !important
.mh-sm-25
max-height: 25% !important
@@ -151,8 +151,8 @@
.mh-sm-100
max-height: 100% !important
.mh-sm-auto
max-height: auto !important
.mh-sm-none
max-height: none !important
@media (min-width: 768px)
.mw-md-25
@@ -167,8 +167,8 @@
.mw-md-100
max-width: 100% !important
.mw-md-auto
max-width: auto !important
.mw-md-none
max-width: none !important
.mh-md-25
max-height: 25% !important
@@ -182,8 +182,8 @@
.mh-md-100
max-height: 100% !important
.mh-md-auto
max-height: auto !important
.mh-md-none
max-height: none !important
@media (min-width: 992px)
.mw-lg-25
@@ -198,8 +198,8 @@
.mw-lg-100
max-width: 100% !important
.mw-lg-auto
max-width: auto !important
.mw-lg-none
max-width: none !important
.mh-lg-25
max-height: 25% !important
@@ -213,8 +213,8 @@
.mh-lg-100
max-height: 100% !important
.mh-lg-auto
max-height: auto !important
.mh-lg-none
max-height: none !important
@media (min-width: 1200px)
.mw-xl-25
@@ -229,8 +229,8 @@
.mw-xl-100
max-width: 100% !important
.mw-xl-auto
max-width: auto !important
.mw-xl-none
max-width: none !important
.mh-xl-25
max-height: 25% !important
@@ -244,8 +244,8 @@
.mh-xl-100
max-height: 100% !important
.mh-xl-auto
max-height: auto !important
.mh-xl-none
max-height: none !important
// hyperglass overrides
#hg-form
@@ -269,8 +269,8 @@
// Fixes input group issue where button is 1px taller than the input element (default is 2px)
#hg-submit-button
border-top-right-radius: .3rem
border-bottom-right-radius: .3rem
border-top-right-radius: $border-radius-lg
border-bottom-right-radius: $border-radius-lg
.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select,
@@ -292,6 +292,7 @@
bottom: 5rem !important
border-radius: 50rem !important
border: 1px solid $card-border-color !important
background-color: $hg-loading
transition: all .3s !important
font-weight: 200 !important
font-size: 1.4rem !important
@@ -303,6 +304,10 @@
font-weight: 200
font-size: 1.4rem
#hg-accordion
.card-body
word-wrap: normal !important
.hg-menu-btn
-webkit-transition: none
-moz-transition: none
@@ -338,11 +343,12 @@
.hg-loading
animation: spinner-border .75s linear infinite
.accordion
div
&.card
&:only-child
border-bottom: $card-border-width solid $card-border-color
.accordion > .card:only-of-type
border-bottom: $card-border-width solid $card-border-color
border-top-left-radius: $border-radius !important
border-top-right-radius: $border-radius !important
border-bottom-left-radius: $border-radius !important
border-bottom-right-radius: $border-radius !important
.btn:focus,.btn:active
outline: none !important
@@ -434,7 +440,4 @@
padding-left: 0.3rem !important
.modal-title
padding-bottom: 1rem !important
.form-control.is-invalid, .form-control.is-valid
background-image: unset !important
padding-bottom: 1rem !important