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

Merge branch 'issue-326-fix' into 'develop'

Browse source 
fix 🐛 : display cards like prod

See merge request ldc-web/projets/le-gaulois!321
This commit is contained in:
karl.muller 2026-05-21 07:33:14 +00:00
commit 70681e82cc
3 changed files with 66 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
resources/sass/fo/pages/breeding/approaches.scss
View file

@ -231,25 +231,31 @@
}
}
#cards-container-outside {
/* GRID */
#cards-container-outside {
.card-grid {
display: grid;
display: flex;
width: 100%;
gap: 48px 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 1140px;
padding: 0 2rem;
margin: 0 auto;
gap: 18px;
}
.col-card {
display: flex;
width: 50%;
flex-direction: column;
gap: 18px;
}
/* CARD */
.light-card {
width: 100%;
}
/* CONTENT */
.light-card-content.ck-content {
h1,h2,h3 {
h1, h2, h3 {
margin-bottom: 0.5rem;
font-family: inherit;
font-family: inherit;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.059;
@ -302,10 +308,17 @@
}
}
@media (width <= 767.98px) {
#cards-container-outside .card-grid {
gap: 32px;
grid-template-columns: 1fr;
@include media-breakpoint-down(md) {
#cards-container-outside {
.card-grid {
flex-direction: column !important;
gap: 32px !important;
}
.col-card {
width: 100% !important;
gap: 32px !important;
}
}
}

2
resources/views/components/fo/breeding/light-card.blade.php
View file

@ -4,7 +4,7 @@
alt="{{ $icon['alt'] }}">
<span class="text-uppercase bg-secondary text-light fw-semibold right-rotate-sm">{{ $category }}</span>
<div class="bg-light position-relative line-border-small light-card-content mt-3 fs-5 f-catamaran ck-content">
<div class="bg-light position-relative line-border-small light-card-content mt-3 f-catamaran ck-content">
{!! clean($content) !!}
</div>
</div>

52
resources/views/components/fo/breeding/section/oui-c-est-bon/cahier-des-charges-section.blade.php
View file

@ -39,24 +39,50 @@
@endforeach
</div>
{{-- Cards --}}
<div class="row mb-5 mt-5" id="cards-container-outside">
<div class="card-grid">
@foreach ($items as $categoryKey => $categoryItems)
<div style="display: contents" data-category="{{ $categoryKey }}">
@foreach ($categoryItems as $item)
<div class="{{ $loop->first ? 'mt-5 mt-md-0' : '' }}">
<x-fo.breeding.light-card :category="$item->title" :icon="[
<div class="row mb-5 mt-5" id="cards-container-outside">
<div class="card-grid">
@foreach ($items as $categoryKey => $categoryItems)
<div style="display: contents" data-category="{{ $categoryKey }}">
{{-- left cols --}}
<div class="col-card">
@foreach ($categoryItems as $index => $item)
@if ($index % 2 === 0)
<x-fo.breeding.light-card
:category="$item->title"
:icon="[
'path' => $item->picture,
'alt' => $item->picture_alt,
'description' => $item->picture_title,
]" :content="$item->content"
class="card-template-sm" data-category="{{ $categoryKey }}" />
</div>
]"
:content="$item->content"
class="card-template-sm"
data-category="{{ $categoryKey }}"
/>
@endif
@endforeach
</div>
@endforeach
</div>
{{-- right cols --}}
<div class="col-card">
@foreach ($categoryItems as $index => $item)
@if ($index % 2 !== 0)
<x-fo.breeding.light-card
:category="$item->title"
:icon="[
'path' => $item->picture,
'alt' => $item->picture_alt,
'description' => $item->picture_title,
]"
:content="$item->content"
class="card-template-sm"
data-category="{{ $categoryKey }}"
/>
@endif
@endforeach
</div>
</div>
@endforeach
</div>
</div>
</div>