From 05e269d175998822ce3a439b86c5ff6cdd564179 Mon Sep 17 00:00:00 2001 From: Goutte Date: Wed, 16 Aug 2017 16:31:18 +0200 Subject: [PATCH] Show an error message for users without javascript. --- CHANGELOG.md | 2 +- web/static/css/main.css | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------- web/static/js/swapp.js | 6 +++--- web/static/js/swapp.ls | 6 +++--- web/view/layout.html.jinja2 | 9 ++++----- 5 files changed, 95 insertions(+), 61 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e337a17..0544823 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,7 +23,7 @@ - [ ] CRON statement to call it - [x] Download raw data (tarball of CSV) for current time interval and targets - [ ] Download raw data as NetCDF for current everything, via SAMP -- [ ] Add a warning for users with javascript disabled +- [x] Add a warning for users with javascript disabled - [ ] Set the log level to _error_ in production (see `web/run.py`) diff --git a/web/static/css/main.css b/web/static/css/main.css index 0bd53fc..baca3ab 100755 --- a/web/static/css/main.css +++ b/web/static/css/main.css @@ -55,7 +55,7 @@ footer { min-height: 1050px; } -/** HEADER ********************************************************************/ +/** HEADER *******************************************************************/ header.header { background-image: url("../img/header_logo.png"); @@ -72,7 +72,7 @@ header.header { font-style: italic; } -/** MENU NAVIGATION ***********************************************************/ +/** MENU NAVIGATION **********************************************************/ nav#menu { background-color: #004F8D; @@ -121,7 +121,7 @@ nav#menu ul li a { padding: 10px 15px; } -/** STYLE *********************************************************************/ +/** STYLE ********************************************************************/ a { /*color: #003965;*/ @@ -188,61 +188,96 @@ ul li { /*padding: 10px 0;*/ /*}*/ -/** LOADER ********************************************************************/ +/** LOADER *******************************************************************/ +/*.loader {*/ + /*transform: translate(50vw, 50vh);*/ + /*height: 200px;*/ + /*width: 200px;*/ +/*}*/ -.loader { - transform: translate(50vw, 50vh); - height: 200px; - width: 200px; -} +/*.loader .hole {*/ + /*margin: -50%;*/ + /*height: 100%;*/ + /*width: 100%;*/ + /*border-radius: 50%;*/ + /*box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, -20px -10px 100px #000000 inset;*/ + /*background: #f08301;*/ + /*-webkit-animation: shadowmove 8s infinite linear;*/ +/*}*/ -.loader .hole { - margin: -50%; - height: 100%; - width: 100%; - border-radius: 50%; - box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, -20px -10px 100px #000000 inset; - background: #f08301; - -webkit-animation: shadowmove 8s infinite linear; -} +/*@-webkit-keyframes shadowmove {*/ + /*0% {*/ + /*box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, -20px -10px 100px #000000 inset;*/ + /*}*/ + /*50% {*/ + /*box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, -220px -110px 100px #000000 inset;*/ + /*}*/ + /*50.01% {*/ + /*box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, 220px 110px 100px #000000 inset;*/ + /*}*/ + /*75% {*/ + /*box-shadow: 0px 0px 30px #111111, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, 220px 110px 100px #000000 inset;*/ + /*}*/ + /*90% {*/ + /*box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, 10px 20px 100px #000000 inset;*/ + /*}*/ +/*}*/ -@-webkit-keyframes shadowmove { - 0% { - box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, -20px -10px 100px #000000 inset; - } - 50% { - box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, -220px -110px 100px #000000 inset; - } - 50.01% { - box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, 220px 110px 100px #000000 inset; - } - 75% { - box-shadow: 0px 0px 30px #111111, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, 220px 110px 100px #000000 inset; - } - 90% { - box-shadow: 0px 0px 30px #88ffff, 0px 0px 100px #000000 inset, 0px 0px 50px #55ffff inset, 10px 20px 100px #000000 inset; - } -} +/*@-ms-keyframes spin {*/ + /*from { -ms-transform: rotate(0deg); }*/ + /*to { -ms-transform: rotate(360deg); }*/ +/*}*/ +/*@-moz-keyframes spin {*/ + /*from { -moz-transform: rotate(0deg); }*/ + /*to { -moz-transform: rotate(360deg); }*/ +/*}*/ +/*@-webkit-keyframes spin {*/ + /*from { -webkit-transform: rotate(0deg); }*/ + /*to { -webkit-transform: rotate(360deg); }*/ +/*}*/ +/*@keyframes spin {*/ + /*from { transform:rotate(0deg); }*/ + /*to { transform:rotate(360deg); }*/ +/*}*/ -@-ms-keyframes spin { - from { -ms-transform: rotate(0deg); } - to { -ms-transform: rotate(360deg); } -} -@-moz-keyframes spin { - from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(360deg); } +/** NO JAVASCRIPT ************************************************************/ + +#nojs-alert { + position: fixed; + z-index: 2000; + top: 0; + left: 0; } -@-webkit-keyframes spin { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(360deg); } + +.nojs { + background: #c5423c; + color: #eeeeee; + + text-align: center; + font-family: "DejaVu Sans Mono", monospace; + + opacity: 0; + animation: 1.618s fadeIn; + animation-delay: 1.618s; + animation-fill-mode: forwards; + + pointer-events: none; + + padding: 1em 0; + width: 100%; } -@keyframes spin { - from { transform:rotate(0deg); } - to { transform:rotate(360deg); } + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } -/** MEDIA QUERIES *************************************************************/ +/** MEDIA QUERIES ************************************************************/ @media all and (max-width: 980px) { #page-container{ diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index 52c1548..06f99bd 100644 --- a/web/static/js/swapp.js +++ b/web/static/js/swapp.js @@ -22,7 +22,7 @@ function SpaceWeather(configuration){ var configs, res$, k, this$ = this; this.configuration = configuration; - console.info(" _ _ _ _ ____\n | | | | ___| (_) ___ | _ \\ _ __ ___ _ __ __ _\n | |_| |/ _ \\ | |/ _ \\| |_) | '__/ _ \\| '_ \\ / _` |\n | _ | __/ | | (_) | __/| | | (_) | |_) | (_| |\n |_| |_|\\___|_|_|\\___/|_|_ |_|_ \\___/| .__/ \\__,_|\n | |__ _ _ / ___| _ \\| _ \\| _ \\_|\n | '_ \\| | | | | | | | | | |_) | |_) |\n | |_) | |_| | | |___| |_| | __/| __/\n |_.__/ \\__, | \\____|____/|_| |_|\n |___/\n\nThe full source of this website is available at :\nhttps://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE"); + console.info("©2017\n _ _ _ _ ____\n | | | | ___| (_) ___ | _ \\ _ __ ___ _ __ __ _\n | |_| |/ _ \\ | |/ _ \\| |_) | '__/ _ \\| '_ \\ / _` |\n | _ | __/ | | (_) | __/| | | (_) | |_) | (_| |\n |_| |_|\\___|_|_|\\___/|_|_ |_|_ \\___/| .__/ \\__,_|\n | |__ _ _ / ___| _ \\| _ \\| _ \\_|\n | '_ \\| | | | | | | | | | |_) | |_) |\n | |_) | |_| | | |___| |_| | __/| __/\n |_.__/ \\__, | \\____|____/|_| |_|\n |___/\n\nThe full source of this website is available at :\nhttps://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE"); this.targets = {}; res$ = []; for (k in this.configuration.targets) { @@ -109,10 +109,10 @@ }); }; SpaceWeather.prototype.showLoader = function(){ - return $("#plots_loader").show(); + return $('#plots_loader').show(); }; SpaceWeather.prototype.hideLoader = function(){ - return $("#plots_loader").hide(); + return $('#plots_loader').hide(); }; SpaceWeather.prototype.loadData = function(target_slug, started_at, stopped_at){ "Load the data as CSV for the specified target and interval,\nand return it in a Promise."; diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index 07039d2..7cfa9ae 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -39,7 +39,7 @@ export class SpaceWeather INPUT_TIME_FORMAT = "YYYY-MM-DD" (@configuration) -> - console.info """ + console.info """©2017 _ _ _ _ ____ | | | | ___| (_) ___ | _ \\ _ __ ___ _ __ __ _ | |_| |/ _ \\ | |/ _ \\| |_) | '__/ _ \\| '_ \\ / _` | @@ -121,10 +121,10 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE @timeSeries.forEach((ts) -> ts.resize()) showLoader: -> - $("\#plots_loader").show(); + $('#plots_loader').show(); hideLoader: -> - $("\#plots_loader").hide(); + $('#plots_loader').hide(); loadData: (target_slug, started_at, stopped_at) -> """ diff --git a/web/view/layout.html.jinja2 b/web/view/layout.html.jinja2 index a96699e..86e2ce0 100755 --- a/web/view/layout.html.jinja2 +++ b/web/view/layout.html.jinja2 @@ -29,6 +29,8 @@ +
Heliopropa requires javascript.
+
@@ -45,8 +47,7 @@
-
- +{#
#} {# #} - - -
+{#
#}
{% block content %} -- libgit2 0.21.2