forge-joniko/ldc-legaulois
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'issue-64' into 'le-gaulois-2024'

Browse source 
fix: 💄 correct some display issue in home page / recipe section

See merge request ldc-web/projets/le-gaulois!125
This commit is contained in:
Vincent BRIDIER 2024-09-20 13:47:17 +00:00
commit afe0299fcf
5 changed files with 73 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
resources/ts/fo/base/common.ts
View file

@ -358,9 +358,9 @@ document.addEventListener("DOMContentLoaded", function () {
},
},
"swiper-recipes": {
modules: [Navigation],
modules: [Navigation, Pagination],
grabCursor: true,
slidesPerView: 1.5,
slidesPerView: 1,
centeredSlides: true,
spaceBetween: 20,
navigation: {
@ -375,6 +375,14 @@ document.addEventListener("DOMContentLoaded", function () {
992: {
slidesPerView: 3,
centeredSlides: false,
slidesPerGroup: 3,
},
},
pagination: {
el: ".swiper-recipe-pagination",
clickable: true,
renderBullet: function (index: number, className: string) {
return "<button class=\"" + className + "\" title=\"Aller à la slide " + (index + 1) + "\"></button>";
},
},
},

8
resources/ts/fo/components/FilterCardsComponent.vue
View file

@ -213,10 +213,10 @@
<!-- BUTTONS -->
<div
v-if="contentParameters.swiper"
class="col-12 d-flex flex-column flex-md-row justify-content-center align-items-center w-100"
class="col-12 d-flex flex-column flex-md-row justify-content-center align-items-center w-75 w-md-100 mx-auto"
>
<a
class="content-btns btn btn-primary border-0 my-1 my-md-0 mx-md-1"
class="content-btns btn btn-primary border-0 my-1 my-md-0 mx-md-1 w-100 w-md-fit"
:href="getShowLegendRoute(legendsParameters.modelSelected?.slug as string)"
title="Accéder à la page de tous les produits de la gamme"
:style="'background-color:' + legendsParameters.modelSelected?.color"
@ -224,7 +224,7 @@
{{ (legendsParameters.modelSelected) ? textsParameters.btn1Label + " " + legendsParameters.modelSelected?.label : textsParameters.btn1Label }}
</a>
<a
class="content-btns btn btn-secondary border-0 my-1 my-md-0 mx-md-1"
class="content-btns btn btn-secondary border-0 my-1 my-md-0 mx-md-1 w-100 w-md-fit"
:href="getIndexContentRoute()"
title="Accéder à la page de tous les produits"
>
@ -245,8 +245,8 @@
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import Swiper from "swiper";
import { Navigation } from "swiper/modules";
import { defineOptions, nextTick, onMounted, ref, useAttrs, reactive, createApp } from "vue";
import type { App } from "vue";
import { createApp, defineOptions, nextTick, onMounted, reactive, ref, useAttrs } from "vue";
import route from "../../modules/route";
import trans from "../../modules/trans";
import parseLaravelErrorMessages from "./../../modules/parseLaravelErrorMessages";

44
resources/views/fo/pages/home.blade.php
View file

@ -6,13 +6,13 @@
@section('bg-offset', true)
@section('content')
<section id="home" class="overflow-hidden">
<section class="overflow-hidden" id="home">
{{-- HOT NEWS --}}
<div id="hot-news" @class([
'd-none position-fixed top-50 end-0 translate-middle-y bottom-left-shadow z-3',
'd-xl-block' => !cache('hotNewsIsDisplayed'),
])>
<div class="line-border-small py-3 bg-white">
<div class="line-border-small bg-white py-3">
<div class="bg-primary position-absolute w-100 h-100 z-2 start-0 top-0 bg-opacity-50" id="hot-news-loader">
<div class="position-absolute start-50 top-50 translate-middle">
<div class="spinner-border" role="status">
@ -20,7 +20,7 @@
</div>
</div>
</div>
<button class="btn-close position-absolute start-0 top-0 pt-3 ms-2 pe-2 mt-2 bg-white opacity-100" id="close-hot-news"
<button class="btn-close position-absolute start-0 top-0 ms-2 mt-2 bg-white pe-2 pt-3 opacity-100" id="close-hot-news"
aria-label="Close"></button>
@include('fo.partials.hot-news')
</div>
@ -31,19 +31,16 @@
<div class="swiper swiper-main-slides overflow-visible" id="swiper-main-slides">
<div class="swiper-wrapper w-fit">
@foreach ($mainSlideModels as $mainSlideModel)
<div class="swiper-slide h-auto pb-5 pb-md-0" style="background-color:{{ $mainSlideModel->color_block }}">
<div class="swiper-slide pb-md-0 h-auto pb-5" style="background-color:{{ $mainSlideModel->color_block }}">
<div class="swiper-background d-flex justify-content-center align-items-center">
<img src="{{ asset($mainSlideModel->background) }}"
title="{{ $mainSlideModel->background_title }}"
<img src="{{ asset($mainSlideModel->background) }}" title="{{ $mainSlideModel->background_title }}"
alt="{{ $mainSlideModel->background_alt }}">
</div>
<div
class="card d-flex flex-column-reverse flex-sm-row align-items-center align-items-sm-start justify-content-center align-items-md-center flex-row border-0 bg-transparent">
@if ($mainSlideModel->picture)
<img class="card-picture img-fluid ms-md-0 ms-sm-2 ms-0"
src="{{ asset($mainSlideModel->picture) }}"
title="{{ $mainSlideModel->picture_title }}"
alt="{{ $mainSlideModel->picture_alt }}">
<img class="card-picture img-fluid ms-md-0 ms-sm-2 ms-0" src="{{ asset($mainSlideModel->picture) }}"
title="{{ $mainSlideModel->picture_title }}" alt="{{ $mainSlideModel->picture_alt }}">
@endif
<div @class([
'card-body position-relative p-0',
@ -106,14 +103,13 @@
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
<img class="w-100 d-none d-xl-block"
src="{{ Vite::asset('resources/assets/images/home/bg-slider-wood.png') }}"
<img class="w-100 d-none d-xl-block" src="{{ Vite::asset('resources/assets/images/home/bg-slider-wood.png') }}"
alt="{{ __('Footer imitation bois du slider') }}">
</section>
@endif
{{-- HOT NEWS DESKTOP --}}
<div class="position-relative d-block d-xl-none" id="hot-news-desktop">
<div class="position-absolute start-0 wood-background w-100"></div>
<div class="position-absolute wood-background w-100 start-0"></div>
<div class="d-block d-xl-none hot-news-position position-relative bottom-left-shadow mx-auto">
<div class="line-border-small bg-white">
@include('fo.partials.hot-news')
@ -165,11 +161,9 @@
<div class="swiper-wrapper w-fit">
@foreach ($demarcheSlideModels as $demarcheSlideModel)
<div class="swiper-slide position-relative p-lg-5 pb-lg-0 h-auto overflow-hidden p-0">
<div
class="slide-background line-border-medium position-absolute start-50 translate-middle-x w-100">
<div class="slide-background line-border-medium position-absolute start-50 translate-middle-x w-100">
<img src="{{ Vite::asset('resources/assets/images/home/bg-demarche-slider.jpg') }}"
title="{{ __('Image de fond du carrousel') }}"
alt="{{ __('Paysage de champs') }}">
title="{{ __('Image de fond du carrousel') }}" alt="{{ __('Paysage de champs') }}">
</div>
<div class="h-100 container">
<div class="slide-card position-relative h-100">
@ -181,8 +175,7 @@
alt="#FIXME:alt de l'image de la démarche">
</a>
<div class="slide-content position-relative pt-lg-0 pt-2">
<div
class="line-border-medium bg-light position-absolute w-100 h-100 start-0 top-0">
<div class="line-border-medium bg-light position-absolute w-100 h-100 start-0 top-0">
</div>
<div class="slide-content-texts position-relative z-1 p-lg-5 p-3">
<h2 class="text-secondary fs-2">
@ -216,14 +209,12 @@
<button
class="swiper-button swiper-button-prev-custom swiper-demarche-button-prev rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (gauche)') }}"
alt="{{ __('flèche vers la gauche') }}">
title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}">
</button>
<button
class="swiper-button swiper-button-next-custom swiper-demarche-button-next rounded-circle z-1 mx-3 border-0 bg-white">
<img src="{{ Vite::asset('resources/assets/images/common/arrow-brown.svg') }}"
title="{{ __('Navigation du slider (droite)') }}"
alt="{{ __('flèche vers la droite') }}">
title="{{ __('Navigation du slider (droite)') }}" alt="{{ __('flèche vers la droite') }}">
</button>
</div>
</div>
@ -241,6 +232,7 @@
'models' => $recipeModels,
'btnRouteName' => route('fo.recipes.index'),
'btnRouteTitle' => 'recettes',
'hasPagination' => true,
])
@endif
{{-- NEWS --}}
@ -280,8 +272,7 @@
<div class="d-md-none">
@foreach ($newsModels->slice(1, 3) as $newsModel)
<li>
<a class="text-decoration-none"
href="{{ route('fo.news.show', $newsModel->slug) }}"
<a class="text-decoration-none" href="{{ route('fo.news.show', $newsModel->slug) }}"
title="{{ __('Voir l\'article :name', ['name' => $newsModel->title]) }}">
<p class="f-bakerie-rough mb-0">
{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}</p>
@ -292,8 +283,7 @@
</div>
@foreach ($newsModels->slice(4, count($newsModels)) as $newsModel)
<li>
<a class="text-decoration-none"
href="{{ route('fo.news.show', $newsModel->slug) }}"
<a class="text-decoration-none" href="{{ route('fo.news.show', $newsModel->slug) }}"
title="{{ __('Voir l\'article :name', ['name' => $newsModel->title]) }}">
<p class="f-bakerie-rough mb-0">
{{ now()->subDays(rand(1, 31))->format('d/m/Y') }}</p>

2
resources/views/fo/partials/commitments/list-pages.blade.php
View file

@ -46,7 +46,7 @@
'picto_alt' => __('Pictogramme d\'une plante'),
'picto_title' => __('Pousse d\'une plante au creux d\'une main'),
'title' => __('respecter la terre'),
'text' => __('être la grande marque alimentaire française'),
'text' => __('minimiser notre empreinte carbone et agir sur le changement climatique'),
'url' => route('fo.commitments.respect'),
],
];

