From 91b42372fb8e50384155bfd0060de8d744614c01 Mon Sep 17 00:00:00 2001
From: Colin McLeod <colin@roaminsight.com>
Date: Thu, 28 May 2015 02:21:03 -0700
Subject: [PATCH] UI & UX improvements

---
 app/less/comparison.less   |  2 ++
 app/less/header.less       |  2 ++
 app/less/list.less         |  5 +++--
 app/less/outfit.less       | 20 +++++++++-----------
 app/less/select.less       |  2 ++
 app/less/slot.less         |  6 ++++--
 app/views/page-outfit.html |  2 +-
 7 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/less/comparison.less b/app/less/comparison.less
index 260ea573..6c1731c0 100755
--- a/app/less/comparison.less
+++ b/app/less/comparison.less
@@ -104,6 +104,8 @@
       display: block;
       overflow-x: hidden;
       overflow-y: auto;
+      z-index: 0;
+      -webkit-overflow-scrolling: touch;
       max-height: 8em;
     }
   }
diff --git a/app/less/header.less b/app/less/header.less
index cd8c0cf1..45b741a4 100755
--- a/app/less/header.less
+++ b/app/less/header.less
@@ -51,6 +51,8 @@ header {
     background-color: @bgBlack;
     font-size: 0.8em;
     overflow-y: auto;
+    z-index: 0;
+    -webkit-overflow-scrolling: touch;
     max-height: 400px;
 
     &.dbl {
diff --git a/app/less/list.less b/app/less/list.less
index 2b5fb705..724ad19f 100755
--- a/app/less/list.less
+++ b/app/less/list.less
@@ -1,10 +1,11 @@
 .list {
-  overflow: hidden;
+  margin: 1em 0;
   cursor: default;
   font-size: 0.8em;
-  min-width: 21em;
+  min-width: 25%;
   text-align: left;
   .user-select-none();
+  box-sizing: border-box;
 
   .header {
     width: 100%;
diff --git a/app/less/outfit.less b/app/less/outfit.less
index daa004e8..415885ad 100755
--- a/app/less/outfit.less
+++ b/app/less/outfit.less
@@ -1,17 +1,15 @@
 
 #outfit {
   font-size: 1.1em;
-
-  // iPads  Landscape
-  .tablet({
-    & {
-      font-size: 0.95em;
-    }
-  });
-
-  width: 64em;
+  max-width: 1200px;
   margin: 0 auto;
   .user-select-none();
+
+  .tablet({
+    min-width: 760px;
+    font-size: 0.8em;
+  });
+
 }
 
 #overview {
@@ -25,7 +23,7 @@
 #summary {
   .user-select-none();
   width: 100%;
-  margin-top: 1em;
+  margin: 1em 0;
   font-size: 0.8em;
   border-collapse: collapse;
 
@@ -56,7 +54,7 @@
 
 
 #hardpoints, #utility, #standard {
-  margin-right: 0.3em;
+  padding-right: 0.3em;
   .slot {
     clear: left;
   }
diff --git a/app/less/select.less b/app/less/select.less
index 0dbbaa80..baf0f42c 100755
--- a/app/less/select.less
+++ b/app/less/select.less
@@ -8,6 +8,8 @@
   max-height: 300px;
   overflow-y: auto;
   overflow-x: hidden;
+  z-index: 0;
+  -webkit-overflow-scrolling: touch;
   background-color: @bg;
   border: 1px solid @primary;
   white-space: nowrap;
diff --git a/app/less/slot.less b/app/less/slot.less
index cc3e3d62..d38d7a8c 100755
--- a/app/less/slot.less
+++ b/app/less/slot.less
@@ -1,6 +1,8 @@
 
 .slot-group {
-  margin: 1em 0;
+  width: 25%;
+  margin: 0;
+  box-sizing: border-box;
   .user-select-none();
   cursor: default;
 
@@ -19,7 +21,7 @@
 .slot {
   float: left;
   text-align: left;
-  width: 21em;
+  width: 100%;
   font-size: 0.75em;
   margin-top: 0.5em;
   position: relative;
diff --git a/app/views/page-outfit.html b/app/views/page-outfit.html
index 6b5a5a23..4a7df7fe 100755
--- a/app/views/page-outfit.html
+++ b/app/views/page-outfit.html
@@ -216,7 +216,7 @@
     </table>
   </div>
 
-  <div class="list l" style="width: 37em; margin: 0 0.5em;">
+  <div class="list l" style="width: 50%;padding: 0 0.5em;">
     <div class="header">Jump Range</div>
     <div class="cen">
       <div class="chart" area-chart config="jrChart" series="jrSeries"></div>