Merge pull request #44 from Maverick-JM/master

Responsive CSS for Outfitting screen

app/less/app.less

@@ -1,5 +1,6 @@
 @import 'colors';
 @import 'fonts';
+@import 'responsive';
 @import 'utilities';
 @import 'icons';
 @import 'background-images';

app/less/header.less

@@ -47,26 +47,21 @@ header {
     color: @warning;
     // Less than 600px screen width: hide text
 
-
     &.disabled {
       color: @warning-disabled;
       cursor: default;
     }
 
     &.selected {
-        background-color: @bgBlack;
+      background-color: @bgBlack;
     }
 
     .menu-item-label {
-        @media screen and (min-width: 541px) {
-            margin-left: 1em;
-        }
-        @media screen and (max-width: 540px) {
-            margin-left: 0.5em;
-        }
-        @media screen and (max-width: 520px) {
-            display: none;
-        }
+      margin-left: 1em;
+
+      .medPhone({
+        display: none;
+      });
     }
   }
 
@@ -84,6 +79,15 @@ header {
     -webkit-overflow-scrolling: touch;
     max-height: 400px;
 
+    .tablet({
+      font-size: 1.1em;
+      max-height: 800px;
+
+      a {
+        padding: 0.3em 0;
+      }
+    });
+
     &.dbl {
       -webkit-column-count: 2; /* Chrome, Safari, Opera */
       -moz-column-count: 2; /* Firefox */

app/less/outfit.less

@@ -7,13 +7,26 @@
 
   .tablet({
     width: 100%;
-    min-width: 750px;
-    font-size: 0.8em;
+    font-size: 1.2em;
+    max-width: 1600px;
   });
 
+  &>.list {
+    .tablet({
+      width: 49%;
+    });
+
+    .largePhone({
+      width: 100%;
+    });
+  }
 }
 
 #overview {
+  .tablet({
+      font-size: 0.9em;
+  });
+
   h1 {
     margin: 0;
     float: left;
@@ -22,14 +35,20 @@
 }
 
 #summary {
-  .user-select-none();
+  overflow-x: auto;
   width: 100%;
-  margin: 1em 0;
-  font-size: 0.8em;
-  border-collapse: collapse;
+  margin: 1em 0 1em 0;
+  padding-bottom: 1em;
+  
+  #summaryTable {
+    .user-select-none();
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.8em;
 
-  tbody td {
-    padding: 0 0.5em;
+    tbody td {
+        padding: 0 0.5em;
+    }
   }
 }
 
@@ -51,6 +70,11 @@
       color: @primary;
     }
   }
+  button {
+    .smallPhone({
+      padding: 0.25em;
+    });
+  }
 }
 
 
@@ -65,4 +89,24 @@
  .slot {
     clear: left;
   }
+}
+
+.outfit-button-label {
+  margin-left: 0.5em;
+
+  .smallTablet({
+    display: none;
+  });
+}
+
+#jumpRange {
+  width: 50%;
+  padding: 0 0.5em;
+
+  .tablet({
+    float: right;
+    clear: both;
+    display: block;
+    width: 100% !important;
+  });
 }

app/less/responsive.less

@@ -0,0 +1,35 @@
+// Screens less than 1024 wide
+// More will be added over time to support mobile devices better
+// These are designed to trickle down. So tablet styles will apply to tablet and smaller, etc
+// To overwrite, put the smallest devices at the bottom
+
+.smallPhone(@rules) {
+  @media only screen and (max-width: 350px) {
+    @rules();
+  }
+}
+
+.medPhone(@rules) {
+  @media only screen and /*(min-width: 351px) and */ (max-width: 550px) {
+    @rules();
+  }
+}
+
+.largePhone(@rules) {
+  @media only screen and /*(min-width: 551px) and */ (max-width: 640px) {
+    @rules();
+  }
+}
+
+.smallTablet(@rules) {
+  @media only screen and /*(min-width: 641px) and */(max-width: 820px) {
+    @rules();
+  }
+}
+
+
+.tablet(@rules) {
+  @media only screen and /*(min-width: 601px) and */(max-width: 1024px) {
+    @rules();
+  }
+}

app/less/shipyard.less

@@ -16,6 +16,10 @@ a.ship {
   text-align: right;
   .user-select-none();
 
+  .smallPhone({
+    width: 16em;
+  });
+
   h2 {
     width: 100%;
     margin: 0;

app/less/slot.less

@@ -16,6 +16,18 @@
     padding-left: 0.5em;
     font-weight: normal;
   }
+
+  .tablet({
+    width: 50%;
+    
+    h1 {
+        margin: 1em 0 0 0;
+    }
+  });
+
+  .largePhone({
+    width: 100%;
+  });
 }
 
 .slot {

app/less/utilities.less

@@ -29,11 +29,3 @@
   -ms-user-select: none;
   user-select: none;
 }
-
-// Screens less than 1024 wide
-// More will be added over time to support mobile devices better
-.tablet(@rules) {
-  @media only screen and (min-width: 300px) and (max-width: 1024px) {
-    @rules();
-  }
-}