ensure menu browsable on small screens + styling, adresses most needs…

… of #28?
boogheta · Apr 12, 2020 · 6091795 · 6091795
1 parent 71c235a
commit 6091795
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/css/style.css b/css/style.css
@@ -5,8 +5,8 @@ html {
   opacity: 0;
 }
 aside.navigation-drawer {
-  height: 100%;
-  overflow: unset;
+  padding: 0;
+  overflow-y: visible;
 }
 .navigation-drawer--permanent.navigation-drawer--clipped {
   max-height: calc(100vh);
@@ -19,7 +19,7 @@ nav .toolbar__title img {
 nav v-title {
   margin: 5px 0px 0px 15px;
   float: left;
-  line-height: 1;
+  line-height: 0.75;
 }
 nav .source {
   font-size: 12px;
@@ -337,10 +337,10 @@ a:hover, a:visited:hover {
     width: 60px;
   }
   nav v-title {
-    font-size: 30px;
+    font-size: 24px;
   }
   nav .source {
-    font-size: 20px;
+    font-size: 16px;
   }
   nav .source .update, .disclaimer {
     display: none;

diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
  <body>
   <noscript><strong>Coronavirus country comparator requires JavaScript. Please enable it to continue.</strong></noscript>
   <div id="corona"><v-app dark toolbar>
-    <aside class="navigation-drawer navigation-drawer--absolute navigation-drawer--clipped navigation-drawer--is-booted navigation-drawer--is-mobile navigation-drawer--open navigation-drawer--permanent">
+    <aside class="navigation-drawer navigation-drawer--absolute navigation-drawer--clipped navigation-drawer--is-booted navigation-drawer--is-mobile navigation-drawer--open navigation-drawer--permanent" id="menu">
       <v-list dense id="controls">
 
         <v-subheader class="">
@@ -243,8 +243,11 @@
     <v-toolbar class="dark" fixed>
       <v-toolbar-title>
         <a href="https://boogheta.github.io/coronavirus-countries/"><img src="img/covid19.png" alt="COVID19" width=50 /></a>
-        <v-title>Coronavirus Country Comparator<br/>
-        <span class="source">Data source: <a :href="source.url" target=_blank">{{ source.name }}</a><span class="update"> (last update: {{ lastUpdateStr }} GMT)</span></span></v-title>
+        <v-title>
+          Coronavirus Country Comparator<br/>
+          <span class="source">Data source: <a :href="source.url" target=_blank">{{ source.name }}</a></span><br/>
+          <span class="source update"> (last update: {{ lastUpdateStr }} GMT)</span>
+        </v-title>
       </v-toolbar-title>
       <span class="disclaimer" v-if="source.disclaimer" v-html="source.disclaimer"></span>
       <v-spacer></v-spacer>

diff --git a/js/corona.js b/js/corona.js
@@ -214,11 +214,11 @@ new Vue({
       this.hiddenLeft = 0;
       this.hiddenRight = 0;
       this.refCountry = null;
-      this.$nextTick(this.resizeMenu);
       if (this.vizChoice === 'stacked') {
         if (this.logarithmic) this.scaleChoice = "linear";
         this.perCapita = false;
       }
+      this.$nextTick(this.resizeMenu);
     }
   },
   mounted: function() {
@@ -231,14 +231,15 @@ new Vue({
       this.resizing = setTimeout(this.resize, 50);
     },
     resizeMenu: function() {
-      var menuH = window.innerHeight - (
-        document.querySelector("nav").getBoundingClientRect().height +
+      var menuH = window.innerHeight - 
+        document.querySelector("nav").getBoundingClientRect().height,
+        countriesH = menuH - (
         document.getElementById("controls").getBoundingClientRect().height +
         document.getElementById("lowermenu").getBoundingClientRect().height + 2);
-      document.getElementById("countries").style.height = menuH + "px";
+      document.getElementById("menu").style.height = menuH + "px";
+      document.getElementById("countries").style.height = Math.max(180, countriesH) + "px";
     },
     resize: function() {
-      this.resizeMenu();
       this.draw();
       this.resizing = null;
     },
@@ -261,7 +262,6 @@ new Vue({
       this.scope = options.scope || "World";
       this.lastUpdateStr = d3.formatTimestamp(this.scopes[this.scope].lastUpdate);
       this.updateDisabledCases();
-      this.$nextTick(this.resizeMenu);
       if (this.init) {
         if (!options.countries.length)
           options.countries = this.scopes[this.scope].countries.filter(function(c) {
@@ -532,6 +532,7 @@ new Vue({
       if (this.vizChoice === 'multiples') this.drawMultiples();
       else this.drawSeries();
 
+      this.resizeMenu();
       this.clearTooltip();
     },
     drawMultiples: function() {