Adjustments for mobile devices incl. "hamburger" navigation

RaphaelBergmann · Mar 2, 2017 · 6db729d471ab383649f904911e5f700ef128eeea · 6db729d
1 parent 1346f0d
commit 6db729d471ab383649f904911e5f700ef128eeea
Showing with 33 additions and 5 deletions.

+13 −0 css/style.css

+13 −5 index.html

+7 −0 js/helpers.js
diff --git a/css/style.css b/css/style.css
@@ -80,3 +80,16 @@ dd {
 pre {
     padding: 5px;
 }
+
+@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
@@ -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
@@ -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();
+    }
+}