Merge pull request #44 from Maverick-JM/master

Responsive CSS for Outfitting screen

app/less/app.less

@@ -1,5 +1,6 @@
 @import 'colors';
 @import 'fonts';
+@import 'responsive';
 @import 'utilities';
 @import 'icons';
 @import 'background-images';

app/less/header.less

@@ -47,26 +47,21 @@ header {
     color: @warning;
     // Less than 600px screen width: hide text
 
-
     &.disabled {
       color: @warning-disabled;
       cursor: default;
     }
 
     &.selected {
-        background-color: @bgBlack;
+      background-color: @bgBlack;
     }
 
     .menu-item-label {
-        @media screen and (min-width: 541px) {
-            margin-left: 1em;
-        }
-        @media screen and (max-width: 540px) {
-            margin-left: 0.5em;
-        }
-        @media screen and (max-width: 520px) {
-            display: none;
-        }
+      margin-left: 1em;
+
+      .medPhone({
+        display: none;
+      });
     }
   }
 
@@ -84,6 +79,15 @@ header {
     -webkit-overflow-scrolling: touch;
     max-height: 400px;
 
+    .tablet({
+      font-size: 1.1em;
+      max-height: 800px;
+
+      a {
+        padding: 0.3em 0;
+      }
+    });
+
     &.dbl {
       -webkit-column-count: 2; /* Chrome, Safari, Opera */
       -moz-column-count: 2; /* Firefox */

app/less/outfit.less

@@ -7,13 +7,26 @@
 
   .tablet({
     width: 100%;
-    min-width: 750px;
-    font-size: 0.8em;
+    font-size: 1.2em;
+    max-width: 1600px;
   });
 
+  &>.list {
+    .tablet({
+      width: 49%;
+    });
+
+    .largePhone({
+      width: 100%;
+    });
+  }
 }
 
 #overview {
+  .tablet({
+      font-size: 0.9em;
+  });
+
   h1 {
     margin: 0;
     float: left;
@@ -22,14 +35,20 @@
 }
 
 #summary {
-  .user-select-none();
+  overflow-x: auto;
   width: 100%;
-  margin: 1em 0;
-  font-size: 0.8em;
-  border-collapse: collapse;
+  margin: 1em 0 1em 0;
+  padding-bottom: 1em;
+  
+  #summaryTable {
+    .user-select-none();
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8em;
 
-  tbody td {
-    padding: 0 0.5em;
+    tbody td {
+        padding: 0 0.5em;
+    }
   }
 }
 
@@ -51,6 +70,11 @@
       color: @primary;
     }
   }
+  button {
+    .smallPhone({
+      padding: 0.25em;
+    });
+  }
 }
 
 
@@ -65,4 +89,24 @@
  .slot {
     clear: left;
   }
+}
+
+.outfit-button-label {
+  margin-left: 0.5em;
+
+  .smallTablet({
+    display: none;
+  });
+}
+
+#jumpRange {
+  width: 50%;
+  padding: 0 0.5em;
+
+  .tablet({
+    float: right;
+    clear: both;
+    display: block;
+    width: 100% !important;
+  });
 }

app/less/responsive.less

@@ -0,0 +1,35 @@
+// Screens less than 1024 wide
+// More will be added over time to support mobile devices better
+// These are designed to trickle down. So tablet styles will apply to tablet and smaller, etc
+// To overwrite, put the smallest devices at the bottom
+
+.smallPhone(@rules) {
+  @media only screen and (max-width: 350px) {
+    @rules();
+  }
+}
+
+.medPhone(@rules) {
+  @media only screen and /*(min-width: 351px) and */ (max-width: 550px) {
+    @rules();
+  }
+}
+
+.largePhone(@rules) {
+  @media only screen and /*(min-width: 551px) and */ (max-width: 640px) {
+    @rules();
+  }
+}
+
+.smallTablet(@rules) {
+  @media only screen and /*(min-width: 641px) and */(max-width: 820px) {
+    @rules();
+  }
+}
+
+
+.tablet(@rules) {
+  @media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
+    @rules();
+  }
+}

app/less/shipyard.less

@@ -16,6 +16,10 @@ a.ship {
   text-align: right;
   .user-select-none();
 
+  .smallPhone({
+    width: 16em;
+  });
+
   h2 {
     width: 100%;
     margin: 0;

app/less/slot.less

@@ -16,6 +16,18 @@
     padding-left: 0.5em;
     font-weight: normal;
   }
+
+  .tablet({
+    width: 50%;
+    
+    h1 {
+        margin: 1em 0 0 0;
+    }
+  });
+
+  .largePhone({
+    width: 100%;
+  });
 }
 
 .slot {

app/less/utilities.less

@@ -29,11 +29,3 @@
   -ms-user-select: none;
   user-select: none;
 }
-
-// Screens less than 1024 wide
-// More will be added over time to support mobile devices better
-.tablet(@rules) {
-  @media only screen and (min-width: 300px) and (max-width: 1024px) {
-    @rules();
-  }
-}

