Responsive UI Improvements across the board

app/less/app.less

@@ -31,6 +31,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: @fStandard;
+  letter-spacing: 0.05em;
 }
 
 div, a, li {
@@ -39,7 +40,7 @@ div, a, li {
 
 #main {
   margin: 0;
-  padding: 0.5em 0.25em;
+  padding: 0.5em 0;
   min-height: 90%;
   clear: both;
   text-align: center;
@@ -69,6 +70,11 @@ div, a, li {
   text-align: center;
 }
 
+.scroll-x {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 h1 {
   font-family: @fTitle;
   color: @primary;
@@ -79,11 +85,13 @@ h2 {
   text-transform: uppercase;
   font-family: @fStandard;
   font-size: 1.2em;
+  font-weight: normal;
 }
 
 h3 {
   text-transform: uppercase;
   font-family: @fStandard;
+  font-weight: normal;
   font-size: 1em;
   margin: 0.2em 0;
   color: @primary;

app/less/buttons.less

@@ -27,4 +27,12 @@ button {
       fill: @disabled;
     }
   }
-}
+}
+
+.button-lbl {
+  margin-left: 0.5em;
+
+  .smallTablet({
+    display: none;
+  });
+}

app/less/charts.less

@@ -4,6 +4,18 @@
   display: inline-block;
   margin: 0;
   cursor: default;
+  overflow: hidden;
+
+  width: 33%;
+  box-sizing: border-box;
+
+  .tablet({
+    width: 50%;
+  });
+
+  .smallTablet({
+    width: 100%;
+  });
 
   h3 {
     text-align: center;
@@ -41,7 +53,7 @@ svg {
   }
 
   .label {
-    font-size: 0.9em;
+    font-size: 0.75em;
     fill: @fg;
   }
 

app/less/colors.less

@@ -5,6 +5,7 @@
 
 // Foreground colors
 @fg: #CCC;
+@muted: #999;
 @primary: #FF8C0D; // Light Orange
 @secondary: #1FB0FF;  // Light blue
 @warning: #FF3B00;  // Dark Orange

app/less/comparison.less

@@ -3,6 +3,8 @@
   display: inline-block;
   text-align: left;
   border-collapse: collapse;
+  text-transform: uppercase;
+  font-size: 0.9em;
 
   td {
     border: 1px solid @primary-disabled;
@@ -13,6 +15,10 @@
       line-height: 2em;
       display: inline-block;
     }
+
+    .tablet({
+      font-size: 0.8em;
+    });
   }
 
   input {
@@ -39,10 +45,6 @@
   margin: 0;
   padding: 0;
 
-  .tablet({
-    font-size: 0.8em;
-  });
-
   .as-sortable-placeholder {
     background-color: @primary-bg;
   }
@@ -80,9 +82,7 @@
 #build-select {
   clear: both;
   margin: 1em 0 0;
-  height: 10em;
+  overflow-y:auto;
-  white-space: nowrap;
-  overflow:hidden;
 
   h1 {
     display: inline-block;
@@ -91,21 +91,25 @@
   }
 
   table {
+    box-sizing: border-box;
     display: inline-block;
-    width: 20em;
+    width: 40%;
     vertical-align: top;
 
+    .smallTablet({
+      width: 100%;
+    });
+
     thead {
       display: block;
-      text-align: center;
     }
 
     tbody {
       display: block;
-      overflow-x: hidden;
       overflow-y: auto;
       z-index: 0;
       -webkit-overflow-scrolling: touch;
+      height: 8em;
       max-height: 8em;
     }
   }
@@ -117,7 +121,10 @@
 
 #comp-tbl {
   margin: 1em auto;
+  white-space: nowrap;
+  font-size: 0.8em;
+
   .tablet({
-    font-size: 0.85em;
+    font-size: 0.7em;
   });
 }

app/less/header.less

@@ -18,7 +18,7 @@
 header {
   background-color: @bg;
   margin: 0;
-  padding: 0 1em;
+  padding: 0 0 0 1em;
   height: 3em;
   line-height: 3em;
   font-family: @fTitle;
@@ -37,6 +37,10 @@ header {
         right: 0;
       }
     }
+
+    .smallTablet({
+      position: initial;
+    });
   }
 
   .menu-header {
@@ -73,21 +77,28 @@ header {
     min-width: 100%;
     overflow-x: hidden;
     background-color: @bgBlack;
-    font-size: 0.8em;
+    font-size: 0.9em;
     overflow-y: auto;
     z-index: 0;
     -webkit-overflow-scrolling: touch;
-    max-height: 400px;
+    max-height: 500px;
+
+    .smallTablet({
+      max-height: 400px;
+      left: 0;
+      right: 0;
+      border-bottom: 1px solid @bg;
+    });
+
 
     .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 */
@@ -99,12 +110,14 @@ header {
   }
 
   ul {
+    white-space: nowrap;
     margin: 0 0 0.5em;
     padding: 0;
     line-height: 1.3em;
   }
 
   li {
+    white-space: normal;
     list-style: none;
     margin-left: 1em;
     line-height: 1.1em;
@@ -115,10 +128,6 @@ header {
     color: @warning;
     text-decoration: none;
 
-    &.name {
-      font-family: Helvetica, Arial, sans-serif;
-    }
-
     &:visited {
       color: @warning;
     }

app/less/list.less

@@ -1,65 +1,37 @@
-.list {
-  margin: 1em 0;
-  cursor: default;
-  font-size: 0.8em;
-  min-width: 25%;
-  text-align: left;
-  .user-select-none();
-  box-sizing: border-box;
 
-  .header {
+.items {
-    width: 100%;
+  margin-bottom: 10px;
-    margin-bottom: 0.4em;
+  clear: both;
-    font-family: @fStandard;
+  overflow: hidden;
-    color: @bgBlack;
-    background-color: @primary-disabled;
-    text-transform: uppercase;
-    text-align: center;
-  }
 
-  table {
+  .item {
-    width: 100%;
-    text-align: right;
-    td {
-      padding-right: 0.5em;
-    }
-  }
-
-  .items {
-    margin-bottom: 10px;
     clear: both;
+    margin: 1px 0 0;
     overflow: hidden;
 
-    .item {
+    .val {
-      clear: both;
+      float:right;
-      margin: 1px 0 0;
+      text-align: right;
-      overflow: hidden;
+    }
 
-      .val {
+    .lbl {
-        float:right;
+      float: left;
-        text-align: right;
+    }
-      }
+    color: @disabled;
+    cursor: pointer;
 
-      .lbl {
+    &.enabled {
-        float: left;
+      color: @fg;
-      }
+    }
-      color: @disabled;
-      cursor: pointer;
 
-      &.enabled {
+    &.consumer {
-        color: @fg;
+      .val:before {
-      }
+        content: "-";
-
-      &.consumer {
-        .val:before {
-          content: "-";
-        }
-      }
-
-      &.untoggleable {
-        cursor: default;
       }
     }
-  }
 
+    &.untoggleable {
+      cursor: default;
+    }
+  }
 }

app/less/modal.less

@@ -16,10 +16,20 @@
   left:50%; top:50%;
   transform:translate(-50%,-50%);
   -webkit-transform:translate(-50%,-50%);
-  max-width: 75%;
+  width: 75%;
-  padding: 3em;
+  max-width: 1000px;
+  max-height: 100%;
+  padding: 2em;
   background-color: @bgBlack;
+  box-sizing: border-box;
   border: 1px solid @primary;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+
+  .smallTablet({
+    padding: 1em;
+    width: 100%;
+  });
 
   h1 {
     margin: 0.2em 0;
@@ -29,7 +39,6 @@
     margin: 0;
   }
   p {
-    min-width: 30em;
     text-align: justify;
   }
 }
@@ -42,8 +51,8 @@ textarea {
 
   &.json {
     display:block;
-    width:50em;
+    width:100%;
-    height: 25em;
+    min-height: 10em;
     resize: vertical;
     margin:2em 0;
   }

app/less/outfit.less

@@ -1,25 +1,12 @@
 
 #outfit {
-  font-size: 1.1em;
+  max-width: 1600px;
-  max-width: 1200px;
   margin: 0 auto;
   .user-select-none();
 
   .tablet({
     width: 100%;
-    font-size: 1.2em;
-    max-width: 1600px;
   });
-
-  &>.list {
-    .tablet({
-      width: 49%;
-    });
-
-    .largePhone({
-      width: 100%;
-    });
-  }
 }
 
 #overview {
@@ -36,19 +23,18 @@
 
 #summary {
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
   width: 100%;
-  margin: 1em 0 1em 0;
+  padding: 0.5em 0.2em;
-  padding-bottom: 1em;
+
-  
   #summaryTable {
     .user-select-none();
     width: 100%;
+    white-space: nowrap;
     border-collapse: collapse;
     font-size: 0.8em;
 
-    tbody td {
-        padding: 0 0.5em;
-    }
   }
 }
 
@@ -61,6 +47,7 @@
     background: none;
     line-height: 1.5em;
     font-size: 0.8em;
+    width: 20em;
     box-sizing: border-box;
     display: inline-block;
     padding: 0.5em;
@@ -75,38 +62,51 @@
       padding: 0.25em;
     });
   }
-}
 
-
+  .largePhone({
-#hardpoints, #utility, #standard {
+    float: left;
-  padding-right: 0.3em;
-  .slot {
     clear: left;
-  }
-}
-
-#internal {
- .slot {
-    clear: left;
-  }
-}
-
-.outfit-button-label {
-  margin-left: 0.5em;
-
-  .smallTablet({
-    display: none;
   });
 }
 
-#jumpRange {
+.group {
-  width: 50%;
+  width: 25%;
-  padding: 0 0.5em;
+  padding: 0.5em 0.2em;
+  vertical-align: top;
+  box-sizing: border-box;
+  display: inline-block;
+  .user-select-none();
+  cursor: default;
+
+  h1 {
+    font-family: @fStandard;
+    color: @bgBlack;
+    background-color: @primary-disabled;
+    text-transform: uppercase;
+    margin: 0;
+    font-size: 1em;
+    line-height: 1.3em;
+    font-weight: normal;
+  }
 
   .tablet({
-    float: right;
+    font-size: 0.9em;
-    clear: both;
-    display: block;
-    width: 100% !important;
   });
-}
+
+  .smallTablet({
+    width: 50%;
+  });
+
+  .largePhone({
+    width: 100%;
+  });
+
+  &.dbl {
+    width: 50%;
+
+    .smallTablet({
+      width: 100% !important;
+    });
+  }
+
+}

