Merge branch '88-stickies' into 'develop'

Resolve "TS-3147 : PAGE "ON SE DÉVOILE" AJOUT DE STICKY"

See merge request ldc-web/projets/volena!58
This commit is contained in:
noah.lancien 2026-03-25 14:23:53 +00:00
commit 4b281f8abf
9 changed files with 221 additions and 76 deletions

View file

@ -91,6 +91,7 @@ class StaticPageController extends Controller
$siteSection = $sectionModels->where('section', PageSectionEnum::unveil_sites)->first();
$historySection = $sectionModels->where('section', PageSectionEnum::unveil_history)->first();
$commitmentSection = $sectionModels->where('section', PageSectionEnum::unveil_commitments)->first();
$navLinks = Sticky::query()->where('type', StaticPageType::unveil)->get();
$viewBox = null;
$initialZoom = null;
@ -119,7 +120,8 @@ class StaticPageController extends Controller
'localSection',
'siteSection',
'historySection',
'commitmentSection'
'commitmentSection',
'navLinks'
));
}
@ -277,7 +279,7 @@ class StaticPageController extends Controller
$paritySection = $sectionModels->where('section', PageSectionEnum::hire_parity)->first();
$findSection = $sectionModels->where('section', PageSectionEnum::hire_find)->first();
$carouselSectionParity = Carousel::query()->where('section_id', PageSectionEnum::hire_parity)->where('published', true)->get();
$navLinks = Sticky::query()->where('type', StaticPageType::we_hire)->get();
$navLinks = Sticky::query()->where('type', StaticPageType::we_hire)->get();
return view('fo.pages.hire', \compact(
'staticPageModel',

View file

@ -0,0 +1,26 @@
<?php
use Database\Seeders\Mandatory\StickySeeder;
use Illuminate\Database\Migrations\Migration;
use Illuminate\Support\Facades\Artisan;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Artisan::call('db:seed', [
'class' => StickySeeder::class
]);
}
/**
* Reverse the migrations.
*/
public function down(): void
{
//
}
};

View file

@ -48,5 +48,40 @@ class StickySeeder extends Seeder
'anchor' => 'on-se-retrouve'
],
);
Sticky::query()->updateOrCreate(
[
'type' => StaticPageType::unveil,
'title' => 'VOLENA',
'anchor' => 'key-numbers'
],
);
Sticky::query()->updateOrCreate(
[
'type' => StaticPageType::unveil,
'title' => 'Notre mission',
'anchor' => 'missions'
],
);
Sticky::query()->updateOrCreate(
[
'type' => StaticPageType::unveil,
'title' => 'Filière 100% française',
'anchor' => 'local'
],
);
Sticky::query()->updateOrCreate(
[
'type' => StaticPageType::unveil,
'title' => 'Nos sites',
'anchor' => 'sites'
],
);
Sticky::query()->updateOrCreate(
[
'type' => StaticPageType::unveil,
'title' => 'Notre histoire',
'anchor' => 'history'
],
);
}
}

View file

@ -17,7 +17,7 @@ return [
'network' => 'réseau|réseaux',
'aisle' => 'rayon',
'brand' => 'marque',
'carousel' => 'carrousel|carrousels'
'carousel' => 'carrousel|carrousels',
'sticky' => 'menu d\'ancre|menu d\'ancres'
]
];

View file

@ -139,4 +139,45 @@
}
}
}
.unveil-navigation {
@include media-breakpoint-up(md) {
position: fixed;
z-index: 10;
bottom: 4rem;
left: 4rem;
max-width: 15rem;
&-wrapper {
height: 0;
opacity: 0;
transform: translateY(25%);
transition: .3s;
visibility: hidden;
&.show {
height: auto;
opacity: 1;
transform: translateY(0);
visibility: visible;
}
}
}
.col-md-12 {
@include media-breakpoint-up(md) {
width: fit-content;
}
.badge {
width: .5rem;
height: .5rem;
@include media-breakpoint-up(md) {
width: 1rem;
height: 1rem;
}
}
}
}
}

View file

@ -11,7 +11,7 @@
</thead>
<tbody>
@foreach ($stickyModels as $stickyModel)
<tr class="border-bottom list-item">
<tr class="border-bottom">
<td class="text-center align-middle">{{ $stickyModel->type->label() }}</td>
<td class="text-center align-middle">{{ $stickyModel->title }}</td>
<td class="text-center align-middle">