app/views/page-outfit.html

@@ -1,63 +1,70 @@
 <div id="outfit">
 
   <div id="overview">
-  <h1 ng-bind="ship.name"></h1>
+    <h1 ng-bind="ship.name"></h1>
     <div id="build">
       <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxlength="50" />
       <button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode || !canSave">
-        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg> Save
+        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="outfit-button-label">Save</span>
       </button>
       <button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">
-        <svg class="icon lg"><use xlink:href="#spinner11"></use></svg> Reload
+        <svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="outfit-button-label">Reload</span>
       </button>
       <button class="danger" ng-click="deleteBuild()" ng-disabled="!savedCode">
         <svg class="icon lg"><use xlink:href="#bin"></use></svg>
       </button>
       <button ui-sref="outfit({shipId: ship.id,code:null, bn: buildName})" ng-disabled="!code">
-        <svg class="icon lg"><use xlink:href="#switch"></use></svg> Reset
+        <svg class="icon lg"><use xlink:href="#switch"></use></svg><span class="outfit-button-label">Reset</span>
       </button>
     </div>
   </div>
 
-  <table id="summary">
-    <thead>
-      <tr class="main">
-        <th rowspan="2">Size</th>
-        <th colspan="3">Maneouverability</th>
-        <th colspan="2">Mass</th>
-        <th rowspan="2">Cargo</th>
-        <th rowspan="2">Fuel</th>
-        <th rowspan="2">Armour</th>
-        <th rowspan="2">Shields</th>
-        <th colspan="2">Power</th>
-        <th colspan="2">Jump Range</th>
-      </tr>
-      <tr>
-        <th>Agility</th><th>Speed</th><th>Boost</th>
-        <th class="lft">Unladen</th><th>Laden</th>
-        <th class="lft">Retracted</th><th>Deployed</th>
-        <th class="lft">Unladen</th><th>Laden</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td ng-bind="SZ[ship.class]"></td>
-        <td>{{ship.agility}}/10</td>
-        <td>{{fRound(ship.speed)}} <u>m/s</u></td>
-        <td>{{fRound(ship.boost)}} <u>m/s</u></td>
-        <td>{{fRound(ship.unladenMass)}} <u>T</u></td>
-        <td>{{fRound(ship.ladenMass)}} <u>T</u></td>
-        <td>{{fRound(ship.cargoCapacity)}} <u>T</u></td>
-        <td>{{fRound(ship.fuelCapacity)}} <u>T</u></td>
-        <td>{{ship.armourTotal}} <span ng-if="ship.armourAdded">({{ship.armour}} + {{ship.armourAdded}})</span></td>
-        <td>{{fRound(ship.shieldStrength)}} <u>Mj</u> <span ng-if="ship.shieldMultiplier > 1">({{fRPct(ship.shieldMultiplier)}})</span></td>
-        <td>{{fPwr(ship.powerRetracted)}} <u>MW ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</u></td>
-        <td>{{fPwr(ship.powerDeployed)}} <u>MW ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</u></td>
-        <td>{{fRound(ship.unladenJumpRange)}} <u>LY</u></td>
-        <td>{{fRound(ship.ladenJumpRange)}} <u>LY</u></td>
-      </tr>
-    </tbody>
-  </table>
+  <div id="summary">
+    <table id="summaryTable">
+      <thead>
+        <tr class="main">
+          <th rowspan="2">Size</th>
+          <th colspan="3">Maneouverability</th>
+          <th colspan="2">Mass</th>
+          <th rowspan="2">Cargo</th>
+          <th rowspan="2">Fuel</th>
+          <th rowspan="2">Armour</th>
+          <th rowspan="2">Shields</th>
+          <th colspan="2">Power</th>
+          <th colspan="2">Jump Range</th>
+        </tr>
+        <tr>
+          <th>Agility</th>
+          <th>Speed</th>
+          <th>Boost</th>
+          <th class="lft">Unladen</th>
+          <th>Laden</th>
+          <th class="lft">Retracted</th>
+          <th>Deployed</th>
+          <th class="lft">Unladen</th>
+          <th>Laden</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td ng-bind="SZ[ship.class]"></td>
+          <td>{{ship.agility}}/10</td>
+          <td>{{fRound(ship.speed)}} <u>m/s</u></td>
+          <td>{{fRound(ship.boost)}} <u>m/s</u></td>
+          <td>{{fRound(ship.unladenMass)}} <u>T</u></td>
+          <td>{{fRound(ship.ladenMass)}} <u>T</u></td>
+          <td>{{fRound(ship.cargoCapacity)}} <u>T</u></td>
+          <td>{{fRound(ship.fuelCapacity)}} <u>T</u></td>
+          <td>{{ship.armourTotal}} <span ng-if="ship.armourAdded">({{ship.armour}} + {{ship.armourAdded}})</span></td>
+          <td>{{fRound(ship.shieldStrength)}} <u>Mj</u> <span ng-if="ship.shieldMultiplier > 1">({{fRPct(ship.shieldMultiplier)}})</span></td>
+          <td>{{fPwr(ship.powerRetracted)}} <u>MW ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</u></td>
+          <td>{{fPwr(ship.powerDeployed)}} <u>MW ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</u></td>
+          <td>{{fRound(ship.unladenJumpRange)}} <u>LY</u></td>
+          <td>{{fRound(ship.ladenJumpRange)}} <u>LY</u></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 
   <div id="standard" class="slot-group l">
     <h1>Standard</h1>
