Optimize for mobile devices

karan2198 · Dec 9, 2014 · 0e1307c · 0e1307c
1 parent ac1aabe
commit 0e1307c
Show file tree

Hide file tree

Showing 9 changed files with 788 additions and 63 deletions.
diff --git a/bootstrap-config.json b/bootstrap-config.json
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/style.css b/css/style.css
@@ -1,5 +1,5 @@
 body {
-  padding-top: 50px;
+  padding-top: 40px;
 }
 
 * {
@@ -19,11 +19,6 @@ h1 br {
   background-image: url('../assets/pc32.png');
 }
 
-#detector-holder {
-  margin-left: -15px;
-  margin-right: -15px;
-}
-
 #detector {
   cursor: pointer;
   margin: 0 auto;
@@ -79,6 +74,22 @@ h1 br {
   float:right; font-weight: bold;
 }
 
+#mobile-orientation-container {
+  position: fixed; top: 0; bottom: 0; left: 0; right: 0;
+  background: #fff;
+  display: none;
+  padding-top: 50%;
+  z-index: 100;
+}
+
+#mobile-orientation-message {
+  text-align: center;
+  margin: auto auto;
+  color: #777;
+  font-size: 18px;
+  padding: 15px;
+}
+
 .status strong {
   color: #666;
 }
@@ -115,6 +126,20 @@ h1 br {
   margin-bottom: 0;
 }
 
