From 65bfc3522fc127e8db7c817e92c8c852364a51f1 Mon Sep 17 00:00:00 2001
From: Kevin Dungs <kevin@dun.gs>
Date: Sun, 9 Nov 2014 17:51:50 +0100
Subject: [PATCH] Small UI changes.

---
 index.html | 60 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 36 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index 75d55f9..00969f8 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,11 @@
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="css/style.css">
+    
     <link rel="icon" type="image/png" href="assets/favicon.png" />
+    <link rel="apple-touch-icon" href="assets/mobile/icon.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="assets/mobile/icon.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
     <!-- Google Analytics -->
     <script>
@@ -53,32 +57,40 @@
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container-fluid">
         <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
           <a class="navbar-brand pc-icon" href="#" data-toggle="modal" data-target="#myModal"> Particle Clicker</a>
         </div>
-        <ul class="nav navbar-nav navbar-left">
-          <li><a href="#" data-toggle="modal" data-target="#achievements-modal"><i class="fa fa-trophy"></i> Achievements</a></li>
-          <li><a href="#" data-toggle="modal" data-target="#stats-modal"><i class="fa fa-bar-chart"></i> Statistics</a></li>
-          <li class="dropdown" ng-controller="SaveController">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-floppy-o"></i> Saved: <span ng-cloak>{{ lastSaved | date : 'H:mm' }}</span> <span class="caret"></span></a>
-            <ul class="dropdown-menu" role="menu">
-              <li><a href="#" ng-click="saveNow()"><i class="fa fa-save"></i> Save now</a></li>
-              <li class="divider"></li>              
-              <li><a href="#" ng-click="restart()"><i class="fa fa-refresh"></i> Restart</a></li>
-            </ul>
-          </li>
-          <li><a href="#" data-toggle="modal" data-target="#myModal">About</a></li>
-        </ul>
-        <ul class="nav navbar-nav navbar-right">
-          <li><a href="https://github.com/particle-clicker/particle-clicker/" target="_blank"><i class="fa fa-github"></i> GitHub</a></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Share <span class="caret"></span></a>
-            <ul class="dropdown-menu" role="menu">
-              <li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcern.ch%2Fparticle-clicker&t=Particle%20Clicker" target="_blank" title="Share on Facebook"><i class="fa fa-facebook"></i> Facebook</a></li>
-              <li><a href="https://twitter.com/share?url=http%3A%2F%2Fcern.ch%2Fparticle-clicker&t=Particle%20Clicker&text=Particle%20Clicker%3A%20An%20addictive%20incremental%20game%20that%20was%20made%20during%20the%20CERN%20Webfest%202014.%20%23particleclicker" target="_blank" title="Share on Twitter"><i class="fa fa-twitter"></i> Twitter</a></li>
-              <li><a href="https://plus.google.com/share?url=http%3A%2F%2Fcern.ch%2Fparticle-clicker" target="_blank" title="Share on Google+"><i class="fa fa-google-plus"></i> Google+</a></li>
-            </ul>
-          </li>
-        </ul>
+        <div class="collapse navbar-collapse" id="navbar-collapse">
+          <ul class="nav navbar-nav navbar-left">
+            <li><a href="#" data-toggle="modal" data-target="#achievements-modal"><i class="fa fa-trophy"></i> Achievements</a></li>
+            <li><a href="#" data-toggle="modal" data-target="#stats-modal"><i class="fa fa-bar-chart"></i> Statistics</a></li>
+            <li class="dropdown" ng-controller="SaveController">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-floppy-o"></i> Saved: <span ng-cloak>{{ lastSaved | date : 'H:mm' }}</span> <span class="caret"></span></a>
+              <ul class="dropdown-menu" role="menu">
+                <li><a href="#" ng-click="saveNow()"><i class="fa fa-save"></i> Save now</a></li>
+                <li class="divider"></li>
+                <li><a href="#" ng-click="restart()"><i class="fa fa-refresh"></i> Restart</a></li>
+              </ul>
+            </li>
+            <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-users"></i> About</a></li>
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="https://github.com/particle-clicker/particle-clicker/" target="_blank"><i class="fa fa-github"></i> GitHub</a></li>
+            <li class="dropdown">
+              <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-share-alt"></i> Social<span class="caret"></span></a>
+              <ul class="dropdown-menu" role="menu">
+                <li><a href="https://facebook.com/particleclicker"><i class="fa fa-facebook-square"></i> Facebook</a></li>
+                <li><a href="https://twitter.com/particleclicker"><i class="fa fa-twitter"></i> Twitter</a></li>
+                <li><a href="https://plus.google.com/share?url=http%3A%2F%2Fcern.ch%2Fparticle-clicker" target="_blank" title="Share on Google+"><i class="fa fa-google-plus-square"></i> Google+</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </nav>