Move the layers below the parameters.

Goutte
1 parent 575e380a
Showing 2 changed files with 112 additions and 147 deletions Show diff stats
web/view/home.html.jinja2
web/view/layout.html.jinja2
@@ -47,6 +47,8 @@
  
 {% macro icon(name) %}<i class="fa fa-{{ name }}" aria-hidden="true"></i>{% endmacro %}
  
+{#############################################################################}
+
 <div id="plots_loader">
   <p class="loader-text">Loading Heliopropa&hellip;<br>This might take a while.</p>
   <div id="plots_loader_img1" class="img"></div>
@@ -70,7 +72,6 @@
       <input type="submit" id="apply_new_interval" value="Load new interval" title="Two years maximum. This may take a while." class="mdl-button mdl-js-button mdl-js-ripple-effect">
     </form>
  
-    <br>
     <hr class="clear">
  
     <span class="mdl-layout-title">{{ icon('eercast') }} Planets</span>
@@ -81,7 +82,6 @@
 {% endfor %}
     </section>
  
-    <br>
     <hr class="clear">
  
     <span class="mdl-layout-title">{{ icon('rocket') }} Probes &amp; Comets</span>
@@ -95,21 +95,6 @@
 {% endfor %}
     </section>
  
-    <br>
-    <hr class="clear">
-
-    <span class="mdl-layout-title">{{ icon('area-chart') }} Layers</span>
-
-    <section class="section-drawer">
-{% for layer in config.layers %}
-      <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">
-        <input type="checkbox" disabled id="option-layer-{{ layer.slug }}" class="mdl-radio__button" name="layer_slug" value="{{ layer.slug }}" {{ 'checked' if layer.slug == layer_slug }}>
-        <span class="mdl-radio__label">{{ layer.name }}</span>
-      </label>
-      <br />
-{% endfor %}
-    </section>
-
     <hr class="clear">
  
 {#    <span class="mdl-layout-title">{{ icon('database') }} Inputs</span>#}
@@ -131,11 +116,25 @@
     <span class="mdl-layout-title">{{ icon('flask') }} Parameters</span>
  
     <nav id="parameters" class="mdl-navigation">
-      {% for p in parameters %}
+{% for p in parameters %}
       <a class="mdl-navigation__link parameter{{ ' active' if p.active }}" data-ts-slug="{{ p.slug }}" href="#">{{ p.name }}</a>
-      {% endfor %}
+{% endfor %}
     </nav>
  
+    <hr class="clear">
+
+    <span class="mdl-layout-title">{{ icon('area-chart') }} Layers</span>
+
+    <section class="section-drawer">
+{% for layer in config.layers %}
+      <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">
+        <input type="checkbox" disabled id="option-layer-{{ layer.slug }}" class="mdl-radio__button" name="layer_slug" value="{{ layer.slug }}" {{ 'checked' if layer.slug == layer_slug }}>
+        <span class="mdl-radio__label">{{ layer.name }}</span>
+      </label>
+      <br />
+{% endfor %}
+    </section>
+
     <div class="mdl-layout-spacer"></div>
  
   </div>
@@ -147,21 +146,25 @@
       <div class="mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
         <section id="orbits"></section>
         <div class="plots-actions plots-buttons">
-          <button id="zoom_inner_heliosphere" class="mdl-button mdl-button--raised mdl-button--primary"
+          <button id="zoom_inner_heliosphere"
+                  class="mdl-button mdl-button--raised mdl-button--primary"
                   title="Zoom to the inner heliosphere.">
             Zoom in
           </button>
-          <button id="zoom_outer_heliosphere" class="mdl-button mdl-button--raised mdl-button--primary"
+          <button id="zoom_outer_heliosphere"
+                  class="mdl-button mdl-button--raised mdl-button--primary"
                   title="Zoom to the outer heliosphere.">
             Zoom out
           </button>
         </div>
         <div class="plots-actions plots-buttons">
-          <button id="download" class="mdl-button mdl-button--raised mdl-button--primary"
+          <button id="download"
+                  class="mdl-button mdl-button--raised mdl-button--primary"
                   title="Download the raw data for each selected target and parameters.">
             Download
           </button>
-          <button id="samp" class="samp mdl-button mdl-button--raised mdl-button--primary mdl-button--disabled"
+          <button id="samp"
+                  class="samp mdl-button mdl-button--raised mdl-button--primary mdl-button--disabled"
                   title="Send the data to a connected SAMP hub.">
             SAMP
           </button>
@@ -183,10 +186,6 @@
  
 {% block styles %}
   <style>
-    html, body {
-{#      background-color: #322e3f;#}
-{#      color: #e3e3e3;#}
-    }
     .mdl-layout__drawer > .mdl-layout-title {
       padding-left: 30px;
       line-height: 42px;
@@ -195,93 +194,6 @@
       line-height: 60px;
     }
  
-    #plots_wrapper {
-{#      position: relative;#}
-    }
-
-    #plots_loader {
-      position: fixed;
-      top: 0; left: 0; bottom: 0; right: 0;
-      height: 100%;
-      width: 100%;
-      background-color: #fff;
-      z-index: 1000;
-    }
-
-    #plots_loader .loader-text {
-      width: 200px;
-      height: 30px;
-      position: absolute;
-      top: -240px; left: -32px; bottom: 0; right: 0;
-      margin: auto;
-      text-align: center;
-      font-size: 1.0em;
-      font-style: italic;
-      color: darkgrey;
-    }
-
-    #plots_loader .img {
-      width: 100px;
-      height: 100px;
-      border-radius: 100%;
-      position: absolute;
-      border: 1px solid #6978ff;
-      animation: keyframes_rotate 1s;
-      animation-iteration-count: infinite;
-      transition: 2s;
-      border-bottom: none;
-      border-right: none;
-      animation-timing-function: linear;
-      margin-left: -70px;
-      margin-top: -70px;
-      left: 50%;
-      top: 50%;
-    }
-
-    @keyframes keyframes_rotate {
-      from {
-        transform: rotate(0deg);
-      }
-      50% {
-        transform: rotate(180deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    #plots_loader #plots_loader_img2 {
-      width: 90px;
-      height: 90px;
-      left: 50.35%;
-      top: 50.7%;
-      animation-delay: .2s;
-    }
-
-    #plots_loader #plots_loader_img3 {
-      width: 80px;
-      height: 80px;
-      left: 50.70%;
-      top: 51.4%;
-      animation-delay: .4s;
-    }
-
-    #plots_loader #plots_loader_img4 {
-      width: 70px;
-      height: 70px;
-      left: 51.05%;
-      top: 52.1%;
-      animation-delay: .6s;
-    }
-
-    #plots_loader #plots_loader_img5 {
-      width: 60px;
-      height: 60px;
-      left: 51.40%;
-      top: 52.8%;
-      animation-delay: .8s;
-    }
-
     .plots-buttons {
       text-align: center;
       margin: 3em auto;
@@ -310,9 +222,6 @@
       shape-rendering: crispEdges;
       stroke-width: 1px;
     }
