Custom comparisons, performance improvements

app/less/app.less

@@ -16,10 +16,10 @@
 @import 'chart-tooltip';
 @import 'buttons';
 @import 'error';
-
+@import 'sortable';
 
 html, body {
-  min-height: 100%;
+  height: 100%;
   text-rendering: optimizeLegibility;
 }
 
@@ -33,15 +33,16 @@ body {
   background-image: none;
   background-repeat: no-repeat;
   background-position: center;
-  background-attachment: fixed;
+  background-attachment: scroll;
   background-size: cover;
 }
 
 #main {
   margin: 0;
   padding: 0.5em 0.25em;
-  min-height: 800px;
+  min-height: 90%;
   clear: both;
+  text-align: center;
 }
 
 .l {
@@ -64,6 +65,10 @@ body {
   clear: both;
 }
 
+.cen {
+  text-align: center;
+}
+
 h1 {
   font-family: @fTitle;
   color: @primary;
@@ -93,6 +98,13 @@ a, a:visited {
   color: @fg;
 }
 
+input {
+  background: @primary-bg;
+  border: 1px solid @primary-disabled;
+  color: @primary-disabled;
+  outline: none;
+}
+
 footer {
   clear: both;
   font-size: 0.6em;

app/less/buttons.less

@@ -4,9 +4,9 @@ button {
   svg {
     fill: @primary;
   }
-  border: 1px solid @primary;
+  border: none;
   font-family: @fStandard;
-  border: 1px solid;
+
   padding: 0.5em;
   cursor: pointer;
   background: none;
@@ -17,7 +17,7 @@ button {
     svg {
       fill: red;
     }
-    border: 1px solid red;
+
   }
 
   &:disabled {
@@ -26,6 +26,5 @@ button {
     svg {
       fill: @disabled;
     }
-    border: 1px solid @disabled;
   }
 }

app/less/charts.less

@@ -2,9 +2,7 @@
 .chart {
   .user-select-none();
   display: inline-block;
-  margin: 1em;
-  //width:100%;
-  //height:100%;
+  margin: 0;
   cursor: default;
 
   h3 {
@@ -16,6 +14,7 @@
   }
 
   svg {
+
     .axis {
 
       line, path {
@@ -35,6 +34,15 @@
       }
 
     }
+
+    .marker {
+      fill: @secondary;
+    }
+
+    .label {
+      font-size: 0.9em;
+      fill: @fg;
+    }
   }
 }
 

app/less/colors.less

@@ -30,6 +30,11 @@
   fill: @primary;
 }
 
+.primary-disabled {
+  color: @primary-disabled;
+  fill: @primary-disabled;
+}
+
 .warning {
   color: @warning;
   fill: @warning;

app/less/comparison.less

@@ -1,4 +1,105 @@
 
 #comparison {
-  text-align: center;
-}
+  display: inline-block;
+  text-align: left;
+  border-collapse: collapse;
+
+  td {
+    border: 1px solid @primary-disabled;
+    padding: 0;
+
+    h3 {
+      margin: 0 1em;
+      line-height: 2em;
+      display: inline-block;
+    }
+  }
+
+  input {
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    border: none;
+    padding-left: 1em;
+  }
+
+  .head {
+    background-color: @primary-disabled;
+    color: @primary-bg;
+    padding: 0 0.5em;
+    text-align: right;
+  }
+}
+
+#facet-container {
+  display: block;
+  .user-select-none();
+  cursor: default;
+  overflow: hidden;
+  font-size: 0.75em;
+  margin: 0;
+  padding: 0;
+
+  .as-sortable-placeholder {
+    background-color: @primary-bg;
+  }
+  .as-sortable-dragging {
+    cursor: ew-resize;
+  }
+}
+
+.facet {
+  cursor: pointer;
+  background-color: @primary-bg;
+  margin: 0;
+  padding: 0.5em 1em;
+  list-style: none;
+  white-space: nowrap;
+  color: @disabled;
+
+  svg {
+    fill: @disabled;
+  }
+
+  .move {
+    cursor: ew-resize;
+  }
+
+  &.active {
+    color: @warning;
+    svg {
+      fill: @warning;
+    }
+    background-color: @warning-bg;
+  }
+}
+
+#build-select {
+  clear: both;
+  margin: 1em 0 0;
+  height: 8.5em;
+  overflow:hidden;
+
+  h1 {
+    margin: 0 0.7em;
+  }
+
+  table {
+    width: 20em;
+
+    tbody {
+      display: block;
+      overflow-x: hidden;
+      overflow-y: auto;
+      max-height: 8em;
+    }
+  }
+
+  td {
+    cursor: pointer;
+  }
+}
+
+#comp-tbl {
+  margin: 1em auto;
+}

app/less/header.less

