From 8f4c974d423309b49fd405fa6ee53f55d0f4b5a5 Mon Sep 17 00:00:00 2001
From: Kevin Dungs <kevin@dun.gs>
Date: Thu, 14 Aug 2014 23:12:07 +0200
Subject: [PATCH] Make mobile work better on smaller screens.

---
 css/mobile.css | 20 ++++++++++++--------
 mobile.html    | 27 ++++++++++++++-------------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/css/mobile.css b/css/mobile.css
index efea4a9..9c1c1cf 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -3,14 +3,6 @@
   padding: 0;
 }
 
-.tab-title {
-  display: none;
-}
-
-.active .tab-title {
-  display: block;
-}
-
 .scrollable {
   margin: 0;
   padding: 0;
@@ -20,6 +12,18 @@
   overflow: hidden;
 }
 
+#TabList {
+  background: white;
+  position: fixed;
+  left:0;
+  right: 50%;
+  z-index: 100;
+}
+
+#TabContent {
+  padding-top: 4em;
+}
+
 #Status {
   font-size: inherit;
   padding: 10px;
diff --git a/mobile.html b/mobile.html
index c55c04b..c5f93ce 100644
--- a/mobile.html
+++ b/mobile.html
@@ -36,16 +36,15 @@
     <div class="container-fluid">
       <div class="col-xs-6 scrollable">
         <!-- Nav tabs -->
-        <ul class="nav nav-tabs" role="tablist">
+        <ul id="TabList" class="nav nav-tabs" role="tablist">
           <li class="active"><a href="#research" role="tab" data-toggle="tab"><i class="fa fa-cogs"></i></a></li>
           <li><a href="#hr" role="tab" data-toggle="tab"><i class="fa fa-group"></i></a></li>
           <li><a href="#upgrades" role="tab" data-toggle="tab"><i class="fa fa-wrench"></i></a></li>
           <li><a href="#achievements" role="tab" data-toggle="tab"><i class="fa fa-trophy"></i></a></li>
-          <li><a href="#save" role="tab" data-toggle="tab"><i class="fa fa-floppy-o"></i></a></li>
           <li><a href="#about" role="tab" data-toggle="tab"><i class="fa fa-info"></i></a></li>
         </ul>
         <!-- Tab panes -->
-        <div class="tab-content">
+        <div id="TabContent" class="tab-content">
           <!-- Research -->
           <div class="tab-pane active" id="research" ng-controller="ResearchController as rc">
             <ul class="media-list" ng-cloak>
@@ -101,14 +100,16 @@
               </li>
             </ul>
           </div>
-          <!-- Save -->
-          <div class="tab-pane" id="save" ng-controller="SaveController">
-            <p class="lead">Last saved: <span ng-cloak>{{ lastSaved | date : 'H:mm:ss' }}<span></p>
-            <p><button class="btn btn-primary" ng-click="saveNow()"><i class="fa fa-floppy-o"></i> Save now!</button></p>
-            <p><button class="btn btn-danger" ng-click="restart()"><i class="fa fa-refresh"></i> Restart</button></p>
-          </div>
-        <!-- About -->
+          <!-- Save and About -->
           <div class="tab-pane" id="about">
+            <div ng-controller="SaveController">
+              <p class="small">Last saved: <span ng-cloak>{{ lastSaved | date : 'H:mm:ss' }}<span></p>
+              <div class="btn-group">
+                <button class="btn btn-primary btn-sm" ng-click="saveNow()"><i class="fa fa-floppy-o"></i> Save now!</button>
+                <button class="btn btn-danger btn-sm" ng-click="restart()"><i class="fa fa-refresh"></i> Restart</button>
+              </div>
+            </div>
+            <hr>
             <div class="btn-group pull-right">
               <div class="btn-group">
                 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-facebook"></i> <span class="caret"></span></button>
@@ -158,13 +159,13 @@
             {{ lc.lab.data | niceNumber }}
             <div class="update-value" id="update-data"></div>
           </div>
-          <div class="col-xs-4 text-center">
-            <strong>Reputation</strong>
+          <div class="col-xs-3 text-center">
+            <strong>Rep.</strong>
             <br>
             {{ lc.lab.reputation | niceNumber }}
             <div class="update-value" id="update-reputation"></div>
           </div>
-          <div class="col-xs-4">
+          <div class="col-xs-5">
             <span class="text-center"><strong>Funding</strong></span>
             <br>
             {{ lc.lab.money | currency }}