View file

@ -17,38 +17,38 @@
@section('content')
<section class="commit">
<div class="sticky-navigation z-2">
<div class="sticky-navigation-wrapper show row m-0 p-0">
{{-- blade-formatter-disable --}}
@php
$commitNav = [
['label' => __('Élever durablement'), 'link' => '#breeding', 'color' => 'tertiary'],
['label' => __('Mieux vivre'), 'link' => '#life', 'color' => 'quad'],
['label' => __('Respecter la terre'), 'link' => '#earth', 'color' => 'quint'],
['label' => __('Bien nourrir'), 'link' => '#feed', 'color' => 'sixt']];
@endphp
{{-- blade-formatter-enable --}}
@foreach ($commitNav as $key => $value)
<div class="col-6 col-md-12 px-md-0 py-md-1 p-2">
<div class="rounded-5 bg-{{ $value['color'] }}-light shadow-sm">
<a class="d-flex justify-content-center align-items-center text-primary text-decoration-none p-sm-3 p-2"
data-bs-toggle="tooltip" href="{{ $value['link'] }}"
title="{{ __('Accéder à la partie :name de la page', ['name' => $value['label']]) }}">
<span class="badge rounded-pill bg-{{ $value['color'] }} d-block me-2"></span>
<small>{{ $value['label'] }}</small>
</a>
</div>
</div>
@endforeach
</div>
<button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3"
title="{{ __('Afficher/Masquer le menu des ancres') }}">
<i class="fa-solid fa-plus d-none"></i>
<i class="fa-solid fa-minus"></i>
</button>
</div>
{{-- AMBITION --}}
<section class="ambition anchor-padding container my-4" id="introduction">
<div class="sticky-navigation z-2">
<div class="sticky-navigation-wrapper show row m-0 p-0">
{{-- blade-formatter-disable --}}
@php
$commitNav = [
['label' => __('Élever durablement'), 'link' => '#breeding', 'color' => 'tertiary'],
['label' => __('Mieux vivre'), 'link' => '#life', 'color' => 'quad'],
['label' => __('Respecter la terre'), 'link' => '#earth', 'color' => 'quint'],
['label' => __('Bien nourrir'), 'link' => '#feed', 'color' => 'sixt']];
@endphp
{{-- blade-formatter-enable --}}
@foreach ($commitNav as $key => $value)
<div class="col-6 col-md-12 px-md-0 py-md-1 p-2">
<div class="rounded-5 bg-{{ $value['color'] }}-light shadow-sm">
<a class="d-flex justify-content-center align-items-center text-primary text-decoration-none p-sm-3 p-2"
data-bs-toggle="tooltip" href="{{ $value['link'] }}"
title="{{ __('Accéder à la partie :name de la page', ['name' => $value['label']]) }}">
<span class="badge rounded-pill bg-{{ $value['color'] }} d-block me-2"></span>
<small>{{ $value['label'] }}</small>
</a>
</div>
</div>
@endforeach
</div>
<button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3"
title="{{ __('Afficher/Masquer le menu des ancres') }}">
<i class="fa-solid fa-plus d-none"></i>
<i class="fa-solid fa-minus"></i>
</button>
</div>
<div class="row mt-3">
<div class="col-12">
<h2 class="h2 fw-bold text-primary text-center">{{ $ambitionSection->h2_title }}</h2>

View file

