commit 0999d87c743327149f5d0fbfc9740df70c61f406 Author: Raphael Bergmann raphael@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; } + +@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(); + } +}