From 05add9e530647bc373bd1f8f9ff4959a855f75f9 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Mon, 31 Aug 2020 16:32:14 +1000
Subject: [PATCH] Enlarge product pictures flexibly for devices

This change will need a change of the `small` image size. The new format
should be `227x227#`. The `#` crops the center of an image to make it
square if necessary. All old images should then be regenerated:

  rake paperclip:refresh:thumbnails CLASS=Spree::Image
---
 .../stylesheets/darkswarm/_shop-product-rows.scss     | 10 ++++++++--
 .../stylesheets/darkswarm/_shop-product-thumb.scss    | 11 +++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
index 90db608f05..9e0d4f28aa 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.scss
@@ -15,7 +15,8 @@
       }
 
       .shop-variants {
-        padding-left: 7.9375rem;
+        // product-thumb width + 1rem
+        padding-left: calc(100% / 9 * 2 + 1rem);
 
         @include breakpoint(phablet) {
           padding-left: 0;
@@ -93,9 +94,14 @@
         }
 
         .summary-header {
-          padding-left: 7.9375rem;
+          // product-thumb width + 1rem
+          padding-left: calc(100% / 9 * 2 + 1rem);
           padding-right: 1rem;
 
+          @include breakpoint(phablet) {
+            padding-left: calc(100% / 12 * 4 + 1rem);
+          }
+
           .product-producer {
             white-space: nowrap;
             overflow: hidden;
diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss b/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
index 2f53d36a45..bd44d50035 100644
--- a/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.scss
@@ -2,9 +2,16 @@
   products {
     product {
       .product-thumb {
-        width: 7rem;
-        height: 7rem;
+        // Desktop: the product summary is nine columns wide. Use two
+        // for the image. In our design, that's a max of 192px.
+        width: calc(100% / 9 * 2);
         float: left;
+
+        // Mobile: the summary has full twelve columns and the image
+        // should take four of them. Maximum is 227px.
+        @include breakpoint(phablet) {
+          width: calc(100% / 12 * 4);
+        }
       }
     }
   }