From d256cce94520424df4f182c472c29332d6ca79ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Tue, 23 Mar 2021 10:18:36 +0100
Subject: [PATCH] home slider picture fix

---
 package.json                                  |   2 +-
 .../js/components/fo/ActuSliderComponent.vue  |   4 +-
 .../components/fo/ArticlesClubComponent.vue   |   1 -
 .../fo/BreederSiteSliderComponent.vue         |  13 +-
 .../components/fo/CartProductsComponent.vue   |   1 -
 .../fo/FavoritesRecipesComponent.vue          |   1 -
 .../js/components/fo/HomeSliderComponent.vue  |  35 ++++-
 .../components/fo/NotificationsComponent.vue  |   1 -
 .../components/fo/ProductsSliderComponent.vue |  11 +-
 resources/sass/front/_sub_header.scss         | 146 ++++++++++++------
 10 files changed, 140 insertions(+), 75 deletions(-)

diff --git a/package.json b/package.json
index c2c51dba..6b741f49 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
         "animate.css": "^3.7.2",
         "detect-element-overflow": "^1.2.0",
         "fibers": "^5.0.0",
-        "hooper": "^0.3.4",
+        "hooper2": "^0.3.6",
         "jquery-devrama-slider-2": "^0.9.7",
         "jquery-mousewheel": "^3.1.13",
         "normalize.css": "^8.0.1",
diff --git a/resources/js/components/fo/ActuSliderComponent.vue b/resources/js/components/fo/ActuSliderComponent.vue
index 20d5470e..bc525968 100644
--- a/resources/js/components/fo/ActuSliderComponent.vue
+++ b/resources/js/components/fo/ActuSliderComponent.vue
@@ -17,8 +17,8 @@
 </template>
 
 <script>
