Show an error message for users without javascript.

Goutte
1 parent ceeb2f4a
Showing 5 changed files with 95 additions and 61 deletions Show diff stats
CHANGELOG.md
web/static/css/main.css
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/layout.html.jinja2
@@ -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`)
  
  
@@ -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{
@@ -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.";
@@ -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) ->
     """
@@ -29,6 +29,8 @@
  
   <body>
  
+    <div id="nojs-alert" class="nojs">Heliopropa requires javascript. </div>
+
     <div id="page-container" class="container">
  
       <header class="header mdl-layout__header">
@@ -45,8 +47,7 @@
         </div>
       </header>
  
-      <div class="">
-
+{#      <div class="">#}
 {#        <nav id="menu" role="navigation">#}
 {#          <ul>#}
 {#            <li class="home{% if menu_section == 'home' %} active{% endif %}">#}
@@ -57,9 +58,7 @@
 {#            </li>#}
 {#          </ul>#}
 {#        </nav>#}
-
-
-      </div>
+{#      </div>#}
  
       <div id="content">
 {% block content %}