feat(template): add mdl w/o tabs

chime-experiment · Sep 25, 2020 · d5365f5 · d5365f5
1 parent 28cad5e
commit d5365f5
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 30 deletions.
diff --git a/bondia/templates/mdl.html b/bondia/templates/mdl.html
@@ -1,4 +1,4 @@
-<!-- Simple header with fixed tabs. -->
+<!-- Always shows a header, even in smaller screens. -->
 {% extends base %}
 
 <!-- goes in head -->
@@ -12,25 +12,25 @@
 {% endblock %}
 
 {% block contents %}
-<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
-            mdl-layout--fixed-tabs">
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header">
     <div class="mdl-layout__header-row">
+      <!-- Title -->
       <span class="mdl-layout-title">{{ subtitle }}</span>
-    </div>
-
-    <!-- Tabs -->
-    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
-      <a href="#delayspectrum" class="mdl-layout__tab is-active">Delay Spectrum</a>
-      <a href="#ringmap" class="mdl-layout__tab">Ringmap</a>
-      <a href="#sensitivity" class="mdl-layout__tab">Sensitivity</a>
+      <!-- Add spacer, to align navigation to the right -->
+      <div class="mdl-layout-spacer"></div>
+      <!-- Navigation. We hide it in small screens. -->
+      <nav class="mdl-navigation mdl-layout--large-screen-only">
+        <a class="mdl-navigation__link" href="/logout">Logout</a>
+      </nav>
     </div>
   </header>
   <div class="mdl-layout__drawer">
     <span class="mdl-layout-title"><a href="https://github.com/chime-experiment/bondia" target="_blank">
             <i class="fab fa-github"></i></a>  {{ app_title }}</span>
+    <nav class="mdl-navigation">
       <div align="center"><p>User: <i>{{ username }}</i></p></div>
-        <hr>
+      <hr>
         <div align="center"><h4>Select Data</h4></div>
         {{ embed(roots.rev_selector) }}
         {{ embed(roots.day_selector) }}
@@ -49,26 +49,21 @@
         <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
             I don't know
         </button>
+    </nav>
   </div>
   <main class="mdl-layout__content">
-    <section class="mdl-layout__tab-panel is-active" id="delayspectrum">
-      <div class="page-content">
-          {{ embed(roots.data_description) }}
-          {{ embed(roots.plot_delay_spectrum) }}
-      </div>
-    </section>
-    <section class="mdl-layout__tab-panel" id="ringmap">
-      <div class="page-content">
-          {{ embed(roots.data_description1) }}
-          {{ embed(roots.plot_ringmap) }}
-      </div>
-    </section>
-    <section class="mdl-layout__tab-panel" id="sensitivity">
-      <div class="page-content">
-          {{ embed(roots.data_description2) }}
-          <p>Nothing here yet...</p>
-      </div>
-    </section>
+    <div class="page-content">
+      {{ embed(roots.data_description) }}
+      <h4>{{ title_delay_spectrum }}</h4>
+      {{ embed(roots.plot_delay_spectrum) }}
+      <h4>{{ title_ringmap }}</h4>
+      {{ embed(roots.plot_ringmap) }}
+    </div>
+
+    <!-- List unused components here -->
+    <div style="display: none;">
+    {{ embed(roots.data_description1) }}{{ embed(roots.data_description2) }}
+    </div>
   </main>
 </div>
 {% endblock %}
diff --git a/bondia/templates/mdl_tabs.html b/bondia/templates/mdl_tabs.html
@@ -0,0 +1,74 @@
+<!-- Simple header with fixed tabs. -->
+{% extends base %}
+
+<!-- goes in head -->
+{% block postamble %}
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-deep_orange.min.css" />
+<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+<link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block contents %}
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header
+            mdl-layout--fixed-tabs">
+  <header class="mdl-layout__header">
+    <div class="mdl-layout__header-row">
+      <span class="mdl-layout-title">{{ subtitle }}</span>
+    </div>
+
+    <!-- Tabs -->
+    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
+      <a href="#delayspectrum" class="mdl-layout__tab is-active">Delay Spectrum</a>
+      <a href="#ringmap" class="mdl-layout__tab">Ringmap</a>
+      <a href="#sensitivity" class="mdl-layout__tab">Sensitivity</a>
+    </div>
+  </header>
+  <div class="mdl-layout__drawer">
+    <span class="mdl-layout-title"><a href="https://github.com/chime-experiment/bondia" target="_blank">
+            <i class="fab fa-github"></i></a>  {{ app_title }}</span>
+      <div align="center"><p>User: <i>{{ username }}</i></p></div>
+        <hr>
+        <div align="center"><h4>Select Data</h4></div>
+        {{ embed(roots.rev_selector) }}
+        {{ embed(roots.day_selector) }}
+        <hr>
+        <div align="center"><h4>Select Plots</h4></div>
+        <div>{{ embed(roots.toggle_delay_spectrum) }}</div>
+        <div>{{ embed(roots.toggle_ringmap) }}</div>
+        <hr>
+        <div align="center"><h4>Decision</h4></div>
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+            Mark day as good
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+            Mark day as bad
+        </button>
+        <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+            I don't know
+        </button>
+  </div>
+  <main class="mdl-layout__content">
+    <section class="mdl-layout__tab-panel is-active" id="delayspectrum">
+      <div class="page-content">
+          {{ embed(roots.data_description) }}
+          {{ embed(roots.plot_delay_spectrum) }}
+      </div>
+    </section>
+    <section class="mdl-layout__tab-panel" id="ringmap">
+      <div class="page-content">
+          {{ embed(roots.data_description1) }}
+          {{ embed(roots.plot_ringmap) }}
+      </div>
+    </section>
+    <section class="mdl-layout__tab-panel" id="sensitivity">
+      <div class="page-content">
+          {{ embed(roots.data_description2) }}
+          <p>Nothing here yet...</p>
+      </div>
+    </section>
+  </main>
+</div>
+{% endblock %}
diff --git a/setup.py b/setup.py
@@ -27,7 +27,7 @@
     url="http://github.com/chime-experiment/bondia",
     install_requires=requires,
     package_data={
-        "bondia.templates": ["material.html", "mwc.html", "mdl.html"],
+        "bondia.templates": ["material.html", "mwc.html", "mdl.html", "mdl_tabs.html"],
         "bondia": ["login.html"],
     },
 )