Done #3018

diff --git a/app/Http/Controllers/AjaxController.php b/app/Http/Controllers/AjaxController.php
index 66134db81e2986fb3553e1e49b4be63f4efc816d..67b2f84b9f23894634f007bc28f199f2c4f922e7 100644 (file)
--- a/app/Http/Controllers/AjaxController.php
+++ b/app/Http/Controllers/AjaxController.php
@@ -152,9 +152,10 @@ class AjaxController extends CubistFrontController
                     $cart_items[$id] += $quantity;
                 } else {
                     $cart_items[$id] = $quantity;
-                    $needs_update = true;
                 }
                 $ga['add'][$id] = $quantity;
+
+                $needs_update = true;
                 break;
 
             case 'update':

diff --git a/package.json b/package.json
index d5383c78a3fc7feacc7237e6e13c39891940ff25..8226e86fe28f55844360fe708230fe0da65da950 100644 (file)
--- a/package.json
+++ b/package.json
@@ -38,7 +38,5 @@
         "vue-slider-component": "^3.0.40",
         "vue-template-compiler": "^2.6.10"
     },
-    "dependencies": {
-
-    }
+    "dependencies": {}
 }

diff --git a/resources/js/app.js b/resources/js/app.js
index 8bc68f499de955c1fcf58bef2e2b93fcbe8d4df7..6c8f2ae2a31acc33edd66410d9b4a1881c379e7b 100644 (file)
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -137,12 +137,10 @@ function checkScroll() {
     window.headerHeight = 134;
     var scroll = getBodyScrollTop();
     if (scroll > 200) {
-        document.getElementById('site-header').classList.add('minimized');
-        document.getElementById('mobile-menu-icon').classList.add('minimized');
+        document.body.classList.add('header-minimized');
         window.headerHeight = 60;
     } else {
-        document.getElementById('site-header').classList.remove('minimized');
-        document.getElementById('mobile-menu-icon').classList.remove('minimized');
+        document.body.classList.remove('header-minimized');
     }
     document.querySelector('html').style.setProperty('--header-height', window.headerHeight + 'px');
 }

diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
index cb1fd1d8f6089ff0b220fdc3464b2ede2f0e3f20..fdbe8391dde1f40c903342b526891386038b207f 100644 (file)
--- a/resources/js/components/Search.vue
+++ b/resources/js/components/Search.vue
@@ -1,24 +1,29 @@
 <template>
-    <div class="bg-white">
+    <div>
 
-        <!-- Trigger Link that will appear inside the nav portal -->
-        <portal to="nav-search-toggle">
-            <a href="#" id="nav-search-toggle-link" class="text-white hover:text-blue" @click.prevent="toggleVisibility"
-               :class="visible ? 'text-blue' : ''">
-                <slot name="link"></slot>
-            </a>
-        </portal>
+        <a href="#" id="nav-search-toggle-link"
+           class="text-white hover:text-blue"
+           @click.prevent="toggleVisibility"
+           :class="visible ? 'text-blue' : ''">
+            <slot></slot>
+        </a>
 
-        <slide-toggle :active="visible" :duration="300" @open-end="focusField">
-            <div class="header-search-box container py-3">
-                <form :action="endpoint" method="get" class="flex justify-between items-center" @submit="submitForm">
-                    <search-field :placeholder="placeholder" ref="searchInput"></search-field>
-                    <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
-                        <slot name="button"></slot>
-                    </button>
-                </form>
+        <!-- Main search field that appears below the main header -->
+        <portal to="nav-search-bar">
+            <div class="bg-white text-grey-dark">
+                <slide-toggle :active="visible" :duration="300" @open-end="focusField">
+                    <div class="header-search-box container py-3">
+                        <form :action="endpoint" method="get" class="flex justify-between items-center" @submit="submitForm">
+                            <search-field :placeholder="placeholder" ref="searchInput"></search-field>
+                            <button class="ml-4 p-3 -mr-3 appearance-none focus:outline-none focus:bg-grey-100">
+                                <slot name="button"></slot>
+                            </button>
+                        </form>
+                    </div>
+                </slide-toggle>
             </div>
-        </slide-toggle>
+        </portal>
+
     </div>
 </template>
 

diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl
index ef7c77078081fdba5c11f2d57cb91a6ac1e3bd02..fec5bced6f0b0359b097023f69990a875d4ae985 100644 (file)
--- a/resources/styles/components/cart.styl
+++ b/resources/styles/components/cart.styl
@@ -38,12 +38,19 @@
 
     &-title
       background-color: #314D6E
-      height: 134px // Todo: handle this when header is smaller (on scroll down)
+      height: var(--header-height)
+      transition: height var(--transition-duration)
 
     &-content
-      max-height: calc(100vh - 134px - 120px)
+      // Fill available height if needed. Footer of popout is 139px tall
+      max-height: calc(100vh - var(--header-height) - 139px)
+      transition: max-height var(--transition-duration)
       overflow-y: auto
 
+    &-footer
+      @apply bg-grey-100 p-10
+
+
 // Show cart popout when .cart-open is applied to body
 .cart-open
   .cart-header-popout

diff --git a/resources/styles/components/header.styl b/resources/styles/components/header.styl
index 6d6c2b26c6e231980180243dbd107e951f18ea2b..9c1f44694e5394164710d187a1c254bb775c5af0 100644 (file)
--- a/resources/styles/components/header.styl
+++ b/resources/styles/components/header.styl
@@ -1,30 +1,33 @@
+$header-height = 134px
+
 #header-placeholder
-  height 134px
+  height: $header-height
   .template-home &
     background-color:theme('colors.navy')
 
 .site-header
-  --transition-duration 500ms
+  --transition-duration: 500ms
+
   @apply bg-navy text-white text-lg font-display font-medium antialiased fixed top-0
-  transition height var(--transition-duration)
-  width 100%
-  z-index 100
-  height 134px
+  transition: height var(--transition-duration)
+  width: 100%
+  z-index: 100
+  height: $header-height
 
   .container
-    transition padding-top var(--transition-duration), padding-bottom var(--transition-duration)
+    transition: padding-top var(--transition-duration), padding-bottom var(--transition-duration)
 
   .nav
     height: 67px
-    transition height var(--transition-duration)
+    transition: height var(--transition-duration)
 
   .logo
-    height 70px
-    transition height var(--transition-duration)
+    height: 70px
+    transition: height var(--transition-duration)
 
     img
-      height 70px
-      transition height var(--transition-duration)
+      height: 70px
+      transition: height var(--transition-duration)
 
   +below($breakpoint-menu)
     .logo
@@ -33,7 +36,8 @@
     .nav
       display: none
 
-  &.minimized
+  //=== Mini header
+  .header-minimized &
     height: 60px
 
     .container
@@ -48,4 +52,3 @@
 
       img
         height: 44px
-

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 19fc2a13f309bee9c69a86d779cbb64181f8c132..84abc7db6086975f4ed3af282a7fb98086140880 100644 (file)
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -16,8 +16,19 @@
 
         <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>
+
+            @if(config('features.search'))
+                <search placeholder="{{ __('Rechercher ...') }}" endpoint="{{ $nav->getHrefByName('recherche') }}">
+                    <template v-slot:button>
+                        @svg('search', 'fill-current text-navy w-6 h-6 hover:text-blue')
+                    </template>
+
+                    {{-- Nav search link (in default slot so there's no flicker as Vue initialises) --}}
+                    @svg('search')
+
+                </search>
+            @endif
+
         </nav>
 
         @if (config('features.quote'))
@@ -28,7 +39,7 @@
             </a>
 
             <div class="cart-header-popout">
-                <div class="cart-header-popout-title flex justify-between items-center px-1v py-1v">
+                <div class="cart-header-popout-title flex justify-between items-center px-1v">
                     <span>
                         {{ __('Ma sélection') }}
                     </span>
@@ -43,7 +54,7 @@
                         {{ __("Vous n'avez encore rien sélectionné") }}
                     </div>
                 </div>
-                <div class="cart-header-popout-footer bg-grey-100 p-1v" v-if="cartItemCount > 0">
+                <div class="cart-header-popout-footer" v-if="cartItemCount > 0">
                     <link-button class="block text-center" :href="$nav->getHrefByName('cart')">
                         {{ __('Obtenir un devis') }}
                     </link-button>
@@ -53,15 +64,6 @@
 
     </div>
 
-</header>
+    <portal-target name="nav-search-bar" slim></portal-target>
 
-@if(config('features.search'))
-    <search placeholder="{{ __('Rechercher ...') }}" endpoint="{{ $nav->getHrefByName('recherche') }}">
-        <template v-slot:link>
-            @svg('search')
-        </template>
-        <template v-slot:button>
-            @svg('search', 'fill-current text-navy w-6 h-6 hover:text-blue')
-        </template>
-    </search>
-@endif
+</header>

diff --git a/yarn.lock b/yarn.lock
index 247ce110a87ef1e6dd6a39f73ff8afe771228b88..1d4a81df6a06ef1d73cc578fa52de03953f36447 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -5248,7 +5248,7 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-popper.js@^1.12:
+popper.js@^1.12, popper.js@^1.14.7:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
   integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
@@ -6974,6 +6974,13 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tippy.js@^4.3.5:
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-4.3.5.tgz#882bff8d92f09bb0546d2826d5668c0560006f54"
+  integrity sha512-NDq3efte8nGK6BOJ1dDN1/WelAwfmh3UtIYXXck6+SxLzbIQNZE/cmRSnwScZ/FyiKdIcvFHvYUgqmoGx8CcyA==
+  dependencies:
+    popper.js "^1.14.7"
+
 to-array@0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/to-array/-/to-array-0.1.4.tgz#17e6c11f73dd4f3d74cda7a4ff3238e9ad9bf890"