-    svg text {
-{#      fill: #f4f4f4;#}
-    }
     #time_series svg .brush .selection {
       fill: #efa02c;
       fill-opacity: 0.382;
@@ -324,7 +233,7 @@
     }
     path.predictive-line {
       fill: none;
-      stroke: #4cf561;
+      stroke: #ff4081;
       stroke-width: 2px;
     }
     circle.cursor-circle {
@@ -432,58 +341,132 @@
       background-color: #c8d3e1;
     }
  
+    {# CSS Spinners #}
+
+    #plots_loader {
+      position: fixed;
+      top: 0; left: 0; bottom: 0; right: 0;
+      height: 100%;
+      width: 100%;
+      background-color: #fff;
+      z-index: 1000;
+    }
+
+    #plots_loader .loader-text {
+      width: 200px;
+      height: 30px;
+      position: absolute;
+      top: -240px; left: -32px; bottom: 0; right: 0;
+      margin: auto;
+      text-align: center;
+      font-size: 1.0em;
+      font-style: italic;
+      color: darkgrey;
+    }
+
+    #plots_loader .img {
+      width: 100px;
+      height: 100px;
+      border-radius: 100%;
+      position: absolute;
+      border: 1px solid #6978ff;
+      animation: keyframes_rotate 1s;
+      animation-iteration-count: infinite;
+      transition: 2s;
+      border-bottom: none;
+      border-right: none;
+      animation-timing-function: linear;
+      margin-left: -70px;
+      margin-top: -70px;
+      left: 50%;
+      top: 50%;
+    }
+
+    #plots_loader #plots_loader_img2 {
+      width: 90px;
+      height: 90px;
+      left: 50.35%;
+      top: 50.7%;
+      animation-delay: .2s;
+    }
+
+    #plots_loader #plots_loader_img3 {
+      width: 80px;
+      height: 80px;
+      left: 50.70%;
+      top: 51.4%;
+      animation-delay: .4s;
+    }
+
+    #plots_loader #plots_loader_img4 {
+      width: 70px;
+      height: 70px;
+      left: 51.05%;
+      top: 52.1%;
+      animation-delay: .6s;
+    }
+
+    #plots_loader #plots_loader_img5 {
+      width: 60px;
+      height: 60px;
+      left: 51.40%;
+      top: 52.8%;
+      animation-delay: .8s;
+    }
+
+    @keyframes keyframes_rotate {
+      from {
+        transform: rotate(0deg);
+      }
+      50% {
+        transform: rotate(180deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
     .small-loader-container {
       width: 27px;
       margin: 0 auto;
       background: none;
       pointer-events: none;
     }
-
     .small-loader-circle-1 {
       height: 27px;
       width: 27px;
       background: rgba(255, 238, 195, 0.72);
     }
-
     .small-loader-circle-2 {
       height: 22px;
       width: 22px;
       background: none;
-    {#	background: rgba(56, 53, 194, 0.5);#}
     }
-
     .small-loader-circle-3 {
       height: 18px;
       width: 18px;
       background: rgba(29, 65, 255, 0.9);
     }
-
     .small-loader-circle-4 {
       height: 13px;
       width: 13px;
       background: none;
-    {#	background: rgba(98, 109, 237, 0.5);#}
     }
-
     .small-loader-circle-5 {
       height: 9px;
       width: 9px;
       background: rgba(238, 238, 238, 0.8);
     }
-
     .small-loader-circle-6 {
       height: 4px;
       width: 4px;
       background: none;
-    {#	background: rgba(0, 0, 0, 0);#}
     }
-
     .small-loader-circle-7 {
       height: 2px;
       width: 2px;
       background: rgb(110, 102, 255);
     }
-
     .small-loader-circle-1,
     .small-loader-circle-2,
     .small-loader-circle-3,
@@ -524,8 +507,6 @@
         -moz-animation-timing-function: linear;
     }
  
-
-
     @keyframes small-loader-spin {
       from {
         transform: rotate(0deg);
@@ -22,9 +22,6 @@
     <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
 {% block styles %}{% endblock %}
  
-{#    <script type="text/javascript">#}
-{#      // Good javascript is no javascript -- hurray! \o/#}
-{#    </script>#}
 {% block scripts_header %}{% endblock %}
   </head>
  
@@ -49,19 +46,6 @@
         </div>
       </header>
  
-{#      <div class="">#}
-{#        <nav id="menu" role="navigation">#}
-{#          <ul>#}
-{#            <li class="home{% if menu_section == 'home' %} active{% endif %}">#}
-{#              <a href="index.html"></a>#}
-{#            </li>#}
-{#            <li{% if menu_section == 'authors' %} class="active"{% endif %}>#}
-{#              <a href="authors.html">Authors</a>#}
-{#            </li>#}
-{#          </ul>#}
-{#        </nav>#}
-{#      </div>#}
-
       <div id="content" class="">
 {% block content %}
         <p>Please override the "content" block in the page template.</p>