From a5f4765f974160a6aa974facbdd96e4689bbb8e3 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 19 Jul 2019 18:43:38 +0200
Subject: [PATCH] fix #2927

---
 resources/styles/components/products.styl     | 34 +++++++++++++++++--
 .../views/pages/product-detail.blade.php      |  2 +-
 resources/views/pages/products.blade.php      |  9 ++---
 tailwind.config.js                            |  1 +
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl
index 6e1e298..1d263de 100644
--- a/resources/styles/components/products.styl
+++ b/resources/styles/components/products.styl
@@ -15,11 +15,39 @@
 
 
     .product-highlights
-      height 147px // 7 lines
+      height 42px // 3 lines
       overflow hidden
+
       li
-        margin-bottom: 0 // all lines have the same size, it allows the last line not to be half croped
+        margin-bottom: 0
+
+    // all lines have the same size, it allows the last line not to be half croped
 
     h3
-      height 39px
+      height 21px
       overflow hidden
+
+.product-img-holder
+  @apply bg-white
+  position: relative
+
+  &:before
+    content: "";
+    display: block
+    padding-top: 100%
+
+  > *
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    color: white;
+    text-align: center;
+
+  .product-img
+    @apply bg-contain bg-center bg-no-repeat
+    width: 70%
+    height: 70%
+    top: 15%;
+    left: 15%;
diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 0ecb03d..4f1a064 100644
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -19,7 +19,7 @@
             {{-- Product images --}}
             <div class="product-detail-images-wrapper flex-grow" style="max-width: 348px">
                 <div
-                    class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-cover mb-3"
+                    class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-contain mb-3"
                     style="background-image: url({{ $product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }});">
                 </div>
 
diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php
index e603c78..2ac19fe 100644
--- a/resources/views/pages/products.blade.php
+++ b/resources/views/pages/products.blade.php
@@ -96,15 +96,16 @@
                     @foreach($products as $id=>$product)
                         <div class="product-grid-item bg-grey-200">
                             {{-- Image holder --}}
-                            <div class="bg-white pb-100p bg-cover bg-center bg-no-repeat"
-                                 style="background-image: url({{$product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }})">
+                            <div class="product-img-holder">
+                                <div class="product-img"
+                                     style="background-image: url({{$product->getImageUrl('images','',asset('images/product-details/product-placeholder.svg')) }})"></div>
                             </div>
 
                             {{-- Product details --}}
                             <div class="p-4">
-                                <h3>{{ $product->get('name') }}</h3>
+                                <h3>{{ $product->get('reference') }}</h3>
                                 <div class="product-highlights text-sm">
-                                    @markdown($product->highlights)
+                                    {{$product->get('name')}}
                                 </div>
                                 <p class="mt-4">
                                     <a href="{{ $nav->getHrefById('product/'.$product->id) }}">
diff --git a/tailwind.config.js b/tailwind.config.js
index f6fcd7a..3650b54 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,6 +40,7 @@ module.exports = {
             },
             padding: {
                 '100p': '100%', // Used for proportional padding to make a square
+                '25p':'25%',
             }
         },
     },
-- 
2.39.5