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

fix: 💄 correct the content display of commitment 1

See merge request ldc-web/projets/le-gaulois!120
This commit is contained in:
Vincent BRIDIER 2024-09-20 09:11:12 +00:00
commit 2f3a76ca77
5 changed files with 19 additions and 21 deletions

6
resources/sass/fo/pages/commitments.scss Executable file → Normal file
View file

@ -97,7 +97,7 @@
}
.row {
width: 390px;
width: 100%;
@include media-breakpoint-up(md) {
width: 500px;
@ -429,13 +429,13 @@
.pictogram {
top: -3rem;
left: -2rem;
width: 8rem;
width: 6rem;
&-reversed {
top: -3rem;
right: -2rem;
left: auto;
width: 8rem;
width: 6rem;
}
}

View file

@ -284,7 +284,7 @@ document.addEventListener("DOMContentLoaded", function () {
"swiper-cards-commitments": {
modules: [Navigation],
grabCursor: true,
slidesPerView: 1.3,
slidesPerView: 1,
navigation: {
nextEl: "#swiper-cards-commitments ~ .swiper-cards-commitments-button-next",
prevEl: "#swiper-cards-commitments ~ .swiper-cards-commitments-button-prev",

View file

@ -29,9 +29,7 @@
],
[
'name' => __('L\'élevage de volailles'),
'link' => route(
'fo.breeding.show',
$breedingPages->where('type', \App\Enums\StaticPageType::breedingPoultry)->first()),
'link' => route('fo.breeding.show', 'slug'),
],
[
'name' => __('Le métier d\'élevage de volailles'),

View file

@ -9,7 +9,8 @@
<div class="breeding-card bottom-left-shadow position-relative card mb-5 border-0 bg-transparent">
<div class="card-img-top line-border-medium img-wrapper bg-white p-2">
<img class="w-100 line-border-medium" src="{{ asset($picture['src']) }}" title="{{ $picture['alt'] }}" alt="{{ $picture['title'] }}">
<img class="w-100 line-border-medium" src="{{ Vite::asset($picture['src']) }}" title="{{ $picture['alt'] }}"
alt="{{ $picture['title'] }}">
</div>
<div class="card-body position-absolute w-100 d-flex flex-column p-0">
<div class="position-relative">

View file

@ -1,11 +1,11 @@
<section id="commitments-complex-flex-items" class="position-relative">
<section class="position-relative" id="commitments-complex-flex-items">
@if (isset($title) && isset($picto))
<div class="position-absolute start-50 translate-middle w-100 px-5 z-1">
<div class="position-relative d-flex justify-content-center align-items-center w-fit mx-auto">
<img class="title-image position-absolute start-0 top-50 translate-middle img-fluid z-1"
src="{{ Vite::asset($picto) }}" alt="{{ $picto_alt }}" title="{{ $picto_title }}">
<div class="bg-tertiary line-border-small w-fit ps-5 p-3">
<h3 class="m-0">{{ $title }}</h3>
<div class="position-absolute start-50 translate-middle w-100 z-1 px-5">
<div class="position-relative d-flex justify-content-center align-items-center mx-auto w-fit">
<img class="title-image position-absolute top-50 translate-middle img-fluid z-1 start-0" src="{{ Vite::asset($picto) }}"
title="{{ $picto_title }}" alt="{{ $picto_alt }}">
<div class="bg-tertiary line-border-small w-fit p-3 ps-5">
<h3 class="m-0 text-center">{{ $title }}</h3>
@if (isset($subtitle))
<p class="f-bourton-base m-0">{{ $subtitle }}</p>
@endif
@ -14,15 +14,14 @@
</div>
@endif
<div class="line-border-large bg-{{ $background_color }} pb-5">
<div
class="container d-flex flex-column flex-md-row justify-content-center justify-content-evenly align-items-start pt-5 pb-4">
<div class="row justify-content-evenly align-items-start w-100 mx-auto mt-4 mt-lg-0">
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-evenly align-items-start container pb-4 pt-5">
<div class="row justify-content-evenly align-items-start w-100 mt-lg-0 mx-auto mt-4">
@foreach ($collection as $item)
<div class="col-6 col-lg-4 card border-0 bg-transparent mb-3">
<div class="col-6 col-lg-4 card mb-3 border-0 bg-transparent">
<div class="row g-0">
<div class="col-12 d-flex justify-content-center align-items-center">
<img class="img-fluid" src="{{ Vite::asset($item->picto) }}"
alt="{{ $item->picto_alt }}" title="{{ $item->picto_title }}">
<img class="img-fluid" src="{{ Vite::asset($item->picto) }}" title="{{ $item->picto_title }}"
alt="{{ $item->picto_alt }}">
</div>
<div class="col-12">
<div class="card-body text-center">