shipyard: group compared, scrollbar on demand, borders

src/app/pages/ShipyardPage.jsx

@@ -128,6 +128,7 @@ export default class ShipyardPage extends Page {
       shipDesc: true,
       shipSummaries: ShipyardPage.cachedShipSummaries,
       compare: {},
+      groupCompared: false,
     };
   }
 
@@ -151,6 +152,14 @@ export default class ShipyardPage extends Page {
     this.setState({ compare });
   }
 
+  /**
+   * Toggle grouping of compared ships in the table
+   * @private
+   */
+  _toggleGroupCompared() {
+    this.setState({groupCompared: !this.state.groupCompared})
+  }
+
   /**
    * Update state with the specified sort predicates
    * @param  {String} shipPredicate      Sort predicate - property name
@@ -247,7 +256,7 @@ export default class ShipyardPage extends Page {
     let hide = this.context.tooltip.bind(null, null);
     let fInt = formats.int;
     let fRound = formats.round;
-    let { shipSummaries, shipPredicate, shipPredicateIndex } = this.state;
+    let { shipSummaries, shipPredicate, shipPredicateIndex, compare, groupCompared } = this.state;
     let sortShips = (predicate, index) =>
       this._sortShips.bind(this, predicate, index);
 
@@ -280,6 +289,15 @@ export default class ShipyardPage extends Page {
         valB = val;
       }
 
+      if (groupCompared) {
+        if (compare[a.id] && !compare[b.id]) {
+          return -1;
+        }
+        if (!compare[a.id] && compare[b.id]) {
+          return 1;
+        }
+      }
+
       if (valA == valB) {
         if (a.name > b.name) {
           return 1;
@@ -325,18 +343,10 @@ export default class ShipyardPage extends Page {
     }
 
     return (
-      <div className="page" style={{ fontSize: sizeRatio + 'em' }}>
+      <div className="page" style={{fontSize: sizeRatio + 'em'}}>
-        <div
+        <div className="content-wrapper">
-          style={{
+        <div className="shipyard-table-wrapper">
-            whiteSpace: 'nowrap',
+          <table style={{width: '12em', position: 'absolute', zIndex: 1}} className="shipyard-table">
-            margin: '0 auto',
-            fontSize: '0.8em',
-            position: 'relative',
-            display: 'inline-block',
-            maxWidth: '100%'
-          }}
-        >
-          <table style={{ width: '12em', position: 'absolute', zIndex: 1 }} className="shipyard-table">
             <thead>
               <tr>
                 <th className="le rgt">&nbsp;</th>
@@ -612,6 +622,10 @@ export default class ShipyardPage extends Page {
             </table>
           </div>
         </div>
+        <div className="table-tools" >
+          <label><input type="checkbox" checked={this.state.groupCompared} onClick={() => this._toggleGroupCompared()}/>Group highlighted ships</label>
+        </div>
+        </div>
       </div>
     );
   }

src/less/colors.less

@@ -28,6 +28,7 @@
 
 @alt-primary-bg-highlighted: lighten(@alt-primary-bg, @bgHighlight);
 @fg-highlighted: lighten(@fg, @fgHighlight);
+@primary-darker: darken(@primary, 30%);
 
 
 

src/less/shipyard.less

@@ -49,4 +49,44 @@ a.ship {
     font-size: 0.7em;
     float: right;
   }
-}
+}
+
+.shipyard-table-wrapper {
+  white-space: nowrap;
+  margin: 0 auto;
+  font-size: 0.8em;
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+table.shipyard-table{
+  tbody tr.comparehighlight{
+    background-color: @secondary-bg;
+    color: @fg-highlighted;
+  }
+}
+
+.shipyard-table-wrapper {
+  border-bottom: 1px solid @primary-darker;
+}
+
+.shipyard-table-wrapper div .shipyard-table td:last-child {
+  border-right: 1px solid @primary-darker;
+}
+.shipyard-table-wrapper > .shipyard-table td:first-child {
+  border-left: 1px solid @primary-darker;
+}
+
+.content-wrapper{
+  display: inline-block;
+  margin: 0 auto;
+}
+
+.table-tools{
+  text-align: left;
+  color: @primary;
+  label{
+    cursor: pointer;
+  }
+}

src/less/table.less

@@ -85,9 +85,4 @@ td {
   }
 }
 
-table.shipyard-table{
+
-  tbody tr.comparehighlight{
-    background-color: @secondary-bg;
-    color: @fg-highlighted;
-  }
-}