@@ -68,13 +75,15 @@
         <div class="r">{{ship.bulkheads.c.mass}} <u>T</u></div>
         <div class="cl l">{{ship.bulkheads.c.name}}</div>
       </div>
-      <div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)"><ul>
-        <li class="lc" ng-class="{active: ship.bulkheads.id=='0'}" cpid="0">Lightweight Alloy</li>
-        <li class="lc" ng-class="{active: ship.bulkheads.id=='1'}" cpid="1">Reinforced Alloy</li>
-        <li class="lc" ng-class="{active: ship.bulkheads.id=='2'}" cpid="2">Military Grade Composite</li>
-        <li class="lc" ng-class="{active: ship.bulkheads.id=='3'}" cpid="3">Mirrored Surface Composite</li>
-        <li class="lc" ng-class="{active: ship.bulkheads.id=='4'}" cpid="4">Reactive Surface Composite</li>
-      </ul></div>
+      <div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)">
+        <ul>
+          <li class="lc" ng-class="{active: ship.bulkheads.id=='0'}" cpid="0">Lightweight Alloy</li>
+          <li class="lc" ng-class="{active: ship.bulkheads.id=='1'}" cpid="1">Reinforced Alloy</li>
+          <li class="lc" ng-class="{active: ship.bulkheads.id=='2'}" cpid="2">Military Grade Composite</li>
+          <li class="lc" ng-class="{active: ship.bulkheads.id=='3'}" cpid="3">Mirrored Surface Composite</li>
+          <li class="lc" ng-class="{active: ship.bulkheads.id=='4'}" cpid="4">Reactive Surface Composite</li>
+        </ul>
+      </div>
     </div>
     <div class="slot" ng-click="selectSlot($event, pp)" ng-class="{selected: selectedSlot==pp}">
       <div class="details">
@@ -171,7 +180,7 @@
     </div>
   </div>
 
-  <div id="internal" class="slot-group r">
+  <div id="internal" class="slot-group l">
     <h1>Internal Compartments</h1>
     <div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" ng-class="{selected: selectedSlot==i}">
       <div slot-internal class="details" slot="i" lbl="igMap[i.c.grp]" ft="ft"></div>
@@ -186,7 +195,7 @@
   <div class="list l">
     <div class="header">Power Use</div>
     <div class="items">
-    <div class="primary-disabled">Generated</div>
+      <div class="primary-disabled">Generated</div>
       <div ng-if="pp.c.pGen" class="item common enabled untoggleable">
         <div class="lbl">{{pp.c.class}}{{pp.c.rating}} Power Plant</div><div class="val">{{fPwr(pp.c.pGen)}}</div>
       </div>
@@ -209,23 +218,15 @@
 
     <table>
       <thead><tr><td>Retracted</td><td>Deployed</td></tr></thead>
-      <tbody><tr>
-        <td>{{fPwr(ship.powerRetracted)}} <u>MW</u> ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</td>
-        <td>{{fPwr(ship.powerDeployed)}} <u>MW</u> ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</td>
-      </tr></tbody>
+      <tbody>
+        <tr>
+          <td>{{fPwr(ship.powerRetracted)}} <u>MW</u> ({{fPct(ship.powerRetracted/ship.powerAvailable)}})</td>
+          <td>{{fPwr(ship.powerDeployed)}} <u>MW</u> ({{fPct(ship.powerDeployed/ship.powerAvailable)}})</td>
+        </tr>
+      </tbody>
     </table>
   </div>
 
-  <div class="list l" style="width: 50%;padding: 0 0.5em;">
-    <div class="header">Jump Range</div>
-    <div class="cen">
-      <div class="chart" area-chart config="jrChart" series="jrSeries"></div>
-      <div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
-        <svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
-      </div>
-    </div>
-  </div>
-
   <div class="list r">
     <div class="header">Costs</div>
     <div class="items">
@@ -247,11 +248,23 @@
     </div>
     <table>
       <thead><tr><td>Insurance</td><td>Total</td></tr></thead>
-      <tbody><tr>
-        <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
-        <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
-      </tr></tbody>
+      <tbody>
+        <tr>
+          <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
+          <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
+        </tr>
+      </tbody>
     </table>
   </div>
 
+  <div class="list l" id="jumpRange">
+    <div class="header">Jump Range</div>
+    <div class="cen">
+      <div class="chart" area-chart config="jrChart" series="jrSeries"></div>
+      <div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
+        <svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
+      </div>
+    </div>
+  </div>
+
 </div>