From 0f6e2c38eea1b111ff891d6847dd47e49b3e6655 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Mon, 9 Sep 2019 17:47:14 +0200 Subject: [PATCH] Done #3018 --- app/Http/Controllers/AjaxController.php | 3 +- package.json | 4 +-- resources/js/app.js | 6 ++-- resources/js/components/Search.vue | 39 +++++++++++++---------- resources/styles/components/cart.styl | 11 +++++-- resources/styles/components/header.styl | 31 ++++++++++-------- resources/views/partials/header.blade.php | 32 ++++++++++--------- yarn.lock | 9 +++++- 8 files changed, 78 insertions(+), 57 deletions(-) diff --git a/app/Http/Controllers/AjaxController.php b/app/Http/Controllers/AjaxController.php index 66134db..67b2f84 100644 --- 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 d5383c7..8226e86 100644 --- 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 8bc68f4..6c8f2ae 100644 --- 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 cb1fd1d..fdbe839 100644 --- a/resources/js/components/Search.vue +++ b/resources/js/components/Search.vue @@ -1,24 +1,29 @@ diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl index ef7c770..fec5bce 100644 --- 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 6d6c2b2..9c1f446 100644 --- 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 19fc2a1..84abc7d 100644 --- a/resources/views/partials/header.blade.php +++ b/resources/views/partials/header.blade.php @@ -16,8 +16,19 @@ @if (config('features.quote')) @@ -28,7 +39,7 @@
-
+
{{ __('Ma sélection') }} @@ -43,7 +54,7 @@ {{ __("Vous n'avez encore rien sélectionné") }}
-