Sync 8 produit porteurs
This commit is contained in:
Jérémy Munsch
parent
2297bf7eff
commit
ca9d473f0a
10 changed files with 114 additions and 42 deletions
|
|
@ -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";
|
||||
|
|
|
|||
15
sass/pages/_products.scss
Normal file
15
sass/pages/_products.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
sass/vendor/_bootstrap.scss
vendored
1
sass/vendor/_bootstrap.scss
vendored
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
1
ts/fo.ts
1
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";
|
||||
|
|
|
|||
45
ts/pages/products.ts
Normal file
45
ts/pages/products.ts
Normal file
|
|
@ -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<HTMLLinkElement>,
|
||||
pictures = document.querySelectorAll(".glightbox img") as NodeListOf<HTMLImageElement>,
|
||||
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();
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
|
@ -37,11 +37,13 @@
|
|||
href="{{ route('fo.saisir-code') }}"
|
||||
@if (request()->routeIs('fo.saisir-code')) aria-current="page" @endif>{{ __('Jouer !') }}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="fs-4 fw-bold nav-link @if (request()->routeIs('fo.produits-porteurs')) active @endif"
|
||||
href="{{ route('fo.produits-porteurs') }}"
|
||||
@if (request()->routeIs('fo.produits-porteurs')) aria-current="page" @endif>{{ __('Produits porteurs') }}</a>
|
||||
</li>
|
||||
@can('fo.showProducts')
|
||||
<li class="nav-item">
|
||||
<a class="fs-4 fw-bold nav-link @if (request()->routeIs('fo.produits-porteurs')) active @endif"
|
||||
href="{{ route('fo.produits-porteurs') }}"
|
||||
@if (request()->routeIs('fo.produits-porteurs')) aria-current="page" @endif>{{ __('Produits porteurs') }}</a>
|
||||
</li>
|
||||
@endcan
|
||||
<li class="nav-item">
|
||||
@guest
|
||||
<a class="btn-connect btn btn-tertiary fw-bold fs-4 text-uppercase"
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@
|
|||
</section>
|
||||
|
||||
{{-- 3 row gifts --}}
|
||||
<section class="row" id="gifts">
|
||||
<section class="row overflow-x-hidden" id="gifts">
|
||||
<div class="col g-0">
|
||||
<div class="mt-4 p-1 text-center">
|
||||
<h2 class="fs-1 text-quint text-uppercase fw-bold">{{ __('Les cadeaux') }}</h2>
|
||||
|
|
|
|||
34
views/pages/products.blade.php
Normal file
34
views/pages/products.blade.php
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
@extends('theme::layout')
|
||||
|
||||
@section('title', __('Produits porteurs'))
|
||||
@section('description', __('Les produits porteurs'))
|
||||
|
||||
@section('main-class', 'product-page')
|
||||
|
||||
@section('content')
|
||||
<div class="container pb-5 pt-5">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<h1 class="text-quad text-uppercase fw-bold">{{ __('Les produits porteurs') }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="d-flex product-list justify-content-center flex-wrap">
|
||||
@foreach ($rangeModelList as $rangeModel)
|
||||
@foreach ($rangeModel->products as $productModel)
|
||||
<div class="card product m-2">
|
||||
<a class="card-body glightbox" href="{{ asset($productModel->picture) }}" role="button"
|
||||
aria-label="{{ __('Afficher l\'image en plein écran') }}" tabindex="0">
|
||||
<img class="card-img-top" src="{{ asset($productModel->picture) }}"
|
||||
title="{{ $productModel->picture_title }}" alt="{{ $productModel->picture_alt }}">
|
||||
<span class="h4 card-title">{{ Str::title($productModel->name) }}</span>
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
@extends('theme::layout')
|
||||
|
||||
@section('title', 'Produits porteurs')
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="produits floating grid">
|
||||
<div class="head-bloc"></div>
|
||||
<section class="main--bloc container flex">
|
||||
<div class="main--title">
|
||||
<div class="">
|
||||
<h2 class="post-subtitle raleway">Les produits porteurs</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@foreach ($ranges as $r)
|
||||
<div class="products--list flex">
|
||||
@foreach ($r->products as $p)
|
||||
<div class="product">
|
||||
<img src="{{ asset('/images/produits/' . $p->picture) }}" alt="{{ $p->name }}">
|
||||
<span>{{ $p->name }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endforeach
|
||||
</section>
|
||||
</div>
|
||||
@endsection
|
||||
Loading…
Add table
Reference in a new issue