@@ -34,12 +34,9 @@ header {
     &.disabled {
       color: @warning-disabled;
       cursor: default;
-      &:hover {
-        background-color: transparent;
-      }
     }
 
-    &:hover, &.selected {
+    &.selected {
         background-color: @bgBlack;
     }
   }
@@ -48,30 +45,27 @@ header {
     font-family: @fStandard;
     position: absolute;
     padding: 1em 1em;
-    overflow: hidden;
+    box-sizing: border-box;
+    min-width: 100%;
+    overflow-x: hidden;
     background-color: @bgBlack;
     font-size: 0.8em;
+    overflow-y: auto;
+    max-height: 400px;
 
     &.dbl {
-      width: 22.5em;
+      width: 22em;
       ul {
         float: left;
         width: 10em;
       }
     }
-
-    hr {
-      border: none;
-      border-top: 1px solid @disabled;
-    }
-
   }
 
   ul {
-    margin: 0.5em 1em 0 0;
+    margin: 0 0 0.5em 0;
     padding: 0;
-    line-height: 2em;
-    white-space: nowrap;
+    line-height: 1.3em;
   }
 
   li {
@@ -84,9 +78,8 @@ header {
     vertical-align: middle;
     color: @warning;
     text-decoration: none;
-    white-space: nowrap;
 
-    &.build-name {
+    &.name {
       font-family: Helvetica, sans-serif;
     }
 
@@ -101,6 +94,15 @@ header {
     }
   }
 
+  hr {
+    border: none;
+    border-top: 1px solid @disabled;
+  }
+
+  .no-wrap {
+    white-space: nowrap;
+  }
+
   .block {
     display: block;
     line-height: 1.5em;

app/less/icons.less

@@ -1,30 +1,27 @@
 
 .icon {
   display: inline-block;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
   vertical-align: middle;
-  width: 1em;
+  width: 1.1em;
   height: 1em;
 
   &.sm {
-    width: 0.75em;
+    width: 0.8em;
     height: 0.75em;
   }
 
   &.tn {
-    width: 0.5em;
+    width: 0.6em;
     height: 0.5em;
   }
 
   &.lg {
-    width: 1.5em;
+    width: 1.6em;
     height: 1.5em;
   }
 
   &.xl {
-    width: 2em;
+    width: 2.1em;
     height: 2em;
   }
 }

app/less/list.less

@@ -73,5 +73,3 @@
   }
 
 }
-
-

app/less/modal.less

@@ -49,14 +49,6 @@ textarea {
   }
 }
 
-
-input {
-  background: @primary-bg;
-  border: 1px solid @primary-disabled;
-  color: @secondary-disabled;
-  outline: none;
-}
-
 .dismiss {
   background-color: @primary-bg;
-}
+}

app/less/outfit.less

@@ -6,7 +6,7 @@
 
 #overview {
   h1 {
-    margin: 0.2em 0;
+    margin: 0;
     float: left;
   }
 }
@@ -17,19 +17,17 @@
 
   input {
     background: none;
-    color: @secondary-disabled;
+    color: @primary-disabled;
     outline: none;
+    line-height: 1.5em;
     font-size: 0.8em;
-    line-height: 2em;
-    text-align: center;
-    border: 1px solid @secondary-disabled;
+    border: 1px solid @primary-disabled;
     box-sizing: border-box;
-    display: block;
-    width: 100%;
-    margin-bottom: 0.5em;
+    display: inline-block;
+    padding: 0.5em;
     &:hover, &:focus {
-      border: 1px solid @secondary;
-      color: @secondary;
+      border: 1px solid @primary;
+      color: @primary;
     }
   }
 }
@@ -62,6 +60,7 @@
   border-top: 2px solid @primary;
   border-bottom: 2px solid @primary;
   background-color: @primary-bg;
+  text-align: left;
 }
 
 .toggle {

app/less/shipyard.less

@@ -16,10 +16,6 @@ a.ship {
   text-align: right;
   .user-select-none();
 
-  &:hover {
-    background-color: @secondary-bg;
-  }
-
   h2 {
     width: 100%;
     margin: 0;

app/less/slot.less

@@ -18,6 +18,7 @@
 
 .slot {
   float: left;
+  text-align: left;
   width: 20.5em;
   font-size: 0.75em;
   margin-top: 0.5em;

app/less/sortable.less

@@ -0,0 +1,30 @@
+.sortable {
+  .user-select-none();
+}
+
+.as-sortable-item, .as-sortable-placeholder {
+  display: inline-block;
+  float: left;
+}
+
+.as-sortable-item {
+  -ms-touch-action: none;
+  touch-action: none;
+}
+
+.as-sortable-item-handle {
+  display: block;
+}
+
+.as-sortable-drag {
+  margin: 0;
+  padding:0;
+  opacity: .8;
+  position: absolute;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+.as-sortable-hidden {
+  display: none !important;
+}

app/less/table.less

@@ -3,7 +3,7 @@ table {
   margin: 0 auto;
   background-color: @primary-bg;
   border-spacing: 0;
-  font-size: 0.9em;
+  font-size: 0.8em;
   cursor: default;
 
   a, a:visited {
@@ -16,7 +16,6 @@ thead {
   color: @bgBlack;
   background-color: @primary-disabled;
   .user-select-none();
-  font-size: 0.8em;
 
   .main th {
     border-left: 1px solid @primary-bg;
@@ -48,13 +47,19 @@ tbody tr {
 
   &.tr {
     color: @disabled;
+    fill: @disabled;
     text-align: right;
 
     &:hover {
       color: @fg;
+      fill: @warning;
       background-color: @warning-bg;
     }
 
+    svg {
+      cursor: pointer;
+    }
+
     td {
       padding: 0 0.7em;
     }
@@ -63,8 +68,6 @@ tbody tr {
 }
 
 td {
-  font-size: 0.9em;
-
   &.tl {
     text-align: left;
     padding-left: 0.7em;

app/less/utilities.less

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