From ca9d473f0ad8d9225df4091084a68293d8fa8549 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= Date: Wed, 29 Nov 2023 16:52:16 +0100 Subject: [PATCH] Sync 8 produit porteurs --- sass/fo.scss | 2 ++ sass/pages/_products.scss | 15 +++++++++++ sass/vendor/_bootstrap.scss | 1 + theme.config.php | 16 +++++------ ts/fo.ts | 1 + ts/pages/products.ts | 45 +++++++++++++++++++++++++++++++ views/layouts/header.blade.php | 12 +++++---- views/pages/home.blade.php | 2 +- views/pages/products.blade.php | 34 +++++++++++++++++++++++ views/produits-porteurs.blade.php | 28 ------------------- 10 files changed, 114 insertions(+), 42 deletions(-) create mode 100644 sass/pages/_products.scss create mode 100644 ts/pages/products.ts create mode 100644 views/pages/products.blade.php delete mode 100644 views/produits-porteurs.blade.php diff --git a/sass/fo.scss b/sass/fo.scss index 26f5750..ef42a8b 100644 --- a/sass/fo.scss +++ b/sass/fo.scss @@ -5,6 +5,7 @@ // * VENDOR @import "@ldc-web/cookie-notice"; +@import "glightbox/dist/css/glightbox.css"; @import "./vendor/bootstrap"; // * BASE @@ -16,3 +17,4 @@ // * PAGES @import "./pages/home"; @import "./pages/static_page"; +@import "./pages/products"; diff --git a/sass/pages/_products.scss b/sass/pages/_products.scss new file mode 100644 index 0000000..04351b1 --- /dev/null +++ b/sass/pages/_products.scss @@ -0,0 +1,15 @@ +.product-page { + .product-list { + .product { + width: 16rem; + + @include media-breakpoint-up(sm) { + width: 13rem; + } + + @include media-breakpoint-up(lg) { + width: 12rem; + } + } + } +} diff --git a/sass/vendor/_bootstrap.scss b/sass/vendor/_bootstrap.scss index f2ded4e..99d5b80 100644 --- a/sass/vendor/_bootstrap.scss +++ b/sass/vendor/_bootstrap.scss @@ -37,6 +37,7 @@ @import "bootstrap/scss/close"; @import "bootstrap/scss/breadcrumb"; @import "bootstrap/scss/carousel"; +@import "bootstrap/scss/card"; // 6. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss` @import "bootstrap/scss/utilities/api"; diff --git a/theme.config.php b/theme.config.php index 8d179b0..4a7bab8 100644 --- a/theme.config.php +++ b/theme.config.php @@ -5,20 +5,20 @@ return [ 'site_name' => config('app.name'), 'models' => [ 'slides' => [ - 'picture_maxwidth' => 1180, - 'picture_maxheight' => 290 + 'picture_max_width' => 1180, + 'picture_max_height' => 290 ], 'products' => [ - 'picture_maxwidth' => 550, - 'picture_maxheight' => 550, + 'picture_max_width' => 550, + 'picture_max_height' => 550, ], 'ranges' => [ - 'picture_maxwidth' => 476, - 'picture_maxheight' => 355, + 'picture_max_width' => 476, + 'picture_max_height' => 355, ], 'static_pages' => [ - 'banner_maxwidth' => 1180, - 'banner_maxheight' => 290 + 'banner_max_width' => 1180, + 'banner_max_height' => 290 ], ], // * MINICRUD INPUTS diff --git a/ts/fo.ts b/ts/fo.ts index 3aa8c24..f39e211 100644 --- a/ts/fo.ts +++ b/ts/fo.ts @@ -12,6 +12,7 @@ import "./base/common"; // PAGES import "./pages/home"; +import "./pages/products"; // Cookies import CookieNotice from "@ldc-web/cookie-notice"; diff --git a/ts/pages/products.ts b/ts/pages/products.ts new file mode 100644 index 0000000..314268d --- /dev/null +++ b/ts/pages/products.ts @@ -0,0 +1,45 @@ +import GLightbox from "glightbox"; + + +document.addEventListener("DOMContentLoaded", function () { + if (!document.querySelector("main.product-page")) { + return; + } + + const pictureLinks = document.querySelectorAll(".glightbox") as NodeListOf, + pictures = document.querySelectorAll(".glightbox img") as NodeListOf, + imageCount = pictures.length; + let counter: number = 0, + glightbox: GLightbox|null = null; + + function incrementCounter() { + counter++; + if ( counter === imageCount ) { + glightbox = new GLightbox({ + selector: ".glightbox", + }); + } + } + + pictures.forEach((imageElement) => { + if (imageElement.complete) { + incrementCounter(); + } else { + imageElement.addEventListener( "load", incrementCounter, false ); + } + }); + + pictureLinks.forEach((linkElement, index) => linkElement.addEventListener("keydown", (kbdEvt:KeyboardEvent) => { + if ( + kbdEvt.key == " " || + kbdEvt.code == "Space" || + kbdEvt.keyCode == 32 || + kbdEvt.key == "Enter" || + kbdEvt.code == "Enter" || + kbdEvt.keyCode == 13 + ) { + glightbox.openAt(index); + kbdEvt.preventDefault(); + } + })); +}); diff --git a/views/layouts/header.blade.php b/views/layouts/header.blade.php index adae7b1..a998568 100644 --- a/views/layouts/header.blade.php +++ b/views/layouts/header.blade.php @@ -37,11 +37,13 @@ href="{{ route('fo.saisir-code') }}" @if (request()->routeIs('fo.saisir-code')) aria-current="page" @endif>{{ __('Jouer !') }} -
  • - routeIs('fo.produits-porteurs')) aria-current="page" @endif>{{ __('Produits porteurs') }} -
    • + @can('fo.showProducts') +
  • + routeIs('fo.produits-porteurs')) aria-current="page" @endif>{{ __('Produits porteurs') }} +
    • + @endcan
  • @guest {{-- 3 row gifts --}} -
    +

    {{ __('Les cadeaux') }}

    diff --git a/views/pages/products.blade.php b/views/pages/products.blade.php new file mode 100644 index 0000000..7d0ed71 --- /dev/null +++ b/views/pages/products.blade.php @@ -0,0 +1,34 @@ +@extends('theme::layout') + +@section('title', __('Produits porteurs')) +@section('description', __('Les produits porteurs')) + +@section('main-class', 'product-page') + +@section('content') +
    +
    +
    +

    {{ __('Les produits porteurs') }}

    +
    +
    +
    +
    +
    + @foreach ($rangeModelList as $rangeModel) + @foreach ($rangeModel->products as $productModel) +
    + + {{ $productModel->picture_alt }} + {{ Str::title($productModel->name) }} + +
    + @endforeach + @endforeach +
    +
    +
    +
    +@endsection diff --git a/views/produits-porteurs.blade.php b/views/produits-porteurs.blade.php deleted file mode 100644 index 77023de..0000000 --- a/views/produits-porteurs.blade.php +++ /dev/null @@ -1,28 +0,0 @@ -@extends('theme::layout') - -@section('title', 'Produits porteurs') - -@section('content') - -
    -
    -
    -
    -
    -

    Les produits porteurs

    -
    -
    - - @foreach ($ranges as $r) -
    - @foreach ($r->products as $p) -
    - {{ $p->name }} - {{ $p->name }} -
    - @endforeach -
    - @endforeach -
    -
    -@endsection