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

feat: ✨ add stickies on unveil page

Browse source
This commit is contained in:
Corentin Huet 2026-03-05 10:54:49 +01:00
parent edd9028336
commit a3a01e5296
5 changed files with 132 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/Http/Controllers/Fo/StaticPageController.php
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'
));
}

35
database/seeders/Mandatory/StickySeeder.php
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'
],
);
}
}

41
resources/sass/fo/pages/_unveil.scss
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;
}
}
}
}
}

11
resources/ts/fo/pages/unveil.ts
View file

@ -7,6 +7,17 @@ document.addEventListener("DOMContentLoaded", function () {
return;
}
const button = document.querySelector(".unveil-navigation .btn") as HTMLButtonElement;
const navWrapper = document.querySelectorAll(".unveil-navigation-wrapper ");
button.addEventListener("click", () => {
navWrapper.forEach((element: Element) => {
element.classList.toggle("show");
});
document.querySelectorAll(".unveil-navigation .btn svg").forEach(icon => {
icon.classList.toggle("d-none");
});
});
// The colors to use in the carousel, in this order.
const colors = [
"quint", "secondary", "sixt", "quad"

43
resources/views/fo/pages/unveil.blade.php
View file

@ -19,6 +19,47 @@
<section class="unveil">
{{-- KEY NUMBERS --}}
<section class="key-numbers anchor-padding my-5" id="key-numbers">
<div class="unveil-navigation z-2">
<div class="unveil-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">
<div class="col-12">
@ -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">