UI Tweaks, scrolling fixes and improvements

2025-12-08 14:33:22 +00:00 · 2015-07-02 20:42:46 -07:00
parent ad8130ae9b
commit bdc1e622f9
6 changed files with 70 additions and 40 deletions
--- 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">
--- 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;
--- 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;
--- 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;
    });
--- 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;
--- 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>