80
resources/views/fo/partials/recipe-card.blade.php
View file

@ -1,49 +1,51 @@
<div class="recipe-card bottom-left-shadow h-100">
<div class="line-border-medium h-100 bg-white">
<div class="position-relative d-flex justify-content-center">
<a class="text-decoration-none" href="{{ route('fo.recipes.show', $model->slug) }}"
title="{{ __('Accéder à la recette : :title', ['title' => $model->title]) }}">
<a class="text-decoration-none" href="{{ route('fo.recipes.show', $model->slug) }}"
title="{{ __('Accéder à la recette : :title', ['title' => $model->title]) }}">
<div class="line-border-medium h-100 bg-white">
<div class="position-relative d-flex justify-content-center">
<img class="w-100 line-border-medium" src="{{ asset($model->picture) }}" title="{{ $model->picture_title }}"
alt="{{ $model->picture_alt }}" />
</a>
{{-- FIXME: change packaging by the first product packaging
{{-- FIXME: change packaging by the first product packaging
<img class="w-25 position-absolute recipe-card-product rotate-left z-1 bottom-0" src="{{ $model->products[0]->packaging }}"
title="{{ $model->products[0]->packaging_title }}" alt="{{ $model->products[0]->packaging_alt }}" /> --}}
<x-fo.btn-club-favorite :model="$model" />
</div>
<div class="recipe-card-bottom-part d-flex flex-column align-items-center px-3 pt-5">
<div style="min-height: 6.2rem; display: flex; align-items: center;">
<p class="text-uppercase fs-4 f-bourton-base text-center">
{{ $model->title }}
</p>
<x-fo.btn-club-favorite :model="$model" />
</div>
{{-- TIMES (COOKING & PREPARATION) & DIFFICULTY --}}
<div class="d-flex justify-content-around w-100">
<p class="text-uppercase fs-5 f-bourton-base">
<img src="{{ Vite::asset('resources/assets/images/recipes/clock.svg') }}"
title="{{ __('Icône du temps de préparation') }}" alt="{{ __('Horloge') }}" />
{{ $model->convertTime($model->preparation_time) }}
</p>
@if ($model->cooking_time)
<p class="text-uppercase fs-5 f-bourton-base">
<img src="{{ Vite::asset('resources/assets/images/recipes/cooking-pot.svg') }}"
title="{{ __('Icône du temps de cuisson') }}" alt="{{ __('Soupière') }}" />
{{ $model->convertTime($model->cooking_time) }}
<div class="recipe-card-bottom-part d-flex flex-column align-items-center px-3 pt-5">
<div style="min-height: 6.2rem; display: flex; align-items: center;">
<p class="text-uppercase fs-4 f-bourton-base text-center">
{{ $model->title }}
</p>
@endif
<p class="text-uppercase fs-5 f-bourton-base">
<img src="{{ Vite::asset('resources/assets/images/recipes/toque.svg') }}" title="{{ __('Icône de difficulté') }}"
alt="{{ __('Toque') }}" />
{{ $model->difficulty->label() }}
</p>
</div>
{{-- TIMES (COOKING & PREPARATION) & DIFFICULTY --}}
<div class="d-flex justify-content-around w-100">
<p class="text-uppercase fs-5 f-bourton-base">
<img src="{{ Vite::asset('resources/assets/images/recipes/clock.svg') }}"
title="{{ __('Icône du temps de préparation') }}" alt="{{ __('Horloge') }}" />
{{ $model->convertTime($model->preparation_time) }}
</p>
@if ($model->cooking_time)
<p class="text-uppercase fs-5 f-bourton-base">
<img src="{{ Vite::asset('resources/assets/images/recipes/cooking-pot.svg') }}"
title="{{ __('Icône du temps de cuisson') }}" alt="{{ __('Soupière') }}" />
{{ $model->convertTime($model->cooking_time) }}
</p>
@endif
<p class="text-uppercase fs-5 f-bourton-base">
<img src="{{ Vite::asset('resources/assets/images/recipes/toque.svg') }}" title="{{ __('Icône de difficulté') }}"
alt="{{ __('Toque') }}" />
{{ $model->difficulty->label() }}
</p>
</div>
{{-- SUBMEAT & CUNSUMPTION MOMENT --}}
@include('fo.partials.recipe-badges', [
'model' => $model,
'classWrapper' => 'recipe-card-badges-wrapper d-flex w-100 justify-content-center flex-wrap pb-3',
'class' =>
'badge recipe-tag text-bg-tertiary text-secondary text-uppercase f-catamaran fw-normal mx-md-3 mx-1 mb-2 px-3',
])
</div>
{{-- SUBMEAT & CUNSUMPTION MOMENT --}}
@include('fo.partials.recipe-badges', [
'model' => $model,
'classWrapper' => 'recipe-card-badges-wrapper d-flex w-100 justify-content-center flex-wrap pb-3',
'class' =>
'badge recipe-tag text-bg-tertiary text-secondary text-uppercase f-catamaran fw-normal mx-md-3 mx-1 mb-2 px-3',
])
</div>
</div>
</a>
</div>