diff --git a/app/Http/Controllers/Bo/GammesController.php b/app/Http/Controllers/Bo/GammesController.php index 6faae6a..5f2a1f0 100644 --- a/app/Http/Controllers/Bo/GammesController.php +++ b/app/Http/Controllers/Bo/GammesController.php @@ -61,7 +61,7 @@ class GammesController extends Controller if (!$gamme->saveOrFail()) { return redirect()->route('bo.gammes.edit', $gamme->id)->with('error', 'L\'actualité n\'a pas été créee'); } - return redirect()->route('bo.gammes.edit', $gamme->id)->with('success', 'Actualité créée !'); + return redirect()->route('bo.gammes.edit', $gamme->id)->with('success', 'Gamme créée !'); } /** diff --git a/app/Http/Controllers/Bo/ProductsController.php b/app/Http/Controllers/Bo/ProductsController.php index b547412..e280f86 100644 --- a/app/Http/Controllers/Bo/ProductsController.php +++ b/app/Http/Controllers/Bo/ProductsController.php @@ -197,8 +197,10 @@ class ProductsController extends Controller if ($uploadfile) { $plus->url = Utils::storeImage($uploadfile, $product->getTable()); } else { - //reprise de l'ancienne valeur - $plus->url = $dbplusproduit[$plus->id]->url; + if (isset($dbplusproduit[$plus->id])) { + //reprise de l'ancienne valeur + $plus->url = $dbplusproduit[$plus->id]->url; + } } } //encodage avant save diff --git a/app/Http/Requests/StorePostRequest.php b/app/Http/Requests/StorePostRequest.php index 4a5b20f..3da7dd9 100644 --- a/app/Http/Requests/StorePostRequest.php +++ b/app/Http/Requests/StorePostRequest.php @@ -44,8 +44,7 @@ class StorePostRequest extends FormRequest 'date_start' => [ 'required', 'date_format:Y-m-d H:i:s', - 'before:' . Carbon::now()->parse('2037-12-31'), - 'after:' . Carbon::now()->format('Y-m-d') + 'before:' . Carbon::now()->parse('2037-12-31') ], 'date_end' => [ 'required', diff --git a/app/Http/Requests/StoreSlideRequest.php b/app/Http/Requests/StoreSlideRequest.php index cc0bbcf..8f335b0 100644 --- a/app/Http/Requests/StoreSlideRequest.php +++ b/app/Http/Requests/StoreSlideRequest.php @@ -50,8 +50,7 @@ class StoreSlideRequest extends FormRequest 'date_start' => [ 'nullable', 'date_format:Y-m-d H:i:s', - 'before:' . Carbon::now()->parse('2037-12-31'), - 'after:' . Carbon::now()->format('Y-m-d') + 'before:' . Carbon::now()->parse('2037-12-31') ], 'date_end' => [ 'nullable', diff --git a/app/Models/Gamme.php b/app/Models/Gamme.php index 07c1e8d..07752f5 100644 --- a/app/Models/Gamme.php +++ b/app/Models/Gamme.php @@ -35,14 +35,13 @@ class Gamme extends Model 'alt_text_banner', ]; - protected static function boot() { static::creating(function (Gamme $gamme) { - if (is_a($gamme->picture,"SplFileInfo")) { + if (is_a($gamme->picture, "SplFileInfo")) { $gamme->picture = Utils::storeImage($gamme->picture, $gamme->getTable()); } - if (is_a($gamme->banner,"SplFileInfo")) { + if (is_a($gamme->banner, "SplFileInfo")) { $gamme->banner = Utils::storeImage($gamme->banner, $gamme->getTable()); } @@ -53,10 +52,10 @@ class Gamme extends Model }); static::updating(function (Gamme $gamme) { - if (is_a($gamme->picture,"SplFileInfo")) { + if (is_a($gamme->picture, "SplFileInfo")) { $gamme->picture = Utils::storeImage($gamme->picture, $gamme->getTable()); } - if (is_a($gamme->banner,"SplFileInfo")) { + if (is_a($gamme->banner, "SplFileInfo")) { $gamme->banner = Utils::storeImage($gamme->banner, $gamme->getTable()); } if ($gamme->parent_gamme_id === null) { @@ -118,7 +117,7 @@ class Gamme extends Model } list($r, $g, $b) = array_map("hexdec", str_split($color, (strlen($color) / 3))); - return "rgba($r,$g,$b,.8)"; + return "rgba($r,$g,$b,1)"; } public function childGammes() diff --git a/public/assets/images/picto_halal.png b/public/assets/images/picto_halal.png new file mode 100644 index 0000000..53f2329 Binary files /dev/null and b/public/assets/images/picto_halal.png differ diff --git a/public/css/preload-front.css b/public/css/preload-front.css index bc9937f..282d163 100644 --- a/public/css/preload-front.css +++ b/public/css/preload-front.css @@ -4176,9 +4176,9 @@ img{ } #search{ - width:28px; - height:28px; - margin-left:25px; + width:24px; + height:24px; + margin-left:15px; } .product ul.more li{ @@ -4193,6 +4193,25 @@ img{ top:30px; } +.product .img-bloc{ + position:relative; +} +.product .img-bloc::after{ + content:""; + display:none; + background-image:url(/assets/images/picto_halal.png?5690b4b09d272bb18d472947f3baefc6); + background-size:contain; + background-repeat:no-repeat; + position:absolute; + right:0; + bottom:0; + width:25%; + height:25%; +} +.product .img-bloc.view-halal::after{ + display:block; +} + ul.more{ margin-top:50px; } @@ -4225,10 +4244,13 @@ ul.more li .label img{ ul.infos{ display:flex; + flex-direction:column; justify-content:center; + align-items:center; } ul.infos li{ - justify-content:center; + width:110px; + padding:10px; text-align:center; color:#222f5c; font-family:"barlow-bold", arial, sans-serif; @@ -4261,7 +4283,19 @@ ul.infos span{ bottom:0; } +@media screen and (min-width: 480px){ + ul.infos{ + flex-direction:row; + align-items:initial; + } +} @media screen and (min-width: 800px){ + #search{ + width:28px; + height:28px; + margin-left:25px; + } + main{ padding-top:100px; } @@ -4287,10 +4321,16 @@ ul.infos span{ } .container{ - padding-top:60px; - padding-bottom:60px; + padding-top:30px; + padding-bottom:30px; } +@media screen and (min-width: 768px){ + .container{ + padding-top:60px; + padding-bottom:60px; + } +} @media screen and (min-width: 1200px){ .wrapper, .wrapper-m{ @@ -4363,6 +4403,9 @@ ul.infos span{ .is-flex.space-between{ justify-content:space-between; } +.is-flex.flex-center{ + justify-content:center; +} .is-flex.flex-col{ flex-direction:column; } @@ -4431,7 +4474,7 @@ ul.infos span{ margin-left:35px; } } -@media screen and (max-width: 799px){ +@media screen and (max-width: 1024px){ .is-flex{ flex-direction:column; } @@ -4450,7 +4493,8 @@ p{ } h1, -.page-subtitle{ +.page-subtitle, +.header-title{ margin-bottom:25px; } @@ -4466,7 +4510,7 @@ h1, font-size:38px; } -h1:not(.maintitle):after, +.header-title:after, .sectiontitle:after, .page-subtitle:after{ content:""; @@ -4481,6 +4525,10 @@ h1:not(.maintitle):after, background-color:#fccf1d; } +.header-title h1{ + margin-bottom:0; +} + h1.blue-line:not(.maintitle):after, .sectiontitle.blue-line:after, .page-subtitle.blue-line:after{ @@ -4511,6 +4559,7 @@ h1:not(.maintitle){ .mascotte:before{ content:url(/assets/images/coq.png?2c2ffbd44b298f35a5b6247e137d2593); + display:none; position:absolute; left:-450px; bottom:0; @@ -4538,6 +4587,11 @@ h3.product-card__title{ font-family:"cocon-regular", arial, sans-serif; } +@media screen and (min-width: 1024px){ + .mascotte:before{ + display:block; + } +} @media screen and (min-width: 800px){ h1:not(.title_page), .page-subtitle, @@ -4678,6 +4732,9 @@ h3:not(.item__title, .product-card__title){ .site-header nav a:hover{ color:#ff0400; } +.site-header nav a.menu__item--current{ + color:#ff0400; +} .site-header .traduction{ display:flex; } @@ -4685,6 +4742,7 @@ h3:not(.item__title, .product-card__title){ margin-right:15px; } .site-header .traduction li a{ + font-size:14px; color:#222f5c; text-transform:uppercase; text-decoration:none; @@ -4695,8 +4753,17 @@ h3:not(.item__title, .product-card__title){ .site-header .traduction li:last-of-type{ margin-right:0; } +.site-header.blue-bg .traduction li a{ + color:#fccf1d; +} +.site-header.blue-bg .traduction li.current a{ + color:#ff0400; +} @media screen and (min-width: 800px){ + .site-header .traduction li a{ + font-size:18px; + } .site-header .wrapper{ justify-content:space-between; height:100px; @@ -5228,7 +5295,7 @@ input[type=text]{ .gamme-card{ display:flex; position:relative; - height:375px; + height:300px; margin-bottom:20px; overflow:hidden; } @@ -5258,6 +5325,11 @@ input[type=text]{ transition:bottom 0.4s; } +.product-card > img{ + -o-object-fit:contain; + object-fit:contain; +} + .product-card .product-card__title, .product-card a{ position:absolute; @@ -5301,6 +5373,7 @@ input[type=text]{ color:#fff; font-size:30px; font-family:"barlow-bold", arial, sans-serif; + padding-bottom:50px; } .gamme-card:hover .overlay{ bottom:50px; @@ -5311,7 +5384,7 @@ input[type=text]{ } #list .title{ color:#fff; - font-size:calc(18px * 3.25); + font-size:calc(18px * 2); } #list .is-flex{ margin-bottom:60px; @@ -5366,6 +5439,10 @@ input[type=text]{ } @media (min-width: 769px){ + #list .title{ + font-size:calc(18px * 3.25); + } + .product-card{ width:32%; max-width:32%; @@ -5953,6 +6030,7 @@ input[type=text]{ } .jumbotron .maintitle{ position:absolute; + max-width:100%; color:#fff; text-align:center; text-shadow:0 2px 8px rgba(12, 20, 23, 0.6); @@ -6006,7 +6084,7 @@ input[type=text]{ align-items:center; flex:1; margin-right:60px; - transition:transform 0.2s; + transition:transform 0.7s; } #products .product-item:last-child{ margin-right:0; @@ -6021,11 +6099,17 @@ input[type=text]{ margin-top:20px; } +#product-food .sectiontitle:after{ + content:""; + background-color:#0c1417; +} + #values .sectiontitle:after{ content:""; background-color:#0c1417; } -#values .sectiontitle.white-line:after{ +#values .sectiontitle.white-line:after, +#values .header-title.white-line:after{ background-color:white; } #values > img{ @@ -6049,6 +6133,7 @@ input[type=text]{ justify-content:center; align-items:center; flex:1; + padding:10px; font-family:"barlow-bold", arial, sans-serif; } #values .values-list .item img{ @@ -6088,6 +6173,7 @@ input[type=text]{ } .cuisto{ + display:none; position:absolute; left:0; top:0; @@ -6289,6 +6375,10 @@ input[type=text]{ margin-top:50px; } + .desk-mb-50{ + margin-bottom:50px !important; + } + .desk-mb-80{ margin-bottom:80px !important; } @@ -6320,6 +6410,11 @@ input[type=text]{ margin-top:-100px; } } +@media screen and (min-width: 1024px){ + .cuisto{ + display:block; + } +} @media screen and (min-width: 1200px){ .best span:first-of-type{ font-size:90px; @@ -6330,7 +6425,7 @@ input[type=text]{ } @media screen and (max-width: 799px){ .jumbotron .maintitle{ - font-size:calc(18px * 1.8); + font-size:calc(18px * 1.6); } .blue > .menu .menu__item a{ diff --git a/public/favicon.ico b/public/favicon.ico index 80585cc..e4884a5 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/js/preload-front.js b/public/js/preload-front.js index 2b99e2a..8de3e91 100644 --- a/public/js/preload-front.js +++ b/public/js/preload-front.js @@ -337,26 +337,20 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_collections_for_each_js__WEBPACK_IMPORTED_MODULE_1__); -// let isPass = false; -// let heightOfsset = 0; -// let heightElt = 0; -var app = { - init: function init() { - window.onscroll = function () { - app.scrollFunction(); - }; - app.scroll(); - }, - scroll: function scroll() { - document.getElementById("backtotop").addEventListener("click", function () { - window.scrollTo({ - top: 0, - behavior: "smooth" - }); - }); - }, - scrollFunction: function scrollFunction() { +function docReady(fn) { + // see if DOM is already available + if (document.readyState === "complete" || document.readyState === "interactive") { + // call on next available tick + setTimeout(fn, 1); + } else { + document.addEventListener("DOMContentLoaded", fn); + } +} + +docReady(function () { + // DOM is loaded and ready for manipulation here + window.onscroll = function () { var imgZoom = document.querySelectorAll('.img-zoom'); var index = 0; @@ -373,41 +367,57 @@ var app = { imgZoom[index].classList.remove('zoomed'); } } - } -}; // FONCTION PERMETTANT DE FAIRE UN EFFET ANIMATION AU DEFILEMENT + }; -var ratio = 0.1; // 10% du div revelé pour rendre visible + document.getElementById("backtotop").addEventListener("click", function () { + window.scrollTo({ + top: 0, + behavior: "smooth" + }); + }); + var eltsTitle = document.getElementsByClassName("menu__link"); -var options = { - root: null, - // Zone d'affichage : null = le viewport - rootMargin: "0px", - threshold: ratio -}; -var animArray = ["bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat", "backInDown", "backInLeft", "backInRight", "backInUp", "backOutDown", "backOutLeft", "backOutRight", "backOutUp", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "jackInTheBox", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp", "slideInDown", "slideInLeft", "slideInRight", "slideInUp", "slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"]; -/** - * - * @param {IntersectionObserverEntry[]} entries - * @param {IntersectionObserver} observer - */ + for (var ii = 0; ii < eltsTitle.length; ii++) { + // eltsTitle[ii].classList.remove('red-color'); + eltsTitle[ii].addEventListener("click", function () { + this.classList.add('red-color'); + }); + } // FONCTION PERMETTANT DE FAIRE UN EFFET ANIMATION AU DEFILEMENT -var handleIntersect = function handleIntersect(entries, observer) { - entries.forEach(function (entry) { - if (entry.intersectionRatio > ratio) { - for (var i = 0; i < animArray.length; i++) { - if (entry.target.classList.contains(animArray[i])) { - entry.target.classList.add("animate__" + animArray[i]); - entry.target.classList.add("reveal-visible"); - observer.unobserve(entry.target); + + var ratio = 0.1; // 10% du div revelé pour rendre visible + + var options = { + root: null, + // Zone d'affichage : null = le viewport + rootMargin: "0px", + threshold: ratio + }; + var animArray = ["bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat", "backInDown", "backInLeft", "backInRight", "backInUp", "backOutDown", "backOutLeft", "backOutRight", "backOutUp", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "jackInTheBox", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp", "slideInDown", "slideInLeft", "slideInRight", "slideInUp", "slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"]; + /** + * + * @param {IntersectionObserverEntry[]} entries + * @param {IntersectionObserver} observer + */ + + var handleIntersect = function handleIntersect(entries, observer) { + entries.forEach(function (entry) { + if (entry.intersectionRatio > ratio) { + for (var i = 0; i < animArray.length; i++) { + if (entry.target.classList.contains(animArray[i])) { + entry.target.classList.add("animate__" + animArray[i]); + entry.target.classList.add("reveal-visible"); + observer.unobserve(entry.target); + } } } - } - }); -}; + }); + }; -var observer = new IntersectionObserver(handleIntersect, options); -document.querySelectorAll(".animate__animated").forEach(function (r) { - observer.observe(r); + var observer = new IntersectionObserver(handleIntersect, options); + document.querySelectorAll(".animate__animated").forEach(function (r) { + observer.observe(r); + }); }); /***/ }), diff --git a/resources/assets/images/picto_halal.png b/resources/assets/images/picto_halal.png new file mode 100644 index 0000000..53f2329 Binary files /dev/null and b/resources/assets/images/picto_halal.png differ diff --git a/resources/js/frontend/custom.js b/resources/js/frontend/custom.js index 38aa160..3b47c39 100644 --- a/resources/js/frontend/custom.js +++ b/resources/js/frontend/custom.js @@ -1,29 +1,17 @@ -// let isPass = false; -// let heightOfsset = 0; -// let heightElt = 0; +function docReady(fn) { + // see if DOM is already available + if (document.readyState === "complete" || document.readyState === "interactive") { + // call on next available tick + setTimeout(fn, 1); + } else { + document.addEventListener("DOMContentLoaded", fn); + } +} -var app = { - init: () => { - window.onscroll = function () { - app.scrollFunction(); - }; +docReady(function () { + // DOM is loaded and ready for manipulation here - app.scroll(); - }, - - scroll: () => { - - document - .getElementById("backtotop") - .addEventListener("click", function () { - window.scrollTo({ - top: 0, - behavior: "smooth", - }); - }); - }, - - scrollFunction: () => { + window.onscroll = function () { let imgZoom = document.querySelectorAll('.img-zoom'); let index = 0; if ( @@ -40,134 +28,151 @@ var app = { imgZoom[index].classList.remove('zoomed'); } } - }, -}; + }; -// FONCTION PERMETTANT DE FAIRE UN EFFET ANIMATION AU DEFILEMENT -const ratio = 0.1; // 10% du div revelé pour rendre visible -const options = { - root: null, // Zone d'affichage : null = le viewport - rootMargin: "0px", - threshold: ratio, -}; -var animArray = [ - "bounce", - "flash", - "pulse", - "rubberBand", - "shakeX", - "shakeY", - "headShake", - "swing", - "tada", - "wobble", - "jello", - "heartBeat", - "backInDown", - "backInLeft", - "backInRight", - "backInUp", - "backOutDown", - "backOutLeft", - "backOutRight", - "backOutUp", - "bounceIn", - "bounceInDown", - "bounceInLeft", - "bounceInRight", - "bounceInUp", - "bounceOut", - "bounceOutDown", - "bounceOutLeft", - "bounceOutRight", - "bounceOutUp", - "fadeIn", - "fadeInDown", - "fadeInDownBig", - "fadeInLeft", - "fadeInLeftBig", - "fadeInRight", - "fadeInRightBig", - "fadeInUp", - "fadeInUpBig", - "fadeInTopLeft", - "fadeInTopRight", - "fadeInBottomLeft", - "fadeInBottomRight", - "fadeOut", - "fadeOutDown", - "fadeOutDownBig", - "fadeOutLeft", - "fadeOutLeftBig", - "fadeOutRight", - "fadeOutRightBig", - "fadeOutUp", - "fadeOutUpBig", - "fadeOutTopLeft", - "fadeOutTopRight", - "fadeOutBottomRight", - "fadeOutBottomLeft", - "flip", - "flipInX", - "flipInY", - "flipOutX", - "flipOutY", - "lightSpeedInRight", - "lightSpeedInLeft", - "lightSpeedOutRight", - "lightSpeedOutLeft", - "rotateIn", - "rotateInDownLeft", - "rotateInDownRight", - "rotateInUpLeft", - "rotateInUpRight", - "rotateOut", - "rotateOutDownLeft", - "rotateOutDownRight", - "rotateOutUpLeft", - "rotateOutUpRight", - "hinge", - "jackInTheBox", - "rollIn", - "rollOut", - "zoomIn", - "zoomInDown", - "zoomInLeft", - "zoomInRight", - "zoomInUp", - "zoomOut", - "zoomOutDown", - "zoomOutLeft", - "zoomOutRight", - "zoomOutUp", - "slideInDown", - "slideInLeft", - "slideInRight", - "slideInUp", - "slideOutDown", - "slideOutLeft", - "slideOutRight", - "slideOutUp", -]; -/** - * - * @param {IntersectionObserverEntry[]} entries - * @param {IntersectionObserver} observer - */ -const handleIntersect = function (entries, observer) { - entries.forEach(function (entry) { - if (entry.intersectionRatio > ratio) { - for (var i = 0; i < animArray.length; i++) { - if (entry.target.classList.contains(animArray[i])) { - entry.target.classList.add("animate__" + animArray[i]); - entry.target.classList.add("reveal-visible"); - observer.unobserve(entry.target); + document + .getElementById("backtotop") + .addEventListener("click", function () { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }); + + let eltsTitle = document.getElementsByClassName("menu__link"); + for (let ii = 0; ii < eltsTitle.length; ii++) { + // eltsTitle[ii].classList.remove('red-color'); + eltsTitle[ii].addEventListener("click", function () { + this.classList.add('red-color'); + }); + } + + // FONCTION PERMETTANT DE FAIRE UN EFFET ANIMATION AU DEFILEMENT + const ratio = 0.1; // 10% du div revelé pour rendre visible + const options = { + root: null, // Zone d'affichage : null = le viewport + rootMargin: "0px", + threshold: ratio, + }; + var animArray = [ + "bounce", + "flash", + "pulse", + "rubberBand", + "shakeX", + "shakeY", + "headShake", + "swing", + "tada", + "wobble", + "jello", + "heartBeat", + "backInDown", + "backInLeft", + "backInRight", + "backInUp", + "backOutDown", + "backOutLeft", + "backOutRight", + "backOutUp", + "bounceIn", + "bounceInDown", + "bounceInLeft", + "bounceInRight", + "bounceInUp", + "bounceOut", + "bounceOutDown", + "bounceOutLeft", + "bounceOutRight", + "bounceOutUp", + "fadeIn", + "fadeInDown", + "fadeInDownBig", + "fadeInLeft", + "fadeInLeftBig", + "fadeInRight", + "fadeInRightBig", + "fadeInUp", + "fadeInUpBig", + "fadeInTopLeft", + "fadeInTopRight", + "fadeInBottomLeft", + "fadeInBottomRight", + "fadeOut", + "fadeOutDown", + "fadeOutDownBig", + "fadeOutLeft", + "fadeOutLeftBig", + "fadeOutRight", + "fadeOutRightBig", + "fadeOutUp", + "fadeOutUpBig", + "fadeOutTopLeft", + "fadeOutTopRight", + "fadeOutBottomRight", + "fadeOutBottomLeft", + "flip", + "flipInX", + "flipInY", + "flipOutX", + "flipOutY", + "lightSpeedInRight", + "lightSpeedInLeft", + "lightSpeedOutRight", + "lightSpeedOutLeft", + "rotateIn", + "rotateInDownLeft", + "rotateInDownRight", + "rotateInUpLeft", + "rotateInUpRight", + "rotateOut", + "rotateOutDownLeft", + "rotateOutDownRight", + "rotateOutUpLeft", + "rotateOutUpRight", + "hinge", + "jackInTheBox", + "rollIn", + "rollOut", + "zoomIn", + "zoomInDown", + "zoomInLeft", + "zoomInRight", + "zoomInUp", + "zoomOut", + "zoomOutDown", + "zoomOutLeft", + "zoomOutRight", + "zoomOutUp", + "slideInDown", + "slideInLeft", + "slideInRight", + "slideInUp", + "slideOutDown", + "slideOutLeft", + "slideOutRight", + "slideOutUp", + ]; + /** + * + * @param {IntersectionObserverEntry[]} entries + * @param {IntersectionObserver} observer + */ + const handleIntersect = function (entries, observer) { + entries.forEach(function (entry) { + if (entry.intersectionRatio > ratio) { + for (var i = 0; i < animArray.length; i++) { + if (entry.target.classList.contains(animArray[i])) { + entry.target.classList.add("animate__" + animArray[i]); + entry.target.classList.add("reveal-visible"); + observer.unobserve(entry.target); + } } } - } + }); + }; + const observer = new IntersectionObserver(handleIntersect, options); + document.querySelectorAll(".animate__animated").forEach(function (r) { + observer.observe(r); }); -}; -const observer = new IntersectionObserver(handleIntersect, options); -document.querySelectorAll(".animate__animated").forEach(function (r) { - observer.observe(r); }); diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss index b7422b6..014452d 100644 --- a/resources/sass/_variables.scss +++ b/resources/sass/_variables.scss @@ -5,7 +5,7 @@ $topNavHeight: 3rem; $body-bg: #f8fafc; // Typography -$font-family-sans-serif: 'Nunito', sans-serif; +$font-family-sans-serif: "Nunito", sans-serif; $font-size-base: 0.9rem; $line-height-base: 1.6; diff --git a/resources/sass/frontend/_custom.scss b/resources/sass/frontend/_custom.scss index be7dfc2..cf3f288 100644 --- a/resources/sass/frontend/_custom.scss +++ b/resources/sass/frontend/_custom.scss @@ -5,6 +5,7 @@ justify-content: center; .maintitle { position: absolute; + max-width: 100%; color: $color-light; text-align: center; text-shadow: 0 2px 8px rgba($color-dark, 0.6); @@ -58,7 +59,7 @@ align-items: center; flex: 1; margin-right: 60px; - transition: transform 0.2s; /* Animation */ + transition: transform 0.7s; /* Animation */ &:last-child { margin-right: 0; @@ -74,13 +75,19 @@ margin-top: 20px; } } - +#product-food { + .sectiontitle:after { + content: ""; + background-color: $color-dark; + } +} #values { .sectiontitle:after { content: ""; background-color: $color-dark; } - .sectiontitle.white-line:after { + .sectiontitle.white-line:after, + .header-title.white-line:after { background-color: white; } > img { @@ -103,7 +110,9 @@ justify-content: center; align-items: center; flex: 1; + padding: 10px; font-family: $fontbarlow-bold; + img { width: 70px; height: 70px; @@ -144,6 +153,7 @@ } .cuisto { + display: none; position: absolute; left: 0; top: 0; @@ -372,6 +382,9 @@ .desk-mt50 { margin-top: 50px; } + .desk-mb-50 { + margin-bottom: 50px !important; + } .desk-mb-80 { margin-bottom: 80px !important; } @@ -402,6 +415,12 @@ } } +@media screen and (min-width: 1024px) { + .cuisto { + display: block; + } +} + @media screen and (min-width: 1200px) { .best { span:first-of-type { @@ -415,7 +434,7 @@ @media screen and (max-width: 799px) { .jumbotron .maintitle { - font-size: calc(#{$globalfont} * 1.8); + font-size: calc(#{$globalfont} * 1.6); } .blue { > .menu .menu__item a { diff --git a/resources/sass/frontend/_globals.scss b/resources/sass/frontend/_globals.scss index 5e0e7d8..9e162ec 100644 --- a/resources/sass/frontend/_globals.scss +++ b/resources/sass/frontend/_globals.scss @@ -72,9 +72,9 @@ img { } #search { - width: 28px; - height: 28px; - margin-left: 25px; + width: 24px; + height: 24px; + margin-left: 15px; } .product ul.more li { @@ -87,6 +87,25 @@ img { top: 30px; } } +.product .img-bloc { + position: relative; + + &::after { + content: ""; + display: none; + background-image: url(~@/images/picto_halal.png); + background-size: contain; + background-repeat: no-repeat; + position: absolute; + right: 0; + bottom: 0; + width: 25%; + height: 25%; + } + &.view-halal::after { + display: block; + } +} ul.more { margin-top: 50px; @@ -122,9 +141,13 @@ ul.more { ul.infos { display: flex; + flex-direction: column; justify-content: center; + align-items: center; + li { - justify-content: center; + width: 110px; + padding: 10px; text-align: center; color: $color-blue; font-family: $fontbarlow-bold; @@ -157,7 +180,19 @@ ul.infos { } } +@media screen and (min-width: 480px) { + ul.infos { + flex-direction: row; + align-items: initial; + } +} + @media screen and (min-width: 800px) { + #search { + width: 28px; + height: 28px; + margin-left: 25px; + } main { padding-top: 100px; } diff --git a/resources/sass/frontend/_header.scss b/resources/sass/frontend/_header.scss index a35468c..de06baa 100644 --- a/resources/sass/frontend/_header.scss +++ b/resources/sass/frontend/_header.scss @@ -55,6 +55,9 @@ &:hover { color: $color-second; } + &.menu__item--current { + color: $color-second; + } } .traduction { @@ -62,6 +65,7 @@ li { margin-right: 15px; a { + font-size: 14px; color: $color-blue; text-transform: uppercase; text-decoration: none; @@ -74,10 +78,19 @@ } } } + &.blue-bg .traduction li a { + color: $color-main; + } + &.blue-bg .traduction li.current a { + color: $color-second; + } } @media screen and (min-width: 800px) { .site-header { + .traduction li a { + font-size: 18px; + } .wrapper { justify-content: space-between; height: 100px; diff --git a/resources/sass/frontend/_layout.scss b/resources/sass/frontend/_layout.scss index 6a13273..32a1f46 100644 --- a/resources/sass/frontend/_layout.scss +++ b/resources/sass/frontend/_layout.scss @@ -8,8 +8,15 @@ } } .container { - padding-top: 60px; - padding-bottom: 60px; + padding-top: 30px; + padding-bottom: 30px; +} + +@media screen and (min-width: 768px) { + .container { + padding-top: 60px; + padding-bottom: 60px; + } } @media screen and (min-width: 1200px) { diff --git a/resources/sass/frontend/_list.scss b/resources/sass/frontend/_list.scss index bdf8a39..cc41c60 100644 --- a/resources/sass/frontend/_list.scss +++ b/resources/sass/frontend/_list.scss @@ -2,7 +2,7 @@ .gamme-card { display: flex; position: relative; - height: 375px; + height: 300px; margin-bottom: 20px; overflow: hidden; > img { @@ -27,6 +27,9 @@ transition: bottom 0.4s; } } +.product-card > img { + object-fit: contain; +} .product-card { .product-card__title, a { @@ -72,6 +75,7 @@ color: $color-light; font-size: 30px; font-family: $fontbarlow-bold; + padding-bottom: 50px; } } &:hover .overlay { @@ -85,7 +89,7 @@ } .title { color: $color-light; - font-size: calc(#{$globalfont} * 3.25); + font-size: calc(#{$globalfont} * 2); } .is-flex { margin-bottom: 60px; @@ -261,6 +265,9 @@ } @media (min-width: 769px) { + #list .title { + font-size: calc(#{$globalfont} * 3.25); + } .product-card { width: 32%; max-width: 32%; diff --git a/resources/sass/frontend/_texts.scss b/resources/sass/frontend/_texts.scss index 78725ac..ae773f1 100644 --- a/resources/sass/frontend/_texts.scss +++ b/resources/sass/frontend/_texts.scss @@ -3,7 +3,8 @@ p { } h1, -.page-subtitle { +.page-subtitle, +.header-title { margin-bottom: 25px; } @@ -19,7 +20,8 @@ h1, font-size: 38px; } -h1:not(.maintitle):after, +// h1:not(.maintitle):after, +.header-title:after, .sectiontitle:after, .page-subtitle:after { content: ""; @@ -33,6 +35,9 @@ h1:not(.maintitle):after, margin-right: auto; background-color: $color-main; } +.header-title h1 { + margin-bottom: 0; +} h1.blue-line:not(.maintitle):after, .sectiontitle.blue-line:after, .page-subtitle.blue-line:after { @@ -62,6 +67,7 @@ h1:not(.maintitle) { .mascotte:before { content: url(~@/images/coq.png); + display: none; position: absolute; left: -450px; bottom: 0; @@ -89,7 +95,11 @@ h3 { h3.product-card__title { font-family: $fontcocon-regular; } - +@media screen and (min-width: 1024px) { + .mascotte:before { + display: block; + } +} @media screen and (min-width: 800px) { h1:not(.title_page), .page-subtitle, diff --git a/resources/sass/frontend/_utils.scss b/resources/sass/frontend/_utils.scss index 3a35c9d..0bf7e13 100644 --- a/resources/sass/frontend/_utils.scss +++ b/resources/sass/frontend/_utils.scss @@ -39,6 +39,9 @@ &.space-between { justify-content: space-between; } + &.flex-center { + justify-content: center; + } &.flex-col { flex-direction: column; } @@ -105,7 +108,7 @@ } } -@media screen and (max-width: 799px) { +@media screen and (max-width: 1024px) { .is-flex { flex-direction: column; } diff --git a/resources/views/back/encarts/edit.blade.php b/resources/views/back/encarts/edit.blade.php index 334b9bd..071b73f 100644 --- a/resources/views/back/encarts/edit.blade.php +++ b/resources/views/back/encarts/edit.blade.php @@ -34,7 +34,7 @@ page->equals(Page::marqueHeader())) { ?>
{{ $title_marqueBloc2->text}}
{{ __('Food service') }}