From cc1018c62c017e4ad2ccea52f2db79ea67db167d Mon Sep 17 00:00:00 2001
From: Maverick <althaz@hotmail.com>
Date: Thu, 4 Jun 2015 20:40:43 +1000
Subject: [PATCH] Other responsive changes. Outfitting screen now works pretty
 well on phone-sized displays. Summary is currently just a
 horizontal-scrolling thing (because it's a table atm) but everything else
 scales down and collapses pretty nicely.

---
 app/less/outfit.less       | 20 ++++++++++++++++++++
 app/views/page-outfit.html | 20 ++++++++++----------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/app/less/outfit.less b/app/less/outfit.less
index ae75e315..18525ff2 100755
--- a/app/less/outfit.less
+++ b/app/less/outfit.less
@@ -11,6 +11,14 @@
     //font-size: 0.8em;
   });
 
+  &>.list {
+    @media screen and (max-width: 1000px) {
+      width: 49%;
+    }
+    @media screen and (max-width: 600px) {
+      width: 100%;
+    }
+  }
 }
 
 #overview {
@@ -74,4 +82,16 @@
     @media screen and (max-width: 640px) {
         display: none;
     }
+}
+
+#jumpRange {
+    width: 50%;
+    padding: 0 0.5em;
+
+    @media screen and (max-width: 1000px) {
+        float: right;
+        clear: both;
+        display: block;
+        width: 100% !important;
+    }
 }
\ No newline at end of file
diff --git a/app/views/page-outfit.html b/app/views/page-outfit.html
index fc2b75eb..9e9cbc14 100755
--- a/app/views/page-outfit.html
+++ b/app/views/page-outfit.html
@@ -227,16 +227,6 @@
         </table>
     </div>
 
-    <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>
-            <div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
-                <svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
-            </div>
-        </div>
-    </div>
-
     <div class="list r">
         <div class="header">Costs</div>
         <div class="items">
@@ -267,4 +257,14 @@
         </table>
     </div>
 
+    <div class="list l" id="jumpRange">
+        <div class="header">Jump Range</div>
+        <div class="cen">
+            <div class="chart" area-chart config="jrChart" series="jrSeries"></div>
+            <div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
+                <svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
+            </div>
+        </div>
+    </div>
+
 </div>