From 75677dced8339a3637d585a7005824de24d528b3 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Tue, 29 Mar 2016 19:29:03 -0400
Subject: [PATCH] Product images responsive, fix qty on single

---
 css/app.css                     | 45 +++++++++++++++++++++++----------
 functions.php                   |  2 +-
 scss/_page.header.scss          |  7 +++++
 scss/plugins/_woocommerce.scss  | 42 ++++++++++++++++++++----------
 woocommerce.php                 | 27 ++++++++++----------
 woocommerce/content-product.php |  4 +--
 6 files changed, 84 insertions(+), 43 deletions(-)

diff --git a/css/app.css b/css/app.css
index a353a5b..0eb0398 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6389,6 +6389,10 @@ header {
       header .social a img {
         margin: 0; }
 
+@media only screen and (max-width: 40em) {
+  .page-title, .woocommerce-result-count, .woocommerce-ordering {
+    padding: 0 10px; } }
+
 .contain-to-grid {
   box-shadow: 0 5px 10px -1px #999999; }
   .contain-to-grid .top-bar {
@@ -6695,6 +6699,7 @@ main {
     font-family: Arial;
     font-size: 12px; }
   .woocommerce .single_variation_wrap .quantity {
+    float: right;
     margin-bottom: 10px; }
     .woocommerce .single_variation_wrap .quantity input {
       display: inline-block;
@@ -6983,11 +6988,15 @@ main {
     border-radius: 3px;
     clear: both;
     float: right;
+    margin-top: 10px;
     padding: 2px 8px;
     background: transparent url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
     padding: 3px 10px;
     font-size: 14px;
     border: 1px solid transparent; }
+    @media only screen and (max-width: 40em) {
+      .woocommerce #content .product.type-product .single_add_to_cart_button {
+        float: none; } }
     .woocommerce #content .product.type-product .single_add_to_cart_button:hover, .woocommerce #content .product.type-product .single_add_to_cart_button:focus {
       background-color: white;
       border: 1px solid #0f789f; }
@@ -6998,9 +7007,10 @@ main {
     display: table;
     height: 25px;
     padding: 2px 0 2px 5px; }
-    .woocommerce #content .product.type-product .quantity .cart-qty-label, .woocommerce #content .product.type-product .qty .cart-qty-label {
-      float: right;
-      margin-right: 5px; }
+    @media only screen and (max-width: 40em) {
+      .woocommerce #content .product.type-product .quantity, .woocommerce #content .product.type-product .qty {
+        float: none;
+        margin: 0 auto; } }
     .woocommerce #content .product.type-product .quantity .input-text, .woocommerce #content .product.type-product .qty .input-text {
       margin: 0; }
     .woocommerce #content .product.type-product .quantity .minus, .woocommerce #content .product.type-product .quantity .plus, .woocommerce #content .product.type-product .qty .minus, .woocommerce #content .product.type-product .qty .plus {
@@ -7013,6 +7023,10 @@ main {
     .woocommerce #content .product.type-product .quantity .minus:hover, .woocommerce #content .product.type-product .quantity .plus:hover, .woocommerce #content .product.type-product .qty .minus:hover, .woocommerce #content .product.type-product .qty .plus:hover {
       background-color: transparent;
       color: inherit !important; }
+  .woocommerce #content .product.type-product .cart-qty-label {
+    float: right;
+    clear: both;
+    margin-right: 5px; }
   .woocommerce #content .product.type-product .price {
     color: transparent;
     margin-bottom: 0;
@@ -7022,6 +7036,10 @@ main {
     text-align: right;
     display: block;
     line-height: 1.0; }
+    @media only screen and (max-width: 40em) {
+      .woocommerce #content .product.type-product .price {
+        float: none;
+        text-align: center; } }
     .woocommerce #content .product.type-product .price > * {
       height: 40px; }
     .woocommerce #content .product.type-product .price span {