@ -17,49 +17,49 @@
@section('content')
<section class="we-hire">
<div class="sticky-navigation z-2">
<div class="sticky-navigation-wrapper show row m-0 p-0">
@foreach ($navLinks as $key => $link)
<div class="col-6 col-md-12 px-md-0 py-md-1 p-2">
<div @class([
'rounded-5 shadow-sm h-100',
match($loop->index) {
0 => 'bg-primary-light',
1 => 'bg-secondary-light',
2 => 'bg-quad-light',
3 => 'bg-quint-light',
4 => 'bg-sixt-light',
default => 'bg-primary-light'
}
])>
<a class="d-flex justify-content-start align-items-center text-primary text-decoration-none p-sm-3 p-2 h-100"
data-bs-toggle="tooltip" href="#{{ $link->anchor }}"
title="{{ __('Accéder à la partie :name de la page', ['name' => $link->title]) }}">
<span @class([
'badge rounded-pill d-block me-2',
match($loop->index) {
0 => 'bg-primary',
1 => 'bg-secondary',
2 => 'bg-quad',
3 => 'bg-quint',
4 => 'bg-sixt',
default => 'bg-primary'
}
])></span>
<small>{{ $link->title }}</small>
</a>
</div>
</div>
@endforeach
</div>
<button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3"
title="{{ __('Afficher/Masquer le menu des ancres') }}">
<i class="fa-solid fa-plus d-none"></i>
<i class="fa-solid fa-minus"></i>
</button>
</div>
{{-- COMPAGNY LIFE --}}
<section class="company-life anchor-padding" id="company-life">
<div class="sticky-navigation z-2">
<div class="sticky-navigation-wrapper show row m-0 p-0">
@foreach ($navLinks as $key => $link)
<div class="col-6 col-md-12 px-md-0 py-md-1 p-2">
<div @class([
'rounded-5 shadow-sm h-100',
match($loop->index) {
0 => 'bg-primary-light',
1 => 'bg-secondary-light',
2 => 'bg-quad-light',
3 => 'bg-quint-light',
4 => 'bg-sixt-light',
default => 'bg-primary-light'
}
])>
<a class="d-flex justify-content-start align-items-center text-primary text-decoration-none p-sm-3 p-2 h-100"
data-bs-toggle="tooltip" href="#{{ $link->anchor }}"
title="{{ __('Accéder à la partie :name de la page', ['name' => $link->title]) }}">
<span @class([
'badge rounded-pill d-block me-2',
match($loop->index) {
0 => 'bg-primary',
1 => 'bg-secondary',
2 => 'bg-quad',
3 => 'bg-quint',
4 => 'bg-sixt',
default => 'bg-primary'
}
])></span>
<small>{{ $link->title }}</small>
</a>
</div>
</div>
@endforeach
</div>
<button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3"
title="{{ __('Afficher/Masquer le menu des ancres') }}">
<i class="fa-solid fa-plus d-none"></i>
<i class="fa-solid fa-minus"></i>
</button>
</div>
<div class="container">
<div class="row position-relative">
<div class="col-12 text-center">

View file

@ -17,6 +17,47 @@
@section('content')
<section class="unveil">
<div class="sticky-navigation z-2">
<div class="sticky-navigation-wrapper show row m-0 p-0">
@foreach ($navLinks as $key => $link)
<div class="col-6 col-md-12 px-md-0 py-md-1 p-2">
<div @class([
'rounded-5 shadow-sm h-100',
match($loop->index) {
0 => 'bg-primary-light',
1 => 'bg-secondary-light',
2 => 'bg-quad-light',
3 => 'bg-quint-light',
4 => 'bg-sixt-light',
default => 'bg-primary-light'
}
])>
<a class="d-flex justify-content-start align-items-center text-primary text-decoration-none p-sm-3 p-2 h-100"
data-bs-toggle="tooltip" href="#{{ $link->anchor }}"
title="{{ __('Accéder à la partie :name de la page', ['name' => $link->title]) }}">
<span @class([
'badge rounded-pill d-block me-2',
match($loop->index) {
0 => 'bg-primary',
1 => 'bg-secondary',
2 => 'bg-quad',
3 => 'bg-quint',
4 => 'bg-sixt',
default => 'bg-primary'
}
])></span>
<small>{{ $link->title }}</small>
</a>
</div>
</div>
@endforeach
</div>
<button class="d-none d-md-block btn btn-primary rounded-pill mt-1 w-fit px-3"
title="{{ __('Afficher/Masquer le menu des ancres') }}">
<i class="fa-solid fa-plus d-none"></i>
<i class="fa-solid fa-minus"></i>
</button>
</div>
{{-- KEY NUMBERS --}}
<section class="key-numbers anchor-padding my-5" id="key-numbers">
<div class="container">
@ -130,7 +171,7 @@
</div>
</section>
{{-- OUR HISTORY --}}
<section class="history pb-lg-5 mb-5 overflow-hidden">
<section class="history pb-lg-5 mb-5 overflow-hidden" id="history">
<div class="container">
<div class="row">
<div class="col-12">