app/less/responsive.less

@@ -22,12 +22,11 @@
 }
 
 .smallTablet(@rules) {
-  @media only screen and /*(min-width: 641px) and */(max-width: 820px) {
+  @media only screen and /*(min-width: 641px) and */(max-width: 1000px) {
     @rules();
   }
 }
 
-
 .tablet(@rules) {
   @media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
     @rules();

app/less/select.less

@@ -16,6 +16,7 @@
   text-align: center;
 
   .select-group {
+    line-height: 1.5em;
     text-align: left;
     margin: 0.5em 0;
     padding-left: 5px;
@@ -45,7 +46,7 @@
     }
   }
 
-  @optionSpacing: 1.8em;
+  @optionSpacing: 2em;
 
   .lc {
     line-height:@optionSpacing;
@@ -90,8 +91,8 @@
 
   &.hardpoint {
     .c {
-      width: 4em;
+      width: 4.4em;
-      padding: 0.1em 0.5em;
+      padding: 0.1em 0.2em;
     }
     ul {
       width: 17em;

app/less/slider.less

@@ -6,7 +6,7 @@
   }
 
   text {
-    font-size: 0.8em;
+    font-size: 0.7em;
     fill: @primary-disabled;
   }
 
@@ -26,6 +26,7 @@
   text {
     dominant-baseline: central;
     fill: @primary;
+    font-size: 0.8em;
   }
 
   .filled {

app/less/slot.less

@@ -1,41 +1,10 @@
 
-.slot-group {
-  width: 25%;
-  margin: 0;
-  box-sizing: border-box;
-  display: inline-block;
-  .user-select-none();
-  cursor: default;
-
-  h1 {
-    font-family: @fStandard;
-    color: @bgBlack;
-    background-color: @primary-disabled;
-    text-transform: uppercase;
-    margin: 0.1em 0;
-    font-size: 0.8em;
-    padding-left: 0.5em;
-    font-weight: normal;
-  }
-
-  .tablet({
-    width: 50%;
-    h1 {
-        margin: 1em 0 0 0;
-    }
-  });
-
-  .largePhone({
-    width: 100%;
-  });
-}
-
 .slot {
   float: left;
   text-align: left;
   width: 100%;
-  font-size: 0.75em;
+  font-size: 0.85em;
-  margin-top: 0.5em;
+  margin-top: 0.25em;
   position: relative;
   z-index: 0;
   padding-right: 0.4em;
@@ -44,10 +13,12 @@
   background-color: @primary-bg;
   border: 1px solid @primary-disabled;
   color: @fg;
-  fill: @disabled;
+  fill: @fg;
 
   .details {
     min-height: 2.5em;
+    padding: 0.25em 0;
+    box-sizing: border-box;
     overflow: hidden;
     height: 100%;
     cursor: pointer;
@@ -73,6 +44,7 @@
     color: @primary-disabled;
     border-right: 1px solid @primary-disabled;
     box-sizing: border-box;
+    padding-top: 0.2em;
   }
 
   .empty {
@@ -85,6 +57,7 @@
 
   &.selected {
     color: @primary-bg;
+    fill: @primary-bg;
     background-color: @primary;
     border: 1px solid @primary;
     z-index: 1;

app/less/table.less

@@ -13,6 +13,8 @@ table {
 thead {
   color: @bgBlack;
   background-color: @primary-disabled;
+  text-transform: uppercase;
+  line-height: 1.4em;
   .user-select-none();
 
   .main th {
@@ -52,14 +54,11 @@ tbody tr {
       fill: @warning;
       background-color: @warning-bg;
     }
+  }
 
-    svg {
+  td {
-      cursor: pointer;
+    line-height: 1.4em;
-    }
+    padding: 0 0.7em;
-
-    td {
-      padding: 0 0.7em;
-    }
   }
 
 }

app/less/utilities.less

@@ -28,4 +28,4 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-}
+}

app/views/_header.html

@@ -9,7 +9,7 @@
     <div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
       <svg class="icon warning"><use xlink:href="#rocket"></use></svg><span class="menu-item-label"> Ships</span>
 </div>
-    <div class="menu-list no-wrap" ng-if="openedMenu=='s'">
+    <div class="menu-list dbl no-wrap" ng-if="openedMenu=='s'">
       <a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a>
     </div>
   </div>
@@ -18,7 +18,7 @@
     <div class="menu-header" ng-class="{selected: openedMenu=='b', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'b')">
       <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#hammer"></use></svg><span class="menu-item-label"> Builds</span>
     </div>
-    <div class="menu-list dbl" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
+    <div class="menu-list" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
       <ul ng-repeat="shipId in buildsList">
         {{ships[shipId].properties.name}}
         <li ng-repeat="(name, build) in allBuilds[shipId]">

app/views/modal-link.html

@@ -1,7 +1,7 @@
 <h2>Permalink</h2>
 <br>
 <h3>URL</h3>
-<input ng-model="url" size="70" ng-click="onTextClick($event)">
+<input ng-model="url" size="40" ng-click="onTextClick($event)">
 <br><br>
 <h3>Shortened</h3>
 <input ng-model="shortenedUrl" size="25" ng-click="onTextClick($event)">

app/views/page-comparison.html

@@ -6,11 +6,19 @@
       <input ng-model="name" ng-change="nameChange()" placeholder="Enter Comparison Name"  maxlength="50" />
     </td>
     <td>
-      <button ng-click="save()" ng-disabled="!name || name == 'all' || saved"><svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg> Save</button>
+      <button ng-click="save()" ng-disabled="!name || name == 'all' || saved">
+        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl"> Save</span>
+      </button>
       <button ng-click="delete()" ng-disabled="name == 'all' || !saved"><svg class="icon lg warning "><use xlink:href="#bin"></use></svg></button>
-      <button ng-click="selectBuilds(true, $event)"><svg class="icon lg "><use xlink:href="#rocket"></use></svg> Builds</button>
+      <button ng-click="selectBuilds(true, $event)">
-      <button class="r" ng-click="permalink($event)" ng-disabled="builds.length == 0"><svg class="icon lg "><use xlink:href="#link"></use></svg> Permalink</button>
+        <svg class="icon lg "><use xlink:href="#rocket"></use></svg><span class="button-lbl"> Builds</span>
-      <button class="r" ng-click="embed($event)" ng-disabled="builds.length == 0"><svg class="icon lg "><use xlink:href="#embed"></use></svg> Forum</button>
+      </button>
+      <button class="r" ng-click="permalink($event)" ng-disabled="builds.length == 0">
+        <svg class="icon lg "><use xlink:href="#link"></use></svg><span class="button-lbl"> Permalink</span>
+      </button>
+      <button class="r" ng-click="embed($event)" ng-disabled="builds.length == 0">
+        <svg class="icon lg "><use xlink:href="#embed"></use></svg><span class="button-lbl"> Forum</span>
+        </button>
     </td>
   </tr>
   <tr ng-show="!compareMode">
@@ -32,9 +40,11 @@
     </tr>
 </table>
 
-<table id="comp-tbl" comparison-table ng-click="handleClick($event)"></table>
+<div class="scroll-x">
+  <table id="comp-tbl" comparison-table ng-click="handleClick($event)"></table>
+</div>
 
-<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart width="480" facet="f" data="builds">
+<div ng-repeat="f in facets | filter:{active:true}" ng-if="builds.length > 0" class="chart" bar-chart facet="f" data="builds">
   <h3 ng-click="sort(f.props[0])" >{{f.title}}</h3>
 </div>
 
@@ -52,14 +62,15 @@
       </table>
       <h1>⇆</h1>
       <table>
+        <thead><tr><th colspan="2">Added</th></tr></thead>
         <tbody>
-          <thead><tr><th colspan="2">Added</th></tr></thead>
           <tr ng-repeat="b in builds | orderBy:'name'" ng-click="removeBuild(b.id, b.buildName)">
             <td class="tl" ng-bind="b.name"></td><td class="tl" ng-bind="b.buildName"></td>
           </tr>
         </tbody>
       </table>
     </div>
+    <br>
     <button class="r dismiss" ng-click="selectBuilds(false, $event)">Done</button>
   </div>
 </div>

app/views/page-outfit.html

@@ -3,18 +3,18 @@
   <div id="overview">
     <h1 ng-bind="ship.name"></h1>
     <div id="build">
-      <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxlength="50" />
+      <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxsize="50" />
       <button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode || !canSave">
-        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="outfit-button-label">Save</span>
+        <svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl">Save</span>
       </button>
       <button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">
-        <svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="outfit-button-label">Reload</span>
+        <svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="button-lbl">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><span class="outfit-button-label">Reset</span>
+        <svg class="icon lg"><use xlink:href="#switch"></use></svg><span class="button-lbl">Reset</span>
       </button>
     </div>
   </div>
@@ -69,7 +69,7 @@
     </table>
   </div>
 
-  <div id="standard" class="slot-group">
+  <div id="standard" class="group">
     <h1>Standard</h1>
     <div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
       <div class="details">
@@ -105,8 +105,8 @@
         <div class="l">{{th.id}} Thrusters</div>
         <div class="r">{{th.c.mass}} <u>T</u></div>
         <div class="cb"></div>
-        <div class="l">Opt: {{th.c.optmass}} <u>T</u></div>
+        <div class="l">Optimal Mass: {{th.c.optmass}} <u>T</u></div>
-        <div class="l">Max: {{th.c.maxmass}} <u>T</u></div>
+        <div class="l">Max Mass: {{th.c.maxmass}} <u>T</u></div>
       </div>
       <div component-select class="select" s="th" mass="ship.unladenMass" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
     </div>
@@ -116,7 +116,7 @@
         <div class="l">{{fsd.id}} Frame Shift Drive</div>
         <div class="r cr">{{fsd.c.mass}} <u>T</u></div>
         <div class="cb"></div>
-        <div class="l">Opt: {{fsd.c.optmass}} <u>T</u></div>
+        <div class="l">Optimal Mass: {{fsd.c.optmass}} <u>T</u></div>
         <div class="l">Max Fuel: {{fsd.c.maxfuel}} <u>T</u></div>
       </div>
       <div component-select class="select" s="fsd" opts="availCS.common[2]" ng-if="selectedSlot==fsd" ng-click="select('c',fsd,$event)"></div>
@@ -149,7 +149,7 @@
         <div class="l">{{ss.id}} Sensors</div>
         <div class="r">{{ss.c.mass}} <u>T</u></div>
         <div class="cb"></div>
-        <div class="l">{{ss.c.range}} <u>KM</u></div>
+        <div class="l">Range: {{ss.c.range}} <u>KM</u></div>
       </div>
       <div component-select class="select" s="ss" opts="availCS.common[5]" ng-if="selectedSlot==ss" ng-click="select('c',ss,$event)"></div>
     </div>
@@ -163,7 +163,17 @@
     </div>
   </div>
 
-  <div id="hardpoints" class="slot-group">
+  <div id="internal" class="group">
+    <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]" fuel="ship.fuelCapacity"></div>
+      <div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
+        <div component-select s="i" groups="availCS.getInts(i.maxClass)"></div>
+      </div>
+    </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)" ng-class="{selected: selectedSlot==h}">
       <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
@@ -173,7 +183,7 @@
     </div>
   </div>
 
-  <div id="utility" class="slot-group">
+  <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)" ng-class="{selected: selectedSlot==h}">
       <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
@@ -183,20 +193,8 @@
     </div>
   </div>
 
-  <div id="internal" class="slot-group">
+  <div class="group dbl">
-    <h1>Internal Compartments</h1>
+    <h1>Power Use</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>
-      <div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
-        <div component-select s="i" groups="availCS.getInts(i.maxClass)"></div>
-      </div>
-    </div>
-  </div>
-
-  <div class="cb"></div>
-
-  <div class="list l">
-    <div class="header">Power Use</div>
     <div class="items">
       <div class="primary-disabled">Generated</div>
       <div ng-if="pp.c.pGen" class="item common enabled untoggleable">
@@ -230,8 +228,8 @@
     </table>
   </div>
 
-  <div class="list r">
+  <div class="group dbl">
-    <div class="header">Costs</div>
+    <h1>Costs</h1>
     <div class="items">
       <div class="item" ng-class="{enabled:ship.incCost}" ng-click="toggleCost(ship)">
         <div class="lbl">{{ship.name}}</div><div class="val">{{fCrd(ship.cost)}}</div>
@@ -260,10 +258,10 @@
     </table>
   </div>
 
-  <div class="list l" id="jumpRange">
+  <div class="group dbl">
-    <div class="header">Jump Range</div>
+    <h1>Jump Range</h1>
     <div class="cen">
-      <div class="chart" area-chart config="jrChart" series="jrSeries"></div>
+      <div 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>