[tor-commits] [atlas/master] Adjustments for mobile devices incl. "hamburger" navigation

[irl at torproject.org]

commit 0999d87c743327149f5d0fbfc9740df70c61f406
Author: Raphael Bergmann <raphael at cc-ltd.net>
Date:   Thu Mar 2 13:26:18 2017 +0100

    Adjustments for mobile devices incl. "hamburger" navigation
---
 css/style.css | 13 +++++++++++++
 index.html    | 18 +++++++++++++-----
 js/helpers.js |  7 +++++++
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 0178d57..9173215 100644
--- a/css/style.css
+++ b/css/style.css
@@ -80,3 +80,16 @@ dd {
 pre {
     padding: 5px;
 }
+
+ at media screen and (max-width: 980px) {
+    .splash h1 {
+        font-size:40px;
+    }
+    .splash p {
+        line-height: 30px;
+        font-size: 24px;
+    }
+    .span6.hide {
+        display: none !important;
+    }
+}
diff --git a/index.html b/index.html
index 34a06af..57dab8c 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <title>Atlas</title>
     <meta name="description" content="">
     <meta name="author" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
     <!--[if lt IE 9]>
@@ -35,15 +36,22 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </a>
           <a class="brand" href="#"><img src="img/atlas.png" alt="Home" /></a>
-          <ul class="nav navbar-nav">
-            <li><a href="#/">Home</a></li>
-            <li><a href="#/about">About</a></li>
-            <li><a href="#/top10">Top 10 Relays</a></li>
-          </ul>
+          <div class="nav-collapse">
+            <ul class="nav navbar-nav">
+              <li><a href="#/">Home</a></li>
+              <li><a href="#/about">About</a></li>
+              <li><a href="#/top10">Top 10 Relays</a></li>
+            </ul>
             <form id="nav-search" class="navbar-search pull-right">
                 <input type="text" class="search-query" placeholder="Search">
             </form>
+          </div>
         </div>
       </div>
     </div>
diff --git a/js/helpers.js b/js/helpers.js
index 8838db8..96a6296 100644
--- a/js/helpers.js
+++ b/js/helpers.js
@@ -272,3 +272,10 @@ function checkIfDataIsUpToDate(lastModifiedHeader) {
         $('<div class="container" id="outdatedData"><div class="alert"><strong>Outdated data!</strong><p>Onionoo seems to serve outdated data :( Last update was: '+lastModified+'</p></div></div>').insertAfter("body > .navbar");
     }
 }
+
+window.onhashchange = function(){
+    // close mobile menu on hash change
+    if ($('.nav-collapse').height()>50) {
+        $('.btn-navbar').click();
+    }
+}