From 35c74e2bf0615b852e4339e583be7a801cc1dcae Mon Sep 17 00:00:00 2001
From: Will Marshall <will@willmarshall.me>
Date: Wed, 5 Feb 2014 14:26:30 +1100
Subject: [PATCH] Reworking shop to be more responsive

---
 .../stylesheets/darkswarm/shop.css.sass       | 29 ++++++++++++++++---
 app/views/shop/_products.html.haml            |  3 +-
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass
index 334c3ee6ef..c1cf13e772 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.sass
+++ b/app/assets/stylesheets/darkswarm/shop.css.sass
@@ -96,15 +96,19 @@ shop
       th
         line-height: 50px
         &.name
-          width: 265px
-        &.notes
-          width: 280px
+          width: 300px
+        //&.notes
+          //width: 220px
         &.variant
-          width: 150px
+          max-width: 100px
       .notes
         max-width: 300px
       td, th
         background: #fff
+        > span
+          min-width: 50px
+          display: block
+      tbody
         border: 1px solid #cccccc
         border-left: 0px
         border-right: 0px
@@ -113,6 +117,23 @@ shop
         &.name img
           float: left
           margin-right: 20px
+      tr.product-description
+        display: none
+
+
+      // Responsive
+      @media all and (max-width: 768px)
+        td.notes, th.notes
+          display: none
+        img
+          width: 20px
+          height: auto
+        tr.product-description
+          display: table-row
+          td:empty
+            display: none
+            
+
       input[type=number]
         width: 60px
         margin: 0px
diff --git a/app/views/shop/_products.html.haml b/app/views/shop/_products.html.haml
index 1471fc26fb..e7255ce3a5 100644
--- a/app/views/shop/_products.html.haml
+++ b/app/views/shop/_products.html.haml
@@ -20,7 +20,6 @@
                 {{ product.name }}
               {{ product.supplier.name }}
           %td.notes {{ product.notes | truncate:80 }}
-
           %td 
             {{ product.master.options_text }}
             %span{"ng-show" => "product.variants.length > 0"}
@@ -48,6 +47,8 @@
           %td.price.text-right
             %small{"ng-show" => "(product.variants.length > 0)"} from
             {{ product.price | currency }}
+        %tr.product-description
+          %td{colspan: 6}{{ product.notes | truncate:80 }}
         %tr{"ng-repeat" => "variant in product.variants", "ng-show" => "product.show_variants"}
           = render partial: "shop/variant"
     %input.button.right{type: :submit, value: "Check Out"}