From 0c501b58a53bf87660283ca0a522f234190b71e7 Mon Sep 17 00:00:00 2001
From: summerscope <summerscope@gmail.com>
Date: Fri, 6 Jun 2014 11:19:15 +1000
Subject: [PATCH] Adjust layout for 12 column grid for Hub details and order
 cycle info plus adjust CSS to allow for different break points

---
 .../stylesheets/darkswarm/shop.css.sass       | 37 ++++++++++---------
 app/views/shopping_shared/_details.html.haml  | 19 +++++-----
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass
index a23458b941..b949227655 100644
--- a/app/assets/stylesheets/darkswarm/shop.css.sass
+++ b/app/assets/stylesheets/darkswarm/shop.css.sass
@@ -31,35 +31,31 @@
         location, location + small
           display: block
 
-      #distributor_title
-        float: left
-        display: block
-        min-width: 350px
+      #distributor_title h3
+        margin-top: 0
+        @media all and (max-width: 768px)
+          margin-bottom: 8px
+        
 
       ordercycle
-        @media all and (max-width: 768px)
+        @media all and (max-width: 640px)
           float: left
           clear: left
-          padding-bottom: 12px
-        display: block
+          padding: 12px 10px
+          width: 100%
+          margin-top: 10px
+          background: #e5e5e5
         float: right
         form.custom 
-          //width: 400px
           text-align: right
-          margin-right: 1em
-          @media all and (max-width: 768px)
-            padding-left: 1em
-            padding-top: 1em
           & > strong
             line-height: 2.5
             font-size: 1.29em
             padding-right: 14px
             @media all and (max-width: 768px)
-              font-size: 1.2em
-          select
+          select            
             width: inherit
             display: inline-block
-            vackground: transparent
             border-width: 1px
             border-color: #999
             color: #666
@@ -67,13 +63,18 @@
             margin-bottom: 0
             padding: 8px 20px 8px 12px
             @media all and (max-width: 768px)
-              font-size: 1.2em
-              // width: 180px
+              font-size: 0.875em
         closing
+          @media all and (max-width: 768px)
+            font-size: 1.2em
+            padding-bottom: 10px
           color: black
           font-size: 1.5em
           display: block
-          padding-bottom: 20px
+          padding-bottom: 12px
+        span
+          @media all and (max-width: 768px)
+            font-size: 0.875em
 
   products
     display: block
diff --git a/app/views/shopping_shared/_details.html.haml b/app/views/shopping_shared/_details.html.haml
index 1b30627533..247f1142b9 100644
--- a/app/views/shopping_shared/_details.html.haml
+++ b/app/views/shopping_shared/_details.html.haml
@@ -1,13 +1,14 @@
 %navigation
   %distributor.details.row
-    #distributor_title
-      - if current_distributor.logo.exists?
-        %img.left{src: current_distributor.logo.url(:thumb)}
-      %h3
-        = current_distributor.name
-      %location= current_distributor.address.city
-      / Will this needs to be a drop-down to choose either pick-up point or delivery once shipping methods are implemented
-
-    = render partial: "shopping_shared/order_cycles"
+    .small-12.medium-6.large-6.columns
+      #distributor_title
+        - if current_distributor.logo.exists?
+          %img.left{src: current_distributor.logo.url(:thumb)}
+        %h3
+          = current_distributor.name
+        %location= current_distributor.address.city
+        / Will this needs to be a drop-down to choose either pick-up point or delivery once shipping methods are implemented
+    .small-12.medium-6.large-6.columns
+      = render partial: "shopping_shared/order_cycles"
 
 = render partial: "shopping_shared/tabs"