+.col-no-padding {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.tab-content {
+  border-left:1px solid #ddd;
+}
+
+.tab-pane.scrollable {
+  padding:15px;
+}
+
+
 .prevent-select {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -150,41 +175,46 @@ h1 br {
 }
 
 /** Responsive **/
-@media (min-width: 992px) {
-  .col-no-padding {
-    padding-right: 0;
-    padding-left: 0;
+@media screen and (orientation:portrait) and (max-width: 767px) {
+  #mobile-orientation-container {
+    display: block;
   }
+}
 
-  .panel-stick,
-  .panel-stick .panel-heading,
-  .panel-stick .panel-body {
-    border-right: 0;
+@media screen and (orientation:landscape) and (max-width: 767px) {
+
+}
+
+@media screen and (min-width: 768px) {
+  #detector-holder {
+    margin-left: -15px;
+    margin-right: -15px;
   }
 
   .status {
-    font-size: 20px;
+    font-size: 18px;
   }
 }
 
-@media (min-width: 1200px) {
-  .col-no-padding {
-    padding-right: 0;
-    padding-left: 0;
-  }
-
+@media screen and (min-width: 992px) {
   .panel-stick,
   .panel-stick .panel-heading,
   .panel-stick .panel-body {
     border-right: 0;
   }
 
+  .status {
+    font-size: 20px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
   .status {
     font-size: 24px;
   }
 }
 
-@media (min-width: 992px) and (max-width: 1199px){
+@media screen and (min-width: 992px) and (max-width: 1199px){
   .col-md-3s {
     width:20%;
   }
@@ -193,3 +223,23 @@ h1 br {
     width:40%;
   }
 }
+
+@media screen and (max-width: 767px) {
+  h4 {
+    font-size: 16px;
+  }
+
+  .col-no-padding-xs {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .col-no-padding-xs .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .status .col-xs-4 {
+    min-width: 75px;
+  }
+}
diff --git a/fonts/glyphicons-halflings-regular.eot b/fonts/glyphicons-halflings-regular.eot
diff --git a/fonts/glyphicons-halflings-regular.svg b/fonts/glyphicons-halflings-regular.svg
diff --git a/fonts/glyphicons-halflings-regular.ttf b/fonts/glyphicons-halflings-regular.ttf
diff --git a/fonts/glyphicons-halflings-regular.woff b/fonts/glyphicons-halflings-regular.woff
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <meta property="og:description" content="An addictive incremental game that was made during the CERN Webfest 2014. It takes the player on a historic journey through modern particle physics.">
     <meta property="og:image" content="https://avatars2.githubusercontent.com/u/8345868">
 
-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="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">
 
@@ -99,9 +99,9 @@ <h4 class="media-heading">{{ r.state.level > 0 ? r.name : '?????' }} <span ng-sh
         </div>
       </div>
 
-      <div class="col-xs-6 col-md-5 col-md-5s col-lg-6" ng-controller="LabController as lc">
-        <input id="labname" value="{{ lc.lab.state.name }}" ng-model="lc.lab.state.name" ng-cloak>
-        <hr>
+      <div id="column-lab" class="col-xs-6 col-md-5 col-md-5s col-lg-6 col-no-padding-xs" ng-controller="LabController as lc">
+        <input class="hidden-xs" id="labname" value="{{ lc.lab.state.name }}" ng-model="lc.lab.state.name" ng-cloak>
+        <hr class="hidden-xs">
         <button class="pull-right btn btn-info" ng-click="lc.showDetectorInfo()"><i class="fa fa-exclamation"></i></button>
         <div id="detector-holder">
           <div id="detector" ng-controller="DetectorController as dc">
@@ -114,26 +114,18 @@ <h4 class="media-heading">{{ r.state.level > 0 ? r.name : '?????' }} <span ng-sh
           </div>
         </div>
         <div class="row status" ng-cloak>
-          <div class="col-sm-4 text-center">
-            <strong>Data</strong>
-          </div>
-          <div class="col-xs-4 text-center">
-            <strong>Reputation</strong>
-          </div>
-          <div class="col-xs-4 text-center">
-            <strong>Funding</strong>
-          </div>
-        </div>
-        <div class="row status" ng-cloak>
-          <div class="col-sm-4 text-center">
+          <div class="col-xs-4 text-center col-no-padding-xs">
+            <strong>Data</strong><br>
             {{ lc.lab.state.data | niceNumber }}
             <div class="update-value" id="update-data"></div>
           </div>
-          <div class="col-xs-4 text-center">
+          <div class="col-xs-4 text-center col-no-padding-xs">
+            <strong>Reputation</strong><br>
             {{ lc.lab.state.reputation | niceNumber }}
             <div class="update-value" id="update-reputation"></div>
           </div>
-          <div class="col-xs-4 text-center">
+          <div class="col-xs-4 text-center col-no-padding-xs">
+            <strong>Funding</strong><br>
             {{ lc.lab.state.money | currency }}
             <div class="update-value" id="update-funding"></div>
           </div>
@@ -188,16 +180,13 @@ <h4 class="media-heading">{{ u.name }} <i class="fa {{ u.icon }} media-object"><
         </div>
       </div>
 
-      <div class="col-xs-6 visible-xs-block visible-sm-block">
-        <!-- Nav tabs -->
+      <div id="column-tabs" class="col-xs-6 visible-xs-block visible-sm-block col-no-padding">
         <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> Research</a></li>
           <li><a href="#hr" role="tab" data-toggle="tab"><i class="fa fa-users"></i> HR</a></li>
           <li><a href="#upgrades" role="tab" data-toggle="tab"><i class="fa fa-wrench"></i> Upgrades</a></li>
         </ul>
-        <!-- Tab panes -->
         <div id="TabContent" class="tab-content">
-          <!-- Research -->
           <div class="tab-pane active scrollable" id="research">
 
           </div>
@@ -262,8 +251,14 @@ <h4 class="modal-title" id="stats-label"><i class="fa fa-bar-chart"></i> Statist
       </div>
     </div>
 
-    <div id="achievements-container" class="col-xs-3"></div>
-    <div id="messages-container" class="col-xs-3"></div>
+    <div id="achievements-container" class="col-xs-6 col-sm-3"></div>
+    <div id="messages-container" class="col-xs-6 col-sm-3"></div>
+
+    <div id="mobile-orientation-container">
+      <div id="mobile-orientation-message">
+        You can only play Particle Clicker on your mobile device in landscape orientation.
+      </div>
+    </div>
 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">

diff --git a/js/ui.js b/js/ui.js
@@ -10,38 +10,50 @@ var UI = (function () {
   $(function() {
     FastClick.attach(document.body);    
 
-    var offset = 121;
     var resize = function() {
       var h = $(window).height();
+      var offset = 111;
+      if ($(window).width() < 992) {
+        offset = 112;
+      }
       $('.scrollable').height(h - offset + 'px');
 
+      var types = ['research', 'hr', 'upgrades'];
+
       if ($(window).width() < 992) {
-        if ($('#researchContent').parent().attr('id') == 'researchLarge') {
-          $('#researchContent').detach().appendTo('#research');
-        }
-        if ($('#hrContent').parent().attr('id') == 'hrLarge') {
-          $('#hrContent').detach().appendTo('#hr');
-        }
-        if ($('#upgradesContent').parent().attr('id') == 'upgradesLarge') {
-          $('#upgradesContent').detach().appendTo('#upgrades');
+        for (var i = 0; i < types.length; i++) {
+          if ($('#' + types[i] + 'Content').parent().attr('id') == types[i] + 'Large') {
+            $('#' + types[i] + 'Content').detach().appendTo('#' + types[i]);
+          }
         }
       } else {
-        if ($('#researchContent').parent().attr('id') != 'researchLarge') {
-          $('#researchContent').detach().appendTo('#researchLarge');
-        }
-        if ($('#hrContent').parent().attr('id') != 'hrLarge') {
-          $('#hrContent').detach().appendTo('#hrLarge');
-        }
-        if ($('#upgradesContent').parent().attr('id') != 'upgradesLarge') {
-          $('#upgradesContent').detach().appendTo('#upgradesLarge');
+        for (var i = 0; i < types.length; i++) {
+          if ($('#' + types[i] + 'Content').parent().attr('id') != types[i] + 'Large') {
+            $('#' + types[i] + 'Content').detach().appendTo('#' + types[i] + 'Large');
+          }
         }
       }
 
+      if ($(window).width() < 600) {
+        var newWidth = Math.max($(window).width() - ($(window).height() - 80 + 10), 300);
+        $('#column-lab').width($(window).width() - newWidth);
+        $('#column-tabs').width(newWidth);
+      } else {
+        $('#column-lab').removeAttr('style');
+        $('#column-tabs').removeAttr('style');
+      }
+
       if ($(window).width() >= 1200) {
         if (detector.width != 500) {
           $('#detector').width(500).height(500);
           detector.init(500);
         }
+      } else if ($(window).width() < 768 && $(window).height() - 80 < 300) {
+        var newWidth = $(window).width() - Math.max($(window).width() - ($(window).height() - 80 + 10), 300) - 10;
+        if (detector.width != newWidth) {
+          $('#detector').width(newWidth).height(newWidth);
+          detector.init(newWidth);
+        }
       } else if ($(window).width() < 992) {
         if (detector.width != 300) {
           $('#detector').width(300).height(300);