From 2296c49bc3643ff49ec4b55d7e52e144037b878e Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Thu, 5 Sep 2019 19:57:24 +0200
Subject: [PATCH] Responsive fixes and general code cleanup. Done #2769 @2.5

---
 app/Models/Product.php                    | 37 +++++++-------
 app/Providers/AppServiceProvider.php      |  4 ++
 resources/js/components/CartItem.vue      |  6 +--
 resources/js/components/NumberInput.vue   |  4 +-
 resources/styles/components/cart.styl     |  6 +++
 resources/styles/components/form.styl     | 18 +++++--
 resources/views/pages/cart.blade.php      |  2 +-
 resources/views/partials/cart.blade.php   |  4 +-
 resources/views/partials/form.blade.php   | 59 +++++++++++++----------
 resources/views/partials/header.blade.php |  1 +
 10 files changed, 86 insertions(+), 55 deletions(-)

diff --git a/app/Models/Product.php b/app/Models/Product.php
index dbede64..995ad63 100644
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@@ -14,6 +14,7 @@ class Product extends CubistMagicPageModel
     protected static $_specifications = null;
     protected static $_productTypes = null;
     protected static $_specificationFields = null;
+    protected static $_cart_data;
 
     /**
      * @var array
@@ -349,25 +350,27 @@ class Product extends CubistMagicPageModel
      */
     public static function getCartData()
     {
-
-        $cart_items = session('cart_items', []);
-
-        $cart_data = [];
-        $products = self::with('media')->whereIn('id', array_keys($cart_items))->get();
-
-        foreach ($products as $product) {
-            $cart_data[] = [
-                'id' => $product->id,
-                'name' => $product->name,
-                'reference' => $product->reference,
-                'category' => $product->type->name,
-                'quantity' => $cart_items[$product->id],
-                'image' => $product->image,
-                'URL' => $product->url,
-            ];
+        if (!self::$_cart_data) {
+
+            $cart_items = session('cart_items', []);
+
+            self::$_cart_data = [];
+            $products = self::with('media')->whereIn('id', array_keys($cart_items))->get();
+
+            foreach ($products as $product) {
+                self::$_cart_data[] = [
+                    'id' => $product->id,
+                    'name' => $product->name,
+                    'reference' => $product->reference,
+                    'category' => $product->type->name,
+                    'quantity' => $cart_items[$product->id],
+                    'image' => $product->image,
+                    'URL' => $product->url,
+                ];
+            }
         }
 
-        return $cart_data;
+        return self::$_cart_data;
     }
 
 
diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
index 7f873af..da285a9 100644
--- a/app/Providers/AppServiceProvider.php
+++ b/app/Providers/AppServiceProvider.php
@@ -6,6 +6,7 @@ use Illuminate\Support\ServiceProvider;
 use Illuminate\Support\Facades\View;
 use Illuminate\Support\Facades\Blade;
 use Spatie\BladeX\Facades\BladeX;
+use App\Models\Product;
 
 class AppServiceProvider extends ServiceProvider
 {
@@ -31,6 +32,9 @@ class AppServiceProvider extends ServiceProvider
             $view_parts = explode('.', $view->getName());
             $view_name = end($view_parts);
             View::share('view_name', $view_name);
+
+            // Also share cart data with all views
+            View::share('cart_items', Product::getCartData());
         });
 
         try {
diff --git a/resources/js/components/CartItem.vue b/resources/js/components/CartItem.vue
index a172801..67d93fb 100644
--- a/resources/js/components/CartItem.vue
+++ b/resources/js/components/CartItem.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="cart-item flex mb-1v text-base">
-        <a class="block border-gray-100 border-2 bg-center bg-contain bg-no-repeat flex-shrink-0"
+        <a class="cart-item-image block border-gray-100 border-2 bg-center bg-contain bg-no-repeat w-full xs:hidden"
            :href="item.URL"
-           :style="`background-image: url(${item.image}); width: 144px; height: 144px`">
+           :style="`background-image: url(${item.image});`">
         </a>
-        <div class="pl-6 leading-relaxed flex-grow">
+        <div class="pl-6 xs:pl-0 leading-relaxed flex-grow">
             <a :href="item.URL" class="block text-navy font-display">
 
                 <span class="text-grey-dark">{{ item.reference }}</span>
diff --git a/resources/js/components/NumberInput.vue b/resources/js/components/NumberInput.vue
index 7f334da..4482c1c 100644
--- a/resources/js/components/NumberInput.vue
+++ b/resources/js/components/NumberInput.vue
@@ -299,7 +299,7 @@
             line-height: 1.5
             max-width: 100%
             min-height: 1.5em
-            min-width: 2.5em
+            min-width: 2em
             padding: 0.4375em 0.875em
             transition: border-color 0.15s
             width: 100%
@@ -317,7 +317,7 @@
             & > input
                 box-sizing: content-box
                 display: inline-block
-                width: 2.5em
+                width: 2em
                 padding: 0.4em 2.5em
 
         &--center
diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl
index 57de124..ef7c770 100644
--- a/resources/styles/components/cart.styl
+++ b/resources/styles/components/cart.styl
@@ -70,3 +70,9 @@
   .cart-quantity
     @apply bg-white
     max-width: 220px
+
+// Cart item
+.cart-item
+  &-image
+    max-width: 144px
+    max-height: @max-width
diff --git a/resources/styles/components/form.styl b/resources/styles/components/form.styl
index a7d36f6..825a20f 100644
--- a/resources/styles/components/form.styl
+++ b/resources/styles/components/form.styl
@@ -1,11 +1,14 @@
-.ajax-form,.notajax-form
+.ajax-form, .notajax-form
 
   .fields
     grid-column-gap: 30px
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 
+    +below(500px)
+      grid-template-columns: auto
+
   .errormessage
-    color theme('colors.red')
+    color: theme('colors.red')
     font-weight: 300
     position: absolute
     right: 0
@@ -28,7 +31,7 @@
     display: block
 
     &:not(.half)
-      grid-column 1 / -1
+      grid-column: 1 / -1
 
   .textarea
     height 144px
@@ -39,5 +42,10 @@
     margin-bottom: 20px;
 
   .btn-custom
-    min-width 14rem
-    padding 1.125rem 3.375rem
+    min-width: 14rem
+    padding: 1.125rem 3.375rem
+
+    +below(500px)
+      min-width: unset
+      padding-left: 1.5em
+      padding-right: @padding-left
diff --git a/resources/views/pages/cart.blade.php b/resources/views/pages/cart.blade.php
index 5cbd3d5..c438b47 100644
--- a/resources/views/pages/cart.blade.php
+++ b/resources/views/pages/cart.blade.php
@@ -8,7 +8,7 @@
         <div v-if="cartItemCount > 0">
 
             {{-- Columns set to auto because cart will disappear when quote form is sent, leaving just the confirmation message. --}}
-            <grid cols="auto">
+            <grid cols="auto" class="sm:grid-cols-1">
 
                 {{-- Nested divs to allow grey backgrounds of columns to match the height of their content instead of total height --}}
                 <div>
diff --git a/resources/views/partials/cart.blade.php b/resources/views/partials/cart.blade.php
index f26cb44..a5d23d8 100644
--- a/resources/views/partials/cart.blade.php
+++ b/resources/views/partials/cart.blade.php
@@ -1,5 +1,7 @@
 <span class="cart-header-title">{{ __('Ma sélection') }}</span>
 <span class="cart-header-icon-wrapper">
     @svg('icon-cart', 'cart-header-icon')
-    <span class="cart-header-count" v-html="cartItemCount"></span>
+    <span class="cart-header-count" v-html="cartItemCount">
+        {{ count($cart_items) }}
+    </span>
 </span>
diff --git a/resources/views/partials/form.blade.php b/resources/views/partials/form.blade.php
index 83d493a..692c10d 100644
--- a/resources/views/partials/form.blade.php
+++ b/resources/views/partials/form.blade.php
@@ -14,60 +14,63 @@
             @if($page->get('form_intro'))
                 <div class="form-info text-navy mb-6">@markdown($page->get('form_intro'))</div>
             @endif
-            <form {!! $gaattrs !!} class="text-navy mailform" action="{{ $action ?? '/ajax/mailform' }}" method="post"
-                  data-confirmation="{{$page->get('form_confirmation')??__('Votre message a bien été envoyé')}}"
+            <form {!! $gaattrs !!}
+                  class="text-navy mailform"
+                  action="{{ $action ?? '/ajax/mailform' }}"
+                  method="post"
+                  data-confirmation="{{ $page->get('form_confirmation') ?? __('Votre message a bien été envoyé') }}"
                   novalidate>
                 @honeypot
-                <input type="hidden" value="{{$page->get('id')}}" name="page">
+                <input type="hidden" value="{{ $page->get('id') }}" name="page">
 
                 {!! $extra_fields ?? '' !!}
 
                 <div class="fields grid">
                     @foreach($page->get('form') as $field)
                         @php
-                            $required=$field['mandatory']?' required':'';
-                            $asx=$field['mandatory']?' *':'';
+                            $required = $field['mandatory'] ? ' required' : '';
+                            $asx = $field['mandatory'] ? ' *' : '';
                         @endphp
                         <label class="form-input">
                             @switch($field['type'])
                                 @case('name')
-                                {{__('Nom')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                             {!! $required !!}  name="name">
+                                    {{ __('Nom')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="name">
                                 @break
 
                                 @case('firstname')
-                                {{__('Prénom')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                {!! $required !!}  name="firstname">
+                                    {{ __('Prénom')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="firstname">
                                 @break
 
                                 @case('company')
-                                {{__('Société')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                 {!! $required !!}  name="company">
+                                    {{ __('Société')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="company">
                                 @break
 
                                 @case('email')
-                                {{__('E-mail')}}{{$asx}} <input class="py-3 mt-3" type="email"
-                                                                {!! $required !!}  name="email">
+                                    {{ __('E-mail')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="email" {!! $required !!}  name="email">
                                 @break
 
                                 @case('ref')
-                                {{__('Référence')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                   {!! $required !!}  name="ref">
+                                    {{ __('Référence')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="ref">
                                 @break
 
                                 @case('sku')
-                                {{__('Numéro de série')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                                         {!! $required !!}  name="sku">
+                                    {{ __('Numéro de série')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="sku">
                                 @break
 
                                 @case('subject')
-                                {{__('Sujet')}}{{$asx}} <input class="py-3 mt-3" type="text"
-                                                               {!! $required !!}  name="subject">
+                                    {{ __('Sujet')}}{{ $asx}}
+                                    <input class="py-3 mt-3" type="text" {!! $required !!}  name="subject">
                                 @break
 
                                 @case('message')
-                                {{__('Message')}}{{$asx}} <textarea class="py-3 textarea mt-3" type="text"
-                                                                    {!! $required !!}  name="message"></textarea>
+                                    {{ __('Message')}}{{ $asx}}
+                                    <textarea class="py-3 textarea mt-3" type="text" {!! $required !!}  name="message"></textarea>
                                 @break
                             @endswitch
                         </label>
@@ -77,11 +80,15 @@
                 <div class="form-endmessage my-6 text-grey-dark text-sm">
                     @markdown($global->get('form_privacy'))
                 </div>
-                <div class="form-footer flex justify-between items-center xs:flex-col-reverse">
-                    <span
-                        class="form-required-legend text-grey-dark xs:self-start xs:mt-5">*{{__('Champs obligatoires')}}</span>
-                    <button type="submit" class="form-submit-button btn btn-custom xs:w-full"
-                            data-sending="{{__('Envoi en cours')}}">{{ $page->get('form_button_text', __('Envoyer')) }}</button>
+                <div class="form-footer flex flex-wrap-reverse justify-between items-center">
+                    <span class="form-required-legend inline-block my-4 mr-3 text-grey-dark xs:self-start xs:mt-5">
+                        *{{ __('Champs obligatoires')}}
+                    </span>
+                    <button type="submit"
+                            class="form-submit-button btn btn-custom xs:w-full"
+                            data-sending="{{ __('Envoi en cours')}}">
+                        {{ $page->get('form_button_text', __('Envoyer')) }}
+                    </button>
                 </div>
             </form>
         </div>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 347e8d6..9d4b275 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -15,6 +15,7 @@
 
         <nav id="menu" class="nav mx-auto flex items-center">
             @include('partials.nav')
+            {{-- Todo: consider inverting the portal so the hidden search form is put in the portal instead of the icon (to avoid loading delay on icon) --}}
             <portal-target name="nav-search-toggle" slim></portal-target>
         </nav>
 
-- 
2.39.5