More responsive outfitting screen (still work to do though).

app/less/outfit.less

@@ -7,8 +7,8 @@
 
   .tablet({
     width: 100%;
-    min-width: 750px;
-    font-size: 0.8em;
+    //min-width: 750px;
+    //font-size: 0.8em;
   });
 
 }
@@ -22,14 +22,15 @@
 }
 
 #summary {
+    overflow-x: auto;
+    width: 100%;
+    margin: 1em 0 2em 0;
+
+    #summaryTable {
         .user-select-none();
         width: 100%;
-  margin: 1em 0;
-  font-size: 0.8em;
         border-collapse: collapse;
-
-  tbody td {
-    padding: 0 0.5em;
+        font-size: 0.8em;
     }
 }
 
@@ -66,3 +67,11 @@
     clear: left;
   }
 }
+
+.outfit-button-label {
+    margin-left: 0.5em;
+
+    @media screen and (max-width: 640px) {
+        display: none;
+    }
+}

app/less/slot.less

@@ -16,6 +16,18 @@
     padding-left: 0.5em;
     font-weight: normal;
   }
+
+  @media screen and (max-width: 1000px) {
+    width: 50%;
+    
+    h1 {
+        margin: 1em 0 0 0;
+    }
+  }
+
+  @media screen and (max-width: 610px) {
+    width: 100%;
+  }
 }
 
 .slot {

app/views/page-outfit.html

@@ -5,21 +5,22 @@
         <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">
+    <div id="summary">
+        <table id="summaryTable">
             <thead>
                 <tr class="main">
                     <th rowspan="2">Size</th>
@@ -33,10 +34,15 @@
                     <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>
+                    <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>
@@ -58,6 +64,7 @@
                 </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>
+            <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>
+                </ul>
+            </div>
         </div>
         <div class="slot" ng-click="selectSlot($event, pp)" ng-class="{selected: selectedSlot==pp}">
             <div class="details">
@@ -209,10 +218,12 @@
 
         <table>
             <thead><tr><td>Retracted</td><td>Deployed</td></tr></thead>
-      <tbody><tr>
+            <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>
+                </tr>
+            </tbody>
         </table>
     </div>
 
@@ -247,10 +258,12 @@
         </div>
         <table>
             <thead><tr><td>Insurance</td><td>Total</td></tr></thead>
-      <tbody><tr>
+            <tbody>
+                <tr>
                     <td>{{fCrd(ship.totalCost * insurance.current.pct)}} <u>CR</u></td>
                     <td>{{fCrd(ship.totalCost)}} <u>CR</u></td>
-      </tr></tbody>
+                </tr>
+            </tbody>
         </table>
     </div>