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;
- }
-}
+