Adding comparison charts, fixes and tweaks

app/less/app.less

@@ -8,16 +8,19 @@
 @import 'list';
 @import 'slot';
 @import 'outfit';
+@import 'comparison';
 @import 'table';
 @import 'select';
 @import 'modal';
 @import 'charts';
+@import 'chart-tooltip';
 @import 'buttons';
 @import 'error';
 
 
 html, body {
   min-height: 100%;
+  text-rendering: optimizeLegibility;
 }
 
 body {
@@ -64,11 +67,21 @@ body {
 h1 {
   font-family: @fTitle;
   color: @primary;
+  font-size: 1.6em;
 }
 
 h2 {
   text-transform: uppercase;
   font-family: @fTitle;
+  font-size: 1.2em;
+}
+
+h3 {
+  text-transform: uppercase;
+  font-family: @fTitle;
+  font-size: 1em;
+  margin: 0.2em 0;
+  color: @primary;
 }
 
 u { // Unit (Mj, Km, etc)

app/less/buttons.less

@@ -1,7 +1,9 @@
 button {
   .border-radius(0);
   color: @primary;
-  fill: @primary;
+  svg {
+    fill: @primary;
+  }
   border: 1px solid @primary;
   font-family: @fStandard;
   border: 1px solid;
@@ -12,14 +14,18 @@ button {
 
   &.danger {
     color: red;
-    fill: red;
+    svg {
+      fill: red;
+    }
     border: 1px solid red;
   }
 
   &:disabled {
     cursor: not-allowed;
     color: @disabled;
-    fill: @disabled;
+    svg {
+      fill: @disabled;
+    }
     border: 1px solid @disabled;
   }
 }

app/less/chart-tooltip.less

@@ -0,0 +1,63 @@
+.d3-tip {
+  font-size: 0.8em;
+  padding: 0.25em 0.5em;
+  background: @primary-disabled;
+
+  color: @primary-bg;
+  pointer-events: none;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: @primary-disabled;
+  position: absolute;
+  pointer-events: none;
+}
+
+/* Northward tooltips */
+.d3-tip.n {
+  margin-top: -7px;
+  &:after {
+    content: "\25BC";
+    margin: -1px 0 0 0;
+    top: 100%;
+    left: 0;
+    text-align: center;
+  }
+}
+
+/* Eastward tooltips */
+.d3-tip.e {
+  margin-left: 8px;
+  &:after {
+    content: "\25C0";
+    margin: -4px 0 0 0;
+    top: 50%;
+    left: -8px;
+  }
+}
+
+/* Southward tooltips */
+.d3-tip.s {
+  margin-top: 8px;
+  &:after {
+    content: "\25B2";
+    margin: 0 0 1px 0;
+    top: -7px;
+    left: 0;
+    text-align: center;
+  }
+}
+
+/* Westward tooltips */
+.d3-tip.w:after {
+  content: "\25B6";
+  margin: -4px 0 0 -1px;
+  top: 50%;
+  left: 100%;
+}

app/less/charts.less

@@ -1,8 +1,40 @@
 
-svg.chart {
+.chart {
   .user-select-none();
-  display: block;
-  width:100%;
-  height:100%;
+  display: inline-block;
+  margin: 1em;
+  //width:100%;
+  //height:100%;
+  cursor: default;
+
+  h3 {
+    text-align: center;
+
+    &[ng-click] {
+      cursor: pointer;
+    }
+  }
+
+  svg {
+    .axis {
+
+      line, path {
+        fill: none;
+        stroke: @primary-disabled;
+      }
+
+      text {
+        font-size: 0.75em;
+        fill: @primary-disabled;
+      }
+
+      &.y {
+        text tspan:first-child {
+          fill: @primary;
+        }
+      }
+
+    }
+  }
 }
 

app/less/colors.less

@@ -16,7 +16,7 @@
 // Background colors
 @bg: rgba(70,70,70,0.95);
 @bgBlack: rgba(0,0,0,0.9);
-@primary-bg: fadeout(darken(@primary, 45%), 20%);
+@primary-bg: fadeout(darken(@primary, 47%), 15%);
 @secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
 @warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
 

app/less/comparison.less

@@ -0,0 +1,4 @@
+
+#comparison {
+  text-align: center;
+}

app/less/header.less

@@ -28,6 +28,8 @@ header {
     padding : 0 1em;
     cursor: pointer;
     color: @warning;
+    // Less than 600px screen width: hide text
+
 
     &.disabled {
       color: @warning-disabled;

app/less/select.less

@@ -6,7 +6,7 @@
   width: 100%;
   margin: 0;
   max-height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
   background-color: @bg;
   border: 1px solid @primary;
   white-space: nowrap;
@@ -78,7 +78,7 @@
 
   ul {
     margin: 0;
-    margin-left: 20px;
+    margin-left: 1.5em;
     padding: 0;
     list-style: none;
     overflow: hidden;
@@ -90,7 +90,7 @@
       padding: 0.1em 0.5em;
     }
     ul {
-      margin-left: 1em;
+      margin-left: 0.5em;
     }
   }
 

app/less/shipyard.less

@@ -1,14 +1,15 @@
 
 #shipyard {
   vertical-align: top;
+  text-align: center;
 }
 
 a.ship {
   display: inline-block;
-  width: 22%;
-  margin: 1%;
+  width: 18em;
+  margin: 0.5em;
   background-color: @bg;
-  padding: 0.5%;
+  padding: 0.5em;
   text-decoration: none;
   color: @fg;
   font-family: @fStandard;
@@ -30,6 +31,7 @@ a.ship {
     font-family: @fTitle;
     float: left;
     font-size: 0.8em;
+    margin-right: 2em;
   }
 
   .subtitle {

app/less/table.less

@@ -3,7 +3,7 @@ table {
   margin: 0 auto;
   background-color: @primary-bg;
   border-spacing: 0;
-  font-size: 0.8em;
+  font-size: 0.9em;
   cursor: default;
 
   a, a:visited {
@@ -16,6 +16,7 @@ thead {
   color: @bgBlack;
   background-color: @primary-disabled;
   .user-select-none();
+  font-size: 0.8em;
 
   .main th {
     border-left: 1px solid @primary-bg;
@@ -26,10 +27,10 @@ thead {
   }
 
   th {
-    
+    font-weight: normal;
     padding: 0 0.75em;
 
-    &[ng-click] {
+    &.prop {
       cursor: pointer;
       &:hover {
         color: @primary;