diff --git a/src/app/pages/ShipyardPage.jsx b/src/app/pages/ShipyardPage.jsx index a6b42894..d4bcc16d 100644 --- a/src/app/pages/ShipyardPage.jsx +++ b/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 ( -
-
- +
+
+
+
@@ -612,6 +622,10 @@ export default class ShipyardPage extends Page {
 
+
+ +
+ ); } diff --git a/src/less/colors.less b/src/less/colors.less index 81bb5d7d..c7f4f59e 100755 --- a/src/less/colors.less +++ b/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%); diff --git a/src/less/shipyard.less b/src/less/shipyard.less index 150e87b8..6aa412c0 100755 --- a/src/less/shipyard.less +++ b/src/less/shipyard.less @@ -49,4 +49,44 @@ a.ship { font-size: 0.7em; float: right; } -} \ No newline at end of file +} + +.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; + } +} diff --git a/src/less/table.less b/src/less/table.less index dbc2422d..28172220 100755 --- a/src/less/table.less +++ b/src/less/table.less @@ -85,9 +85,4 @@ td { } } -table.shipyard-table{ - tbody tr.comparehighlight{ - background-color: @secondary-bg; - color: @fg-highlighted; - } -} +