@@ -7037,6 +7055,10 @@ main {
     float: right;
     clear: both;
     font-size: 14px; }
+    @media only screen and (max-width: 40em) {
+      .woocommerce #content .product.type-product .stock {
+        float: none;
+        text-align: center; } }
   @media only screen and (max-width: 40em) {
     .woocommerce #content .product.type-product {
       margin-top: 20px; }
@@ -7134,14 +7156,8 @@ main {
       padding: 10px;
       clear: both;
       width: 100%;
-      padding-right: 0;
-      border: none; }
-      @media only screen and (max-width: 40em) {
-        .woocommerce #content ul.products li.product.type-product {
-          width: 49%; } }
-      @media only screen and (min-width:40.063em) and (max-width:64em) {
-        .woocommerce #content ul.products li.product.type-product {
-          width: 33%; } }
+      border: none;
+      margin: 0 auto 10px; }
       .woocommerce #content ul.products li.product.type-product h3 {
         font-size: 16px;
         text-align: left; }
@@ -7155,8 +7171,7 @@ main {
         border-radius: 5px; }
         .woocommerce #content ul.products li.product.type-product > div img {
           /*                border: 2px solid $black;*/
-          border-radius: 3px;
-          width: auto; }
+          border-radius: 3px; }
       .woocommerce #content ul.products li.product.type-product h3 {
         font-weight: normal; }
       .woocommerce #content ul.products li.product.type-product .count {
@@ -7185,6 +7200,10 @@ main {
         float: right;
         text-align: right;
         clear: both; }
+        @media only screen and (max-width: 40em) {
+          .woocommerce #content ul.products li.product.type-product .cart {
+            float: none;
+            text-align: center; } }
       .woocommerce #content ul.products li.product.type-product .products-add-to-cart {
         clear: both;
         float: right; }
diff --git a/functions.php b/functions.php
index 832678f..b3c41e5 100644
--- a/functions.php
+++ b/functions.php
@@ -137,7 +137,7 @@ add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_produ
 add_filter ( 'woocommerce_product_thumbnails_columns', 'prod_thumb_cols' );
 
 remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
-add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 30 );
+add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 20 );
 
 function prod_thumb_cols() {
     return 4; // .last class applied to every 4th thumbnail
diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index b914569..bb7adee 100644
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -132,3 +132,10 @@ header {
         }
     }
 }
+.page-title,
+.woocommerce-result-count,
+.woocommerce-ordering {
+    @media #{$small-only} {
+        padding: 0 10px;
+    }
+}
\ No newline at end of file
diff --git a/scss/plugins/_woocommerce.scss b/scss/plugins/_woocommerce.scss
index b182894..4851dfc 100644
--- a/scss/plugins/_woocommerce.scss
+++ b/scss/plugins/_woocommerce.scss
@@ -232,6 +232,7 @@
         font-size: 12px;
     }
     .single_variation_wrap .quantity {
+        float: right;
         margin-bottom: 10px;
         input {
             display: inline-block;
@@ -651,6 +652,10 @@
             border-radius: 3px;
             clear: both;
             float: right;
+            margin-top: 10px;
+            @media #{$small-only} {
+                float:none;
+            }
             padding: 2px 8px;
             background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0;
             padding: 3px 10px;
@@ -666,13 +671,13 @@
         }
         .quantity, .qty {         
             float: right; 
+            @media #{$small-only} {
+                float:none;
+                margin: 0 auto;
+            }
             display:table;
             height: 25px;
             padding: 2px 0 2px 5px;
-            .cart-qty-label {
-                float: right;
-                margin-right: 5px;
-            }
             .input-text {
                 margin: 0;
             }
@@ -691,6 +696,11 @@
                 color: inherit !important;
             }
         }
+        .cart-qty-label {
+            float: right;
+            clear: both;
+            margin-right: 5px;
+        }
         .price {
             color: transparent;
             margin-bottom: 0;
@@ -698,6 +708,10 @@
             margin: 0;
             float: right;
             text-align: right;
+            @media #{$small-only} {
+                float:none;
+                text-align: center;
+            }
             display: block;
             line-height: 1.0;
             > * {
@@ -718,6 +732,10 @@
         .stock {
             color: black;
             float: right;
+            @media #{$small-only} {
+                float:none;
+                text-align: center;
+            }
             clear: both;
             font-size: 14px;
         }
@@ -858,13 +876,8 @@
             padding: 10px;
             clear: both;
             width: 100%;
-
-            @media #{$small-only} {
-                width: 49%;
-            }
-            @media #{$medium-only} {
-                width: 33%;
-            }
+            border: none;
+            margin: 0 auto 10px;
             h3 {
                 font-size: 16px;
                 text-align: left;
@@ -874,8 +887,6 @@
                 border: none;
                 padding-right: 15px;
             }
-            padding-right: 0;
-            border: none;
             > div {
                 margin: 5px;
                 padding: 5px;
@@ -883,7 +894,6 @@
                 img {
     /*                border: 2px solid $black;*/
                     border-radius: 3px;
-                    width: auto;
                 }
             }
             h3 {
@@ -925,6 +935,10 @@
                 float: right;
                 text-align: right;
                 clear: both;
+                @media #{$small-only} {
+                    float:none;
+                    text-align: center;
+                }
             }
             .products-add-to-cart {
                 button {
diff --git a/woocommerce.php b/woocommerce.php
index aeeace9..aaf913f 100644
--- a/woocommerce.php
+++ b/woocommerce.php
@@ -146,18 +146,19 @@
 <script>
     
 $(document).ready(function () {
-        $("#tab-html5_video p").remove();
-        var mainImage = $(".attachment-shop_single.size-shop_single.wp-post-image");
-        var thumbImage =  $(".attachment-shop_thumbnail.size-shop_thumbnail");
-        
-        $(thumbImage).mouseover(function(){
-            $(mainImage).attr("srcset", $(this).attr("src"));
-        });
-
-        // Thumbnail undisplay
-        $(thumbImage).mouseout(function(){
-            $(mainImage).attr("srcset", $(mainImage).attr("src"));
-        });
-        
+    $("#tab-html5_video p").remove();
+    var mainImage = $(".attachment-shop_single.size-shop_single.wp-post-image");
+    var thumbImage =  $(".attachment-shop_thumbnail.size-shop_thumbnail");
+    $(".attachment-shop_thumbnail").parent().css("text-align","center");
+    $(".woocommerce-placeholder").parent().css("text-align","center");
+    $(thumbImage).mouseover(function(){
+        $(mainImage).attr("srcset", $(this).attr("src"));
+    });
+
+    // Thumbnail undisplay
+    $(thumbImage).mouseout(function(){
+        $(mainImage).attr("srcset", $(mainImage).attr("src"));
+    }); 
+    
 });
 </script>
\ No newline at end of file
diff --git a/woocommerce/content-product.php b/woocommerce/content-product.php
index 2301b27..8e5eb47 100644
--- a/woocommerce/content-product.php
+++ b/woocommerce/content-product.php
@@ -51,10 +51,10 @@ if ( 0 === $woocommerce_loop['loop'] % $woocommerce_loop['columns'] ) {
 <?php if (!is_product()) { ?>
 <li <?php post_class( $classes ); ?>>
     <div class="row collapse">
-        <div class="small-12 medium-4 column">
+        <div class="small-12 large-4 column">
         <?php echo $product->get_image(); ?>
         </div>
-        <div class="small-12 medium-8 columns">
+        <div class="small-12 large-8 columns">
             <div class="row">
                 <?php echo woocommerce_template_loop_product_link_open(); ?>
                 <?php do_action( 'woocommerce_shop_loop_item_title' ); ?>
-- 
2.17.1