From b23524f2927211343fb59f91c16a2d1ed9c5bcbd Mon Sep 17 00:00:00 2001 From: Noah Lancien Date: Fri, 1 Mar 2024 18:21:20 +0100 Subject: [PATCH] Added site.show page + some fixes on home and unveil pages --- app/Http/Controllers/Fo/SiteController.php | 33 +++ database/seeders/Development/SiteSeeder.php | 6 +- resources/assets/images/misc/quotes.svg | 3 + resources/sass/fo/base/_common.scss | 63 ++++- resources/sass/fo/fo.scss | 1 + resources/sass/fo/pages/_homepage.scss | 31 --- resources/sass/fo/pages/_site.scss | 20 ++ resources/sass/fo/vendor/_swiper.scss | 28 +- resources/ts/fo/base/common.ts | 65 ++++- resources/ts/fo/utilities/fontawesome.ts | 10 +- resources/views/fo/pages/home.blade.php | 4 +- resources/views/fo/pages/site.blade.php | 254 ++++++++++++++++++ .../fo/partials/testimonials/card.blade.php | 24 ++ routes/web-fo.php | 2 + 14 files changed, 501 insertions(+), 43 deletions(-) create mode 100644 app/Http/Controllers/Fo/SiteController.php create mode 100644 resources/assets/images/misc/quotes.svg create mode 100644 resources/sass/fo/pages/_site.scss create mode 100644 resources/views/fo/pages/site.blade.php create mode 100644 resources/views/fo/partials/testimonials/card.blade.php diff --git a/app/Http/Controllers/Fo/SiteController.php b/app/Http/Controllers/Fo/SiteController.php new file mode 100644 index 0000000..1f05f62 --- /dev/null +++ b/app/Http/Controllers/Fo/SiteController.php @@ -0,0 +1,33 @@ +order === Site::query()->max('order')) { + $nextSiteModel = Site::query()->orderBy('order')->first(); + } else { + $nextSiteModel = Site::query()->orderBy('order')->where('order', '>', $siteModel->order)->first(); + } + + return view('fo.pages.site', compact('siteModel', 'nextSiteModel')); + } +} diff --git a/database/seeders/Development/SiteSeeder.php b/database/seeders/Development/SiteSeeder.php index 7ade87d..74cb534 100644 --- a/database/seeders/Development/SiteSeeder.php +++ b/database/seeders/Development/SiteSeeder.php @@ -33,19 +33,19 @@ class SiteSeeder extends Seeder $site->picture_1 = FileStorageHelper::storeFile( new Site(), new \SplFileInfo(\resource_path( - '../database/factories/assets/sites/default-picture-100x100.png' + '../database/factories/assets/sites/default-picture-813x450.jpg' )) ); $site->picture_2 = FileStorageHelper::storeFile( new Site(), new \SplFileInfo(\resource_path( - '../database/factories/assets/sites/default-picture-100x100.png' + '../database/factories/assets/sites/default-picture-813x450.jpg' )) ); $site->picture_3 = FileStorageHelper::storeFile( new Site(), new \SplFileInfo(\resource_path( - '../database/factories/assets/sites/default-picture-100x100.png' + '../database/factories/assets/sites/default-picture-813x450.jpg' )) ); $site->map_picture = FileStorageHelper::storeFile( diff --git a/resources/assets/images/misc/quotes.svg b/resources/assets/images/misc/quotes.svg new file mode 100644 index 0000000..16cbf8d --- /dev/null +++ b/resources/assets/images/misc/quotes.svg @@ -0,0 +1,3 @@ + + + diff --git a/resources/sass/fo/base/_common.scss b/resources/sass/fo/base/_common.scss index f3b0aca..823e903 100644 --- a/resources/sass/fo/base/_common.scss +++ b/resources/sass/fo/base/_common.scss @@ -1,3 +1,7 @@ +@use "sass:color"; + +$color-secondary-light: color.adjust($color-secondary, $lightness: 46%); + .video-frame { .video-thumbnail { height: 100%; @@ -12,6 +16,24 @@ } } +// Mask to add a transparent effect on the right side. +.mask-white { + mask: linear-gradient(-90deg, #fff6, #fff 30%); +} + +// Rotate arrow svg (base is to the right) +.arrow-left { + transform: rotate(180deg); +} + +.arrow-bottom { + transform: rotate(90deg); +} + +.arrow-top { + transform: rotate(-90deg); +} + // * Top curve for primary sections .border-top-curved-primary { padding-top: 6rem; @@ -22,7 +44,7 @@ border-image-width: 6rem 0 0 0; } -// * Top curve for white sections +// * Top curve for white sections when the upper section is primary .border-top-curved-white { padding-top: 6rem; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 99' fill='#{urlencodecolor($color-primary)}'%3E%3Crect width='100%25' height='100%25'/%3E%3Cpath d='M0.5 98.5L0.499996 0.678555C124.136 38.9283 266.621 33.2224 389.5 0.650116L389.5 98.5L0.5 298.5Z' fill='#{urlencodecolor($color-white)}' stroke='#{urlencodecolor($color-white)}'/%3E%3C/svg%3E"); border-image-outset: 1; @@ -31,7 +53,26 @@ border-image-width: 6rem 0 0 0; } - // Map on all colors +// * Top curve for secondary-light sections +.border-top-curved-secondary-light { + padding-top: 6rem; + border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 99' fill='none'%3E%3Cpath d='M0.5 98.5L0.499996 0.678555C124.136 38.9283 266.621 33.2224 389.5 0.650116L389.5 98.5L0.5 298.5Z' fill='#{urlencodecolor($color-secondary-light)}' stroke='#{urlencodecolor($color-secondary-light)}'/%3E%3C/svg%3E"); + border-image-outset: 1; + border-image-repeat: inherit; + border-image-slice: 85 0; + border-image-width: 6rem 0 0 0; +} + +// * Top curve for white sections when the upper section is secondary-light +.border-top-curved-white-upper-secondary-light { + padding-top: 6rem; + border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 99' fill='#{urlencodecolor($color-secondary-light)}'%3E%3Crect width='100%25' height='100%25'/%3E%3Cpath d='M0.5 98.5L0.499996 0.678555C124.136 38.9283 266.621 33.2224 389.5 0.650116L389.5 98.5L0.5 298.5Z' fill='#{urlencodecolor($color-white)}' stroke='#{urlencodecolor($color-white)}'/%3E%3C/svg%3E"); border-image-outset: 1; + border-image-repeat: inherit; + border-image-slice: 85 0; + border-image-width: 6rem 0 0 0; +} + +// Map on all colors @each $idx, $color in $theme-colors { // Tilde svg .tilde-#{$idx} { @@ -71,7 +112,7 @@ border-radius: 5rem; background-color: $color; - /** stylelint-disable-next-line */ + /* stylelint-disable-next-line declaration-property-value-no-unknown */ clip-path: xywh(0 -5% 65% 75% round 15% 0); color: #fff; font-size: 2.5rem; @@ -79,6 +120,12 @@ } } +// * BACKGROUNDS +// Background color which are not exactly the defined colors in _variables.scss +.bg-secondary-light { + background-color: $color-secondary-light; +} + // LLLLLLLLLLL GGGGGGGGGGGGG // L:::::::::L GGG::::::::::::G @@ -106,5 +153,15 @@ .border-top-curved-white { border-image-slice: 100% 0; } + + // * Top curve for secondary-light sections + .border-top-curved-secondary-light { + border-image-slice: 100% 0; + } + + // * Top curve for white sections when the upper section is secondary-light + .border-top-curved-white-upper-secondary-light { + border-image-slice: 100% 0; + } } diff --git a/resources/sass/fo/fo.scss b/resources/sass/fo/fo.scss index 7779141..68ca6f4 100644 --- a/resources/sass/fo/fo.scss +++ b/resources/sass/fo/fo.scss @@ -19,4 +19,5 @@ // * PAGES @import "./pages/homepage"; @import "./pages/unveil"; +@import "./pages/site"; diff --git a/resources/sass/fo/pages/_homepage.scss b/resources/sass/fo/pages/_homepage.scss index ae85b2d..52b9212 100644 --- a/resources/sass/fo/pages/_homepage.scss +++ b/resources/sass/fo/pages/_homepage.scss @@ -168,37 +168,6 @@ } } - .life { - .mask-white { - mask: linear-gradient(-90deg, #fff6, #fff 30%); - } - - .swiper-button-prev-custom { - top: 50%; - left: 1rem; - transform: rotate(180deg); - } - - .swiper-button-next-custom { - top: calc(50% + 19px); - right: 1rem; - } - - .swiper-button-prev-custom, .swiper-button-next-custom { - position: absolute; - z-index: 20; - padding: 0.5rem; - border: 1px solid; - border-color: $primary; - border-radius: 2rem; - background-color: $color-white; - } - - .swiper-button-disabled { - display: none; - } - } - .swiper-news { clip-path: inset(-2rem -50vw 0 0); } diff --git a/resources/sass/fo/pages/_site.scss b/resources/sass/fo/pages/_site.scss new file mode 100644 index 0000000..a7b9a1b --- /dev/null +++ b/resources/sass/fo/pages/_site.scss @@ -0,0 +1,20 @@ +.site { + .words { + .swiper-sites-words { + .quote { + right: 2rem; + } + } + } + + .brands { + .swiper-sites-brands { + clip-path: inset(-2rem -50vw 0 0); + + .separator { + border-right: 1px solid; + border-right-color: #ddd; + } + } + } +} diff --git a/resources/sass/fo/vendor/_swiper.scss b/resources/sass/fo/vendor/_swiper.scss index bd865b0..fa00ffd 100644 --- a/resources/sass/fo/vendor/_swiper.scss +++ b/resources/sass/fo/vendor/_swiper.scss @@ -1 +1,27 @@ -@import '~/swiper/swiper.min.css' +@import '~/swiper/swiper.min.css'; + +// * CUSTOM STYLE +.swiper-button-prev-custom { + top: 50%; + left: 1rem; + transform: rotate(180deg); +} + +.swiper-button-next-custom { + top: calc(50% + 19px); + right: 1rem; +} + +.swiper-button-prev-custom, .swiper-button-next-custom { + position: absolute; + z-index: 20; + padding: 0.5rem; + border: 1px solid; + border-color: $primary; + border-radius: 2rem; + background-color: $color-white; +} + +.swiper-button-disabled { + display: none !important; +} diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts index df151ba..1aacf2d 100644 --- a/resources/ts/fo/base/common.ts +++ b/resources/ts/fo/base/common.ts @@ -69,8 +69,8 @@ document.addEventListener("DOMContentLoaded", function () { grabCursor: true, slidesPerView: 1.1, navigation: { - nextEl: ".swiper-button-next-custom", - prevEl: ".swiper-button-prev-custom", + nextEl: ".swiper-news-button-next", + prevEl: ".swiper-news-button-prev", }, keyboard: { enabled: true, @@ -110,6 +110,67 @@ document.addEventListener("DOMContentLoaded", function () { }, }, }, + "swiper-sites-pictures": { + modules: [Navigation, Keyboard], + grabCursor: true, + slidesPerView: 1.1, + spaceBetween: 20, + navigation: { + nextEl: ".swiper-sites-pictures-button-next", + prevEl: ".swiper-sites-pictures-button-prev", + }, + keyboard: { + enabled: true, + }, + breakpoints: { + 576: { + slidesPerView: 1.1, + }, + 768: { + slidesPerView: 1.5, + }, + 1200: { + slidesPerView: 1.3, + }, + }, + }, + "swiper-sites-words": { + modules: [Navigation, Keyboard], + grabCursor: true, + slidesPerView: 1.1, + navigation: { + nextEl: ".swiper-sites-words-button-next", + prevEl: ".swiper-sites-words-button-prev", + }, + keyboard: { + enabled: true, + }, + breakpoints: { + 992: { + slidesPerView: 2, + }, + }, + }, + "swiper-sites-brands": { + modules: [Navigation, Keyboard], + grabCursor: true, + slidesPerView: "auto", + keyboard: { + enabled: true, + }, + breakpoints: { + 576: { + slidesPerView: 1.1, + spaceBetween: 0, + }, + 768: { + slidesPerView: 1.5, + }, + 1200: { + slidesPerView: 1.3, + }, + }, + }, }; type SwiperSlider = { diff --git a/resources/ts/fo/utilities/fontawesome.ts b/resources/ts/fo/utilities/fontawesome.ts index 7dd7beb..49b59ae 100644 --- a/resources/ts/fo/utilities/fontawesome.ts +++ b/resources/ts/fo/utilities/fontawesome.ts @@ -6,8 +6,12 @@ import { faCircleInfo, faCirclePlay, faCircleXmark, + faLocationArrow, + faLocationDot, faMagnifyingGlass, - faQuestionCircle + faPaw, + faQuestionCircle, + faUserGroup } from "@fortawesome/free-solid-svg-icons"; config.autoReplaceSvg = false; @@ -19,5 +23,9 @@ library.add(faCirclePlay); library.add(faQuestionCircle); library.add(faMagnifyingGlass); library.add(faArrowRightLong); +library.add(faLocationDot); +library.add(faLocationArrow); +library.add(faUserGroup); +library.add(faPaw); dom.watch(); diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php index 82dd7f9..c1ca6f8 100644 --- a/resources/views/fo/pages/home.blade.php +++ b/resources/views/fo/pages/home.blade.php @@ -262,7 +262,7 @@ @endforeach -
+
{{ __('flèche vers la gauche') }} @@ -279,7 +279,7 @@
-
+
{{ __('flèche vers la droite') }} diff --git a/resources/views/fo/pages/site.blade.php b/resources/views/fo/pages/site.blade.php new file mode 100644 index 0000000..78bfe11 --- /dev/null +++ b/resources/views/fo/pages/site.blade.php @@ -0,0 +1,254 @@ +@extends('fo.layout') + +@section('title', $siteModel->seo_title) +@section('description', $siteModel->seo_description) +@section('breadcrumb', request()->route()->getName()) + +@section('content') +
+
+
+
+
+ {{ $siteModel->logo_alt }} +
+
+
+
+ + + {{ __('Retour') }} + +
+
+ @if ($nextSiteModel) + + {{ __('Site suivant') }} + + + @endif +
+
+
+
+
+
+
+
+
+ {{-- Swiper pictures --}} +
+
+
+ {{ $siteModel->picture_1_alt }} +
+
+ {{ $siteModel->picture_2_alt }} +
+
+ {{ $siteModel->picture_3_alt }} +
+
+
+
+ {{ __('flèche vers la gauche') }} +
+
+
+
+
+
+ {{ __('flèche vers la droite') }} +
+
+
+
+
+
+

{{ $siteModel->name }}

+

{{ $siteModel->description }}

+

{{ $siteModel->description_2 }}

+
+
+
+
+ {{-- TODO: Formatter après avoir monté la version de Laravel, après avoir débloqué les accès de Nicolas sur git --}} +

{{ $siteModel->employees }} {{ __('personnes') }}

+
+
+ {{-- FIXME: fournir pictos pour SpeciesEnum. --}} + +

+ @php + $pictoLabels = []; + foreach ($siteModel->pictos as $picto) { + $pictoLabels[] = \App\Enums\Sites\SpeciesEnum::make($picto)->label(); + } + @endphp + {{ implode(', ', $pictoLabels) }} +

+
+
+
+
+
+
+
+
+ {{ $siteModel->map_picture_alt }} +
+
+
+
+
+
+ +
+
+
{{ $siteModel->name }}
+ {{-- FIXME: EVO BO : Eventuellement splitter en BO l'adresse et le postcode --}} +

{{ $siteModel->address }}

+

{{ __('Téléphone') }} : {{ $siteModel->phone_number }}

+
+
+
+
+
+ +
+
+
{{ __('Accès') }} :
+ @foreach ($siteModel->access_line as $access_line) +

{{ $access_line }}

+ @endforeach +
+
+
+
+
+
+
+
+
+
+
+
+

{{ __('Le mot de...') }}

+
+
+
+ {{-- Swiper words --}} +
+
+
+
+ {{-- FIXME: A l'origine, ces parties ne contiennent que le nom, la fonction et un texte. Une image est demandée en plus dans la créa. --}} +
+
+
+ @include('fo.partials.testimonials.card', [ + 'job' => __('Directeur du site'), + 'name' => $siteModel->director_name, + 'speach' => $siteModel->director_speach, + 'bgClass' => 'bg-primary', + // 'jobClass' => 'text-tertiary', La demande du client, mais niveau accessibilité c'est pas top du tout... + 'jobClass' => 'text-white', + 'nameClass' => 'text-white', + 'speachClass' => 'text-white', + ]) +
+
+ @include('fo.partials.testimonials.card', [ + 'job' => $siteModel->employee_function, + 'name' => $siteModel->employee_name, + 'speach' => $siteModel->employee_speach, + 'bgClass' => 'bg-tertiary', + // 'jobClass' => 'text-primary', La demande du client, mais niveau accessibilité c'est pas top du tout... + 'jobClass' => 'text-white', + 'nameClass' => 'text-white', + 'speachClass' => 'text-white', + ]) +
+
+
+
+ {{ __('flèche vers la gauche') }} +
+
+
+
+
+
+ {{ __('flèche vers la droite') }} +
+
+
+
+
+
+
+

{{ __('Nos points forts et nos engagements') }}

+
+
+
+
+ {{-- FIXME: Ici était prévu à la base un WYSIWYG (cf doc. Périmètre du site - Fonctionnalités). La créa ne correspond pas et prévoit un slider de différentes icones. --}} +
{!! clean($siteModel->highlights) !!}
+
+
+
+
+
+ @if ($siteModel->logos) +
+
+
+
+

{{ __('Les marques fabriquées ici') }}

+
+
+ {{-- FIXME: en mobile, les logos défilent ? --}} + + {{-- Swiper brands --}} +
+
+ @foreach ($siteModel->logos as $logo) +
+
+
+
+ {{ $logo->picture_alt }} +
+
+

{{ $logo->label }}

+
+
+
+
+
+ @endforeach +
+
+
+
+
+
+ @endif +
+@endsection diff --git a/resources/views/fo/partials/testimonials/card.blade.php b/resources/views/fo/partials/testimonials/card.blade.php new file mode 100644 index 0000000..6ef2b36 --- /dev/null +++ b/resources/views/fo/partials/testimonials/card.blade.php @@ -0,0 +1,24 @@ +
!empty($bgClass), +])> + +
+
+ @if (!empty($picture)) + {{ $picture['alt'] ?? '' }} + @endif +
+

!empty($jobClass), + ])>{{ $job }}

+

!empty($nameClass)])>{{ $name }}

+
+
+
!empty($speachClass)])> + {{-- FIXME: Mettre une limite de caractères pour éviter d'avoir une carte immense par rapport à l'autre et d'avoir un rendu horrible --}} + {!! clean($speach) !!} +
+
+
diff --git a/routes/web-fo.php b/routes/web-fo.php index f9322b2..8968282 100644 --- a/routes/web-fo.php +++ b/routes/web-fo.php @@ -1,5 +1,6 @@ name('fo.')->group(function () { Route::get('/', [HomeController::class, 'index'])->name('homepage'); Route::get('/on-se-devoile', [StaticPageController::class, 'unveil'])->name('unveil'); + Route::get('/sites/{site:slug}', [SiteController::class, 'show'])->name('sites.show'); // * Iframe cookies Route::get('/frame/{frame}', function (string $frame) {