From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 5 Sep 2019 15:40:31 +0000 (+0200)
Subject: fix #3003 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=37dd8b43d9a0e641b721e9f8e087f669b40ad391;p=pmi.git

fix #3003 @1.5
---

diff --git a/resources/js/app.js b/resources/js/app.js
index 0af809c..261a0ca 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -129,10 +129,11 @@ window.addEventListener('scroll', function () {
 
 function checkScroll() {
     window.headerHeight = 134;
-    if (document.documentElement.scrollTop > 200) {
+    var scroll = document.documentElement.scrollTop;
+    if (scroll > 200) {
         document.getElementById('site-header').classList.add('minimized');
         window.headerHeight = 60;
-    } else {
+    } else if (scroll < 100) {
         document.getElementById('site-header').classList.remove('minimized');
     }
 }
diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index 8d2ce38..6206000 100644
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -3,7 +3,7 @@
     <div class="flex relative items-start sm:block">
 
         <!-- Filters column -->
-        <div class="products-filters-wrapper sticky sm:static top-0 mr-1v sm:mr-0 pt-4 whitespace-no-wrap">
+        <div class="products-filters-wrapper sticky sm:static top-60 mr-1v sm:mr-0 pt-4 whitespace-no-wrap">
 
             <!-- Filters panel -->
             <div class="bg-white p-4">
@@ -54,7 +54,7 @@
         <div class="products-grid flex-grow">
 
             <!-- Grid summary header -->
-            <div class="products-grid-summary sticky sm:static top-0 z-10 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
+            <div class="products-grid-summary sticky sm:static top-60 z-10 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
 
                 <!-- Active filters -->
                 <div class="products-grid-active-filters flex-grow text-sm">
diff --git a/resources/styles/components/header.styl b/resources/styles/components/header.styl
index 222ac1e..6bbe279 100644
--- a/resources/styles/components/header.styl
+++ b/resources/styles/components/header.styl
@@ -1,14 +1,14 @@
 #header-placeholder
   height 134px
+  .template-home &
+    background-color:theme('colors.navy')
 
 .site-header
   --transition-duration 500ms
-
-  @apply bg-navy text-white text-lg font-display font-medium antialiased
-  position fixed
+  @apply bg-navy text-white text-lg font-display font-medium antialiased sticky top-0
   transition height var(--transition-duration)
   width 100%
-  z-index 10
+  z-index 100
   height 134px
 
   .container
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 347e8d6..4260612 100644
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -1,5 +1,4 @@
 @include('partials.nav-mobile')
-<div id="header-placeholder"></div>
 <header id="site-header" class="site-header">
     <div class="container flex items-center py-8 relative z-30">
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 331b67a..304dfb0 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,9 @@ module.exports = {
             padding: {
                 '100p': '100%', // Used for proportional padding to make a square
                 '25p':'25%',
+            },
+            inset:{
+                '60':'60px'
             }
         },
     },