From ff119789ac4ab06e13ffab8719f321da61174b14 Mon Sep 17 00:00:00 2001
From: Maverick <althaz@hotmail.com>
Date: Thu, 11 Jun 2015 20:00:08 +1000
Subject: [PATCH] Refinements to power-priority widget. Works from original
 iPhone size on up pretty smoothly. As screens get smaller, non-essential
 columns get smaller. Click targets also get a bit larger.

---
 app/less/outfit.less       | 65 ++++++++++++++++++++++++++++++++++++++
 app/views/page-outfit.html |  2 +-
 2 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/app/less/outfit.less b/app/less/outfit.less
index ff0d4fd4..378d7045 100755
--- a/app/less/outfit.less
+++ b/app/less/outfit.less
@@ -159,3 +159,68 @@ table.total {
     });
   }
 }
+
+#componentPriority {
+  .tablet({
+    text.primary, text.warning, text.primary-bg {
+      font-size: 0.8em;
+    }
+
+    table tbody tr td {
+      &:nth-child(4) {
+        span {
+          display: inline;
+          padding:0;
+          margin:0;
+          font-size: 2em;
+        }
+      }
+    }
+  });
+
+  .medPhone({
+    .axis {
+      font-size: 0.8em;
+
+      g.tick:nth-child(2n) text {
+        display: none;
+      }
+    } 
+
+    table thead tr.main th {
+      font-size: 0.8em;
+
+      &:nth-child(2) {
+        display: none;
+      }
+    }
+
+    table tbody tr td {
+      &:nth-child(1) {
+        padding: 0;
+        margin: 0;
+        max-width: 0;
+        width: 0;
+        color: transparent;
+      }
+      &:nth-child(3) {
+        display: none;
+      }
+      &:nth-child(2) {
+        font-size: 0.7em;
+      }
+    }
+  });
+
+  .smallPhone({
+    table tbody tr td {
+      &:nth-child(6) {
+        padding: 0;
+        margin: 0;
+        max-width: 0;
+        width: 0;
+        color: transparent;
+      }
+    }
+  });
+}
\ No newline at end of file
diff --git a/app/views/page-outfit.html b/app/views/page-outfit.html
index 53d10372..83f52c41 100755
--- a/app/views/page-outfit.html
+++ b/app/views/page-outfit.html
@@ -193,7 +193,7 @@
     </div>
   </div>
 
-  <div class="group dbl">
+  <div class="group dbl" id="componentPriority">
     <table style="width:100%">
       <thead>
         <tr class="main">