From bdc1e622f92d05b6dc97ff180b058767c3b4daf4 Mon Sep 17 00:00:00 2001
From: Colin McLeod <colin@roaminsight.com>
Date: Thu, 2 Jul 2015 20:42:46 -0700
Subject: [PATCH] UI Tweaks, scrolling fixes and improvements

---
 app/index.html             |  2 +-
 app/less/app.less          |  6 ++++-
 app/less/header.less       | 13 ++++++++++
 app/less/outfit.less       | 23 ++++++++++-------
 app/less/select.less       | 13 ++++++++++
 app/views/page-outfit.html | 53 +++++++++++++++++---------------------
 6 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/app/index.html b/app/index.html
index 6fd111f8..42a88412 100755
--- a/app/index.html
+++ b/app/index.html
@@ -7,7 +7,7 @@
   <!-- Standard headers -->
   <meta name="description" content="A ship outfitting and comparison tool for Elite Dangerous">
   <meta name="mobile-web-app-capable" content="yes">
-  <meta name="viewport" content="width = device-width, initial-scale = 1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
   <link rel="manifest" href="/images/logo/manifest.json">
   <link rel="icon" sizes="152x152 192x192" type="image/png" href="/images/logo/192x192.png">
   <link rel="shortcut icon" href="/images/logo/favicon.ico">
diff --git a/app/less/app.less b/app/less/app.less
index faca6634..a09e114a 100755
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -22,7 +22,9 @@
 
 html, body {
   height: 100%;
+  width: 100%;
   text-rendering: optimizeLegibility;
+  overflow-x: hidden;
 }
 
 body {
@@ -40,7 +42,9 @@ div, a, li {
 
 #main {
   margin: 0;
-  padding: 0.5em 0;
+  padding: 0.5em 0.5em;
+  width: 100%;
+  box-sizing: border-box;
   min-height: 90%;
   clear: both;
   text-align: center;
diff --git a/app/less/header.less b/app/less/header.less
index 1c026626..948d6d66 100755
--- a/app/less/header.less
+++ b/app/less/header.less
@@ -84,6 +84,19 @@ header {
     -webkit-overflow-scrolling: touch;
     max-height: 500px;
 
+    &::-webkit-scrollbar {
+      width: 0.5em;
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: @warning-disabled;
+    }
+
+
     .smallTablet({
       max-height: 400px;
       left: 0;
diff --git a/app/less/outfit.less b/app/less/outfit.less
index 15c74690..57f8d2c0 100755
--- a/app/less/outfit.less
+++ b/app/less/outfit.less
@@ -59,7 +59,7 @@
   input {
     background: none;
     line-height: 1.3em;
-    width: 20em;
+    width: 15em;
     font-size: 0.9em;
     box-sizing: border-box;
     display: inline-block;
@@ -99,6 +99,12 @@
   text-overflow: ellipsis;
 }
 
+.optional-hide {
+  .largePhone({
+    display: none;
+  });
+}
+
 table.total {
   width: 100%;
 
@@ -115,6 +121,7 @@ table.total {
 
 .tabs {
   width: 100%;
+  box-sizing: border-box;
   margin-bottom: 1px;
 
   &, th {
@@ -160,6 +167,12 @@ table.total {
 
   .smallTablet({
     width: 50%;
+
+    .axis.x {
+      g.tick:nth-child(2n + 1) text {
+        display: none;
+      }
+    }
   });
 
   .largePhone({
@@ -183,14 +196,6 @@ table.total {
   &.third {
     width: 33%;
 
-    .smallTablet({
-      .axis.x {
-        g.tick:nth-child(2n + 1) text {
-          display: none;
-        }
-      }
-    });
-
     .largePhone({
       width: 100% !important;
     });
diff --git a/app/less/select.less b/app/less/select.less
index 5c5ebb80..ff1a6e8e 100755
--- a/app/less/select.less
+++ b/app/less/select.less
@@ -39,6 +39,19 @@ select {
   white-space: nowrap;
   text-align: center;
 
+  &::-webkit-scrollbar {
+    width: 0.5em;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-left: 1px solid @primary;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: @primary-disabled;
+  }
+
   .select-group {
     line-height: 1.5em;
     text-align: left;
diff --git a/app/views/page-outfit.html b/app/views/page-outfit.html
index 9172247b..c5d30f2e 100644
--- a/app/views/page-outfit.html
+++ b/app/views/page-outfit.html
@@ -76,6 +76,26 @@
     </table>
   </div>
 
+  <div id="hardpoints" class="group">
+    <h1>HardPoints</h1>
+    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '!0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
+      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
+      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
+        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
+      </div>
+    </div>
+  </div>
+
+  <div id="utility" class="group">
+    <h1>Utility Mounts</h1>
+    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
+      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
+      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
+        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
+      </div>
+    </div>
+  </div>
+
   <div id="standard" class="group">
     <h1>Standard</h1>
     <div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
@@ -180,26 +200,6 @@
     </div>
   </div>
 
-  <div id="hardpoints" class="group">
-    <h1>HardPoints</h1>
-    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '!0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
-      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
-      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
-        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
-      </div>
-    </div>
-  </div>
-
-  <div id="utility" class="group">
-    <h1>Utility Mounts</h1>
-    <div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '0'}" ng-click="selectSlot($event, h)"  context-menu="select('h', h, $event, 'empty')"  ng-class="{selected: selectedSlot==h}">
-      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
-      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
-        <div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
-      </div>
-    </div>
-  </div>
-
   <div class="group half" id="componentPriority">
     <table style="width:100%">
       <thead>
@@ -256,10 +256,8 @@
           <tr class="main">
             <th colspan="2" class="sortable le" ng-click="sortCost(cName)">
               Component
-              <div class="r">
-                <u ng-if="discounts.ship < 1">[Ship {{fRPct(1 - discounts.ship)}} off]</u>
-                <u ng-if="discounts.components < 1">[Components {{fRPct(1 - discounts.components)}} off]</u>
-              </div>
+              <u class="optional-hide" ng-if="discounts.ship < 1">[Ship {{fRPct(1 - discounts.ship)}} off]</u>
+              <u class="optional-hide" ng-if="discounts.components < 1">[Components {{fRPct(1 - discounts.components)}} off]</u>
             </th>
             <th class="sortable le" ng-click="sortCost('discountedCost')">Credits</th>
           </tr>
@@ -285,17 +283,14 @@
     </div>
 
     <div ng-if="costTab == 'retrofit'">
-      <div style="overflow-x: auto;-webkit-overflow-scrolling: touch;">
+      <div class="scroll-x">
         <table style="width:100%">
           <thead>
             <tr class="main">
               <th colspan="2" class="sortable le" ng-click="sortRetrofit('sellName')">Sell</th>
               <th colspan="2" class="sortable le" ng-click="sortRetrofit('buyName')">Buy</th>
               <th class="sortable le" ng-click="sortRetrofit('netCost')">
-                Net Cost
-                <div class="r">
-                  <u ng-if="discounts.components < 1">[{{fRPct(1 - discounts.components)}} off]</u>
-                </div>
+                Net Cost <u class="optional-hide" ng-if="discounts.components < 1">[{{fRPct(1 - discounts.components)}} off]</u>
               </th>
             </tr>
           </thead>