-    import { Hooper, Slide,  Pagination as HooperPagination } from 'hooper';
-    import 'hooper/dist/hooper.css';
+    import { Hooper, Slide,  Pagination as HooperPagination } from 'hooper2';
+    import 'hooper2/dist/hooper.css';
 
     export default {
         components: {
diff --git a/resources/js/components/fo/ArticlesClubComponent.vue b/resources/js/components/fo/ArticlesClubComponent.vue
index c3c7d655..9708c337 100644
--- a/resources/js/components/fo/ArticlesClubComponent.vue
+++ b/resources/js/components/fo/ArticlesClubComponent.vue
@@ -30,7 +30,6 @@
 <script>
     export default {
         mounted() {
-            console.log('ArticlesClubComponent mounted.');
             this.articles = JSON.parse(this.dbarticles);
             this.baseArticles = JSON.parse(this.dbarticles);
             this.categories = JSON.parse(this.dbcategories);
diff --git a/resources/js/components/fo/BreederSiteSliderComponent.vue b/resources/js/components/fo/BreederSiteSliderComponent.vue
index e99e2f2c..4c26c816 100644
--- a/resources/js/components/fo/BreederSiteSliderComponent.vue
+++ b/resources/js/components/fo/BreederSiteSliderComponent.vue
@@ -16,8 +16,8 @@
 </template>
 
 <script>
-    import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper';
-    import 'hooper/dist/hooper.css';
+    import { Hooper, Slide, Navigation as HooperNavigation } from 'hooper2';
+    import 'hooper2/dist/hooper.css';
 
     export default {
         components: {
@@ -26,17 +26,16 @@
             HooperNavigation
         },
         mounted() {
-            console.log('SliderComponent mounted.');
             this.oSlides = JSON.parse(this.slides);
         },
         props: [
             'slides'
         ],
         data(){
-          return {
-              'oSlides': [],
-              'indexSlide': 1
-          }
+            return {
+                'oSlides': [],
+                'indexSlide': 1
+            }
         },
         watch: {
             indexSlide () {
diff --git a/resources/js/components/fo/CartProductsComponent.vue b/resources/js/components/fo/CartProductsComponent.vue
index 43b7a34b..98d6aa50 100644
--- a/resources/js/components/fo/CartProductsComponent.vue
+++ b/resources/js/components/fo/CartProductsComponent.vue
@@ -25,7 +25,6 @@
 <script>
     export default {
         mounted() {
-            console.log('CartProductsComponent mounted.');
             this.products = JSON.parse(this.dbproducts);
         },
         props: [
diff --git a/resources/js/components/fo/FavoritesRecipesComponent.vue b/resources/js/components/fo/FavoritesRecipesComponent.vue
index 47f6ea88..64dc6ae7 100644
--- a/resources/js/components/fo/FavoritesRecipesComponent.vue
+++ b/resources/js/components/fo/FavoritesRecipesComponent.vue
@@ -28,7 +28,6 @@
 <script>
     export default {
         mounted() {
-            console.log('FavoritesRecipesComponent mounted.');
             this.recipes = JSON.parse(this.dbrecipes);
         },
         props: [
diff --git a/resources/js/components/fo/HomeSliderComponent.vue b/resources/js/components/fo/HomeSliderComponent.vue
index e97ed8ce..8f702649 100644
--- a/resources/js/components/fo/HomeSliderComponent.vue
+++ b/resources/js/components/fo/HomeSliderComponent.vue
@@ -1,5 +1,14 @@
 <template>
-    <hooper ref="carousel" style="height: auto;" :infiniteScroll="true" :autoPlay="true" :playSpeed="4000" :transition="800" :wheelControl="false" :mouseDrag="false" :touchDrag="false">
+    <hooper
+        ref="carousel"
+        style="height: auto;"
+        :infiniteScroll="true"
+        :autoPlay="autoplay"
+        :playSpeed="7000"
+        :transition="800"
+        :wheelControl="false"
+        :mouseDrag="false"
+        :touchDrag="false">
         <slide v-for="slide in oSlides" :key="slide.id">
             <div class="content">
                 <div class="text">
@@ -22,8 +31,8 @@
 </template>
 
 <script>
-    import { Hooper, Slide,  Navigation as HooperNavigation } from 'hooper';
-    import 'hooper/dist/hooper.css';
+    import { Hooper, Slide,  Navigation as HooperNavigation } from 'hooper2';
+    import 'hooper2/dist/hooper.css';
 
     export default {
         components: {
@@ -32,20 +41,25 @@
             HooperNavigation
         },
         mounted() {
-            console.log('Component mounted.');
             this.oSlides = JSON.parse(this.slides);
+
+            setTimeout(() => {
+                this.autoplay = false;
+                console.log('setAutoplay')
+            },6000)
         },
         props: [
             'slides'
         ],
         data(){
-          return {
-              'oSlides': []
-          }
+            return {
+                'oSlides': [],
+                autoplay: true
+            }
         },
         methods: {
             slide(direction){
-                if (direction === 'next'){
+                if (direction === 'next') {
                     this.$refs.carousel.slideNext();
                 }else{
                     this.$refs.carousel.slidePrev();
@@ -57,6 +71,7 @@
 </script>
 
 <style lang="scss">
+    @import "../../../sass/_variables.scss";
     .hooper:hover {
         & .hooper-next, .hooper-prev {
             opacity: 0.5;
@@ -85,5 +100,9 @@
         transform: translateY(-50%);
         cursor: pointer;
         transition: opacity .5s ;
+
+        @include max-width($mobile) {
+            opacity: 0.5;
+        }
     }
 </style>
diff --git a/resources/js/components/fo/NotificationsComponent.vue b/resources/js/components/fo/NotificationsComponent.vue
index 06887244..42058929 100644
--- a/resources/js/components/fo/NotificationsComponent.vue
+++ b/resources/js/components/fo/NotificationsComponent.vue
@@ -75,7 +75,6 @@
 <script>
     export default {
         mounted() {
-            console.log('NotificationsComponent mounted.');
             this.notifications = JSON.parse(this.dbnotifications);
             this.baseNotifications = JSON.parse(this.dbnotifications);
         },
diff --git a/resources/js/components/fo/ProductsSliderComponent.vue b/resources/js/components/fo/ProductsSliderComponent.vue
index 1a770fc6..d766f992 100644
--- a/resources/js/components/fo/ProductsSliderComponent.vue
+++ b/resources/js/components/fo/ProductsSliderComponent.vue
@@ -10,8 +10,8 @@
 </template>
 
 <script>
-    import { Hooper, Slide,  Navigation as HooperNavigation } from 'hooper';
-    import 'hooper/dist/hooper.css';
+    import { Hooper, Slide,  Navigation as HooperNavigation } from 'hooper2';
+    import 'hooper2/dist/hooper.css';
 
     export default {
         components: {
@@ -20,16 +20,15 @@
             HooperNavigation
         },
         mounted() {
-            console.log('Component mounted.');
             this.oSlides = JSON.parse(this.slides);
         },
         props: [
             'slides'
         ],
         data(){
-          return {
-              'oSlides': []
-          }
+            return {
+                'oSlides': []
+            }
         }
     }
 </script>
diff --git a/resources/sass/front/_sub_header.scss b/resources/sass/front/_sub_header.scss
index 28697dae..36d65555 100644
--- a/resources/sass/front/_sub_header.scss
+++ b/resources/sass/front/_sub_header.scss
@@ -18,7 +18,7 @@
                 right: 2%;
             }
 
-            @media screen and (max-width: $tablet) {
+            @include max-width($tablet) {
                 right: 50%;
                 transform: translateX(50%);
                 top: 75%;
@@ -111,7 +111,7 @@
             & img {
                 width: 100%;
 
-                @media screen and (max-width: $mobile) {
+                @include max-width($mobile) {
                     height: 100%;
                     width: auto;
                 }
@@ -275,57 +275,109 @@
 
 .sub_header.home {
     & .content {
-        @media screen and (max-width: $tablet) {
-            & .text {
-                top: 10%;
+        & .text {
+            width: 90%;
+            text-align: center;
+            top: 55%;
+            transform: translateX(-50%);
+            left: 50%;
 
-                & .catch {
-                    font-size: 2.8em;
-                }
-
-                & .title {
-                    width: 100%;
-                    font-size: 3em;
-                }
-
-                & .btn {
-                    display: inline;
-                    text-align: center;
-                    font-size: 1.4em;
-                    border-radius: 20px;
-                    padding: 3px 20px 7px;
-                }
+            & .catch {
+                font-size: 2.8em;
             }
-        }
 
-        @media screen and (max-width: $mobile) {
-            & .text {
-                top: 50%;
-                left: 50%;
-                transform: translateX(-50%);
+            & .title {
                 width: 100%;
+                font-size: 3em;
+            }
+
+            & .btn {
+                display: inline;
                 text-align: center;
-
-                & .catch {
-                    font-size: 3.5em;
-                    text-align: center;
-                }
-
-                & .title {
-                    width: 100%;
-                    text-align: center;
-                    font-size: 3.5em;
-                }
-
-                & .btn {
-                    display: inline;
-                    text-align: center;
-                    font-size: 1.4em;
-                    border-radius: 20px;
-                    padding: 3px 20px 7px;
-                }
+                font-size: 1.4em;
+                border-radius: 20px;
+                padding: 3px 20px 7px;
             }
         }
+        & picture {
+            & img {
+                width: 100% !important;
+            }
+        }
+        @include min-width($mobile) {
+            min-height: 15rem;
+            .text {
+                width: 40%;
+                text-align: right;
+                top: 5%;
+                right: 1rem;
+                font-size: 0.8em;
+                transform: inherit;
+                left: inherit;
+            }
+        }
+
+        @include min-width($mobile + 160px) {
+            .text {
+                top: 15%;
+                font-size: 0.85em;
+            }
+        }
+        @include min-width($tablet) {
+            .text {
+                top: 15%;
+                font-size: 0.85em;
+            }
+        }
+        @include min-width($desktop - 100px) {
+            .text {
+                right: 1.2rem;
+                font-size: 1.2em;
+            }
+        }
+        @include min-width($big_screen) {
+            .text {
+                top: 21%;
+                right: 2rem;
+                font-size: 1.4em;
+            }
+        }
+        @include min-width($large_screen) {
+            .text {
+                top: 21%;
+                right: 3rem;
+                font-size: 1.6em;
+            }
+        }
+
+        // @include max-width($mobile) {
+        //     & .text {
+        //         top: 50%;
+        //         left: 50%;
+        //         transform: translateX(-50%);
+        //         width: 100%;
+        //         text-align: center;
+
+        //         & .catch {
+        //             font-size: 3.5em;
+        //             text-align: center;
+        //         }
+
+        //         & .title {
+        //             width: 100%;
+        //             text-align: center;
+        //             font-size: 3.5em;
+        //         }
+
+        //         & .btn {
+        //             display: inline;
+        //             text-align: center;
+        //             font-size: 1.4em;
+        //             border-radius: 20px;
+        //             padding: 3px 20px 7px;
+        //         }
+        //     }
+        // }
     }
 }
 
@@ -395,7 +447,7 @@
         position: relative;
         top: -13px;
 
-        @media screen and (max-width: $mobile) {
+        @include max-width($mobile) {
             max-width: 50%;
         }
     }