From b16eb6ceb786d8907256735a47ebbb3f8dae470a Mon Sep 17 00:00:00 2001 From: Noah Lancien Date: Tue, 27 Feb 2024 13:59:16 +0100 Subject: [PATCH] WIP: Adding the 'on se devoile' page --- app/Http/Controllers/Fo/HomeController.php | 2 +- .../Controllers/Fo/StaticPageController.php | 30 ++ package-lock.json | 14 + package.json | 2 + resources/lang/fr/cookie-notice.php | 51 ++++ resources/sass/fo/base/_common.scss | 111 +++++++- resources/sass/fo/base/_layout.scss | 138 ++-------- resources/sass/fo/fo.scss | 4 + resources/sass/fo/pages/_homepage.scss | 118 ++++++++ resources/sass/fo/pages/_unveil.scss | 141 ++++++++++ resources/sass/fo/utilities/_mixins.scss | 7 +- resources/sass/fo/vendor/_bootstrap.scss | 1 + resources/sass/fo/vendor/_cookie-notice.scss | 1 + resources/sass/fo/vendor/_fancybox.scss | 1 + resources/ts/fo/base/common.ts | 160 ++++++----- .../HistoricalMilestonesSliderComponent.vue | 259 ++++++++++++++++++ resources/ts/fo/fo.ts | 11 + resources/ts/fo/pages/home.ts | 11 + resources/ts/fo/pages/unveil.ts | 53 ++++ resources/ts/fo/utilities/fontawesome.ts | 2 + resources/ts/index.d.ts | 6 +- resources/views/fo/layout.blade.php | 1 + .../views/fo/layouts/key-number.blade.php | 17 ++ resources/views/fo/layouts/nav-menu.blade.php | 5 +- resources/views/fo/modules/frame.blade.php | 20 ++ .../views/fo/modules/video-frame.blade.php | 17 +- resources/views/fo/pages/home.blade.php | 95 +++++-- resources/views/fo/pages/unveil.blade.php | 256 +++++++++++++++++ .../fo/partials/strips/strip-item.blade.php | 6 +- resources/views/vendor/cn-cookies.blade.php | 238 ++++++++++++++++ .../standard.blade.php | 82 ++++++ routes/web-fo.php | 8 + 32 files changed, 1650 insertions(+), 218 deletions(-) create mode 100644 app/Http/Controllers/Fo/StaticPageController.php create mode 100644 resources/lang/fr/cookie-notice.php create mode 100644 resources/sass/fo/pages/_unveil.scss create mode 100644 resources/sass/fo/vendor/_cookie-notice.scss create mode 100644 resources/sass/fo/vendor/_fancybox.scss create mode 100644 resources/ts/fo/components/HistoricalMilestonesSliderComponent.vue create mode 100644 resources/ts/fo/pages/home.ts create mode 100644 resources/ts/fo/pages/unveil.ts create mode 100644 resources/views/fo/layouts/key-number.blade.php create mode 100644 resources/views/fo/modules/frame.blade.php create mode 100644 resources/views/fo/pages/unveil.blade.php create mode 100644 resources/views/vendor/cn-cookies.blade.php create mode 100644 resources/views/vendor/cookie-notice-templates/standard.blade.php diff --git a/app/Http/Controllers/Fo/HomeController.php b/app/Http/Controllers/Fo/HomeController.php index daac7a8..1ffef0a 100644 --- a/app/Http/Controllers/Fo/HomeController.php +++ b/app/Http/Controllers/Fo/HomeController.php @@ -24,7 +24,7 @@ class HomeController extends Controller $sectionModels = Section::query()->where('page_id', $staticPageModel->id)->get(); $stripModels = Strip::query()->where('published', true) ->orderBy('publish_at', 'DESC') - ->limit(12) + ->limit(6) ->with('news') ->get(); $newsModels = News::query()->where('published', true) diff --git a/app/Http/Controllers/Fo/StaticPageController.php b/app/Http/Controllers/Fo/StaticPageController.php new file mode 100644 index 0000000..c26592e --- /dev/null +++ b/app/Http/Controllers/Fo/StaticPageController.php @@ -0,0 +1,30 @@ +where('type', StaticPageType::unveil)->first(); + $sectionModels = Section::query()->where('page_id', $staticPageModel->id)->get(); + $historicalMilestoneModels = HistoricalMilestone::query() + ->orderBy('year', 'ASC') + ->get(); + $siteModel = Site::query()->first(); + + return view('fo.pages.unveil', compact('staticPageModel', 'sectionModels', 'historicalMilestoneModels', 'siteModel')); + } +} diff --git a/package-lock.json b/package-lock.json index 9a9ba87..e312292 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "@babel/core": "^7.22.11", "@babel/types": "^7.21.2", "@erbelion/vite-plugin-laravel-purgecss": "^0.2.3", + "@fancyapps/ui": "^5.0.33", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/vue-fontawesome": "^3.0.5", + "@ldc-web/cookie-notice": "^4.0.1", "@sipec/vue3-tags-input": "^3.0.4", "@types/bootstrap": "^5.2.7", "@types/node": "^20.8.2", @@ -905,6 +907,12 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fancyapps/ui": { + "version": "5.0.33", + "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.33.tgz", + "integrity": "sha512-nYW7ntjhrpqoLz/vA9KpJ2zJ5gXRB7rpFKXWjW4GC1f2st/IoI1Oy2TEEz0xABIlvPTCuoMXaT1X3UC7bP97rA==", + "dev": true + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "6.5.1", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz", @@ -1061,6 +1069,12 @@ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==", "dev": true }, + "node_modules/@ldc-web/cookie-notice": { + "version": "4.0.1", + "resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-4.0.1.tgz", + "integrity": "sha1-NvTFoKF7Ki/+3PDr9hmqjjTFuZE=", + "dev": true + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", diff --git a/package.json b/package.json index 3ed4838..b66f9d2 100644 --- a/package.json +++ b/package.json @@ -17,10 +17,12 @@ "@babel/core": "^7.22.11", "@babel/types": "^7.21.2", "@erbelion/vite-plugin-laravel-purgecss": "^0.2.3", + "@fancyapps/ui": "^5.0.33", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-regular-svg-icons": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/vue-fontawesome": "^3.0.5", + "@ldc-web/cookie-notice": "^4.0.1", "@sipec/vue3-tags-input": "^3.0.4", "@types/bootstrap": "^5.2.7", "@types/node": "^20.8.2", diff --git a/resources/lang/fr/cookie-notice.php b/resources/lang/fr/cookie-notice.php new file mode 100644 index 0000000..cd628ee --- /dev/null +++ b/resources/lang/fr/cookie-notice.php @@ -0,0 +1,51 @@ + 'Personnaliser les cookies', + 'button_close_cookies' => 'Fermer la fenêtre des cookies', + 'button_forbid' => 'Interdire', + 'button_allow' => 'Autoriser', + 'button_forbid_all' => 'Tout refuser', + 'button_allow_all' => 'Tout accepter', + 'button_forbid_all_title' => 'Refuser tous les cookies et fermer le panneau des cookies', + 'button_allow_all_title' => 'Accepter tous les cookies et fermer le panneau des cookies', + 'button_customize' => 'Personnaliser', + 'button_back' => 'Retour', + 'button_title_open_new_tab' => 'Ouvrir le lien dans un nouvel onglet', + 'banner_title' => 'Le site internet :site_name utilise des cookies !', + 'banner_text' => 'Nous utilisons des cookies pour nous assurer du bon fonctionnement de notre site et à des fins analytiques. + Vous pouvez changer d’avis à tout moment en cliquant sur l’icône présente sur chaque page de notre site. + En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l’utilisation de technologies de suivi nécessaires à leur bon fonctionnement.', + 'modal_title' => 'Fenêtre de gestion de cookies', + 'panel_title' => 'Panneau de gestion des cookies', + 'panel_content' => 'Contenu du panneau des cookies', + 'panel_subtitle' => 'Le respect de votre vie privée est notre priorité', + 'panel_details' => 'Les fonctionnalités de ce site s’appuient sur des services proposés par des tiers. Si vous acceptez, ces tiers déposeront des cookies qui vous permettront de visualiser sur le site du contenu hébergé par ces tiers. Via ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément à leur politique de confidentialité (lien ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement soit service par service.', + 'picture_cookie_title' => 'Image d’un bon gros cookie', + 'navigation_title' => 'Navigation du panneau des cookies', + 'custom' => [ + 'analytics' => [ + 'title' => 'Google Analytics', + 'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.', + ], + 'youtube' => [ + 'name' => 'Youtube', + 'description' => 'Les cookies placés via les services de partage de vidéos sont destinés à permettre à l’utilisateur de visionner des contenus multimédias directement sur le site.', + 'labelLink' => 'En apprendre plus', + 'warning' => 'Vous devez accepter les cookies pour visionner cette vidéo', + ], + 'matomo' => [ + 'title' => 'Matomo', + 'description' => 'Les services de mesure d’audience permettent de générer des statistiques de fréquentation utiles à l’amélioration du site.', + 'labelLink' => 'En apprendre plus', + ], + 'recaptcha' => [ + 'title' => 'reCAPTCHA', + 'description' => 'Les cookies qui sont déposés via le recaptcha sur les formulaires ont pour finalité d’empêcher que ceux-ci ne soient soumis par des robots.', + 'labelLink' => 'En apprendre plus', + 'warning' => 'Vous devez accepter les cookies pour envoyer le formulaire', + ] + ] +]; diff --git a/resources/sass/fo/base/_common.scss b/resources/sass/fo/base/_common.scss index 2bd6dce..f3b0aca 100644 --- a/resources/sass/fo/base/_common.scss +++ b/resources/sass/fo/base/_common.scss @@ -1 +1,110 @@ -// Empty. +.video-frame { + .video-thumbnail { + height: 100%; + object-fit: cover; + } + + .video-play-button { + top: calc(50% - (15% / 2)); + left: calc(50% - (15% / 2)); + height: 15%; + border-radius: 5rem; + } +} + +// * Top curve for primary sections +.border-top-curved-primary { + 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-primary)}' stroke='#{urlencodecolor($color-primary)}'/%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 +.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; + 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} { + @include tilde($color); + + height: 2rem; + background-size: 100% 100%; + } + + // Text bubbles with the spike at the bottom side + .text-bubble-top-#{$idx} { + &::before { + @include text-bubble-top($color); + + position: absolute; + z-index: -1; + left: 50%; + width: 100%; + height: 12rem; + background-size: 100% 100%; + content: " "; + transform: translateX(-50%); + } + } + + .plus-corner-#{$idx} { + &::before { + position: absolute; + left: 1rem; + content: "+"; + } + + right: -1.25rem; + bottom: -1.5rem; + width: 4rem; + height: 4rem; + border-radius: 5rem; + background-color: $color; + + /** stylelint-disable-next-line */ + clip-path: xywh(0 -5% 65% 75% round 15% 0); + color: #fff; + font-size: 2.5rem; + line-height: 2.5rem; + } +} + + +// LLLLLLLLLLL GGGGGGGGGGGGG +// L:::::::::L GGG::::::::::::G +// L:::::::::L GG:::::::::::::::G +// LL:::::::LL G:::::GGGGGGGG::::G +// L:::::L G:::::G GGGGGG +// L:::::L G:::::G +// L:::::L G:::::G +// L:::::L G:::::G GGGGGGGGGG +// L:::::L G:::::G G::::::::G +// L:::::L G:::::G GGGGG::::G +// L:::::L G:::::G G::::G +// L:::::L LLLLLL G:::::G G::::G +// LL:::::::LLLLLLLLL:::::L G:::::GGGGGGGG::::G +// L::::::::::::::::::::::L GG:::::::::::::::G +// L::::::::::::::::::::::L GGG::::::GGG:::G +// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG +@include media-breakpoint-up(lg) { + // * Top curve for blue sections + .border-top-curved-primary { + border-image-slice: 100% 0; + } + + // * Top curve for white sections + .border-top-curved-white { + border-image-slice: 100% 0; + } +} + diff --git a/resources/sass/fo/base/_layout.scss b/resources/sass/fo/base/_layout.scss index d261a2b..ea0d00d 100644 --- a/resources/sass/fo/base/_layout.scss +++ b/resources/sass/fo/base/_layout.scss @@ -132,7 +132,35 @@ body { height: inherit; .swiper-banner { - height: 90vh; + height: 100vh; + + .swiper-banner-pagination { + bottom: 2rem; + left: 5%; + height: 3rem; + } + + .swiper-pagination-bullet { + position: absolute; + bottom: 0.25rem; + width: 2.5rem; + height: 2.5rem; + border: 2px solid; + border-color: $color-white; + border-radius: 4rem; + background-size: cover; + + &:hover { + cursor: pointer; + } + } + + .swiper-pagination-bullet-active { + bottom: 0; + width: 3rem; + height: 3rem; + border-color: $color-quad; + } } .banner-arrow { @@ -141,63 +169,6 @@ body { } } - // * Top curve for blue sections - .border-top-curved-primary { - 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-primary)}' stroke='#{urlencodecolor($color-primary)}'/%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 - .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 57' fill='none'%3E%3Cpath d='M0.499972 29.1318L0.500005 0.499966L389.5 0.5L389.5 29.1157C266.602 61.7376 124.072 67.4412 0.499972 29.1318Z' fill='#{urlencodecolor($color-primary)}' stroke='#{urlencodecolor($color-primary)}'/%3E%3C/svg%3E"); - // border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 57' fill='#{urlencodecolor($color-white)}'%3E%3Crect width='100%25' height='100%25'/%3E%3Cpath d='M0.499972 29.1318L0.500005 0.499966L389.5 0.5L389.5 29.1157C266.602 61.7376 124.072 67.4412 0.499972 29.1318Z' fill='#{urlencodecolor($color-primary)}' stroke='#{urlencodecolor($color-primary)}'/%3E%3C/svg%3E"); - 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; - border-image-repeat: inherit; - border-image-slice: 85 0; - border-image-width: 6rem 0 0 0; - } - - .text-bubble-top-sixt { - &::before { - @include text-bubble-top($color-sixt); - - position: absolute; - z-index: -1; - // top: -2rem; - left: 50%; - // display: inline-block; - width: 100%; - height: 12rem; - // background-position-x: center; - // background-position-y: 81%; - // background-repeat: no-repeat; - background-size: 100% 100%; - content: " "; - transform: translateX(-50%); - } - } - - .text-bubble-top-quad { - &::before { - @include text-bubble-top($color-quad); - - position: absolute; - z-index: -1; - left: 50%; - width: 100%; - height: 12rem; - background-size: 100% 100%; - content: " "; - transform: translateX(-50%); - } - } - > header { position: fixed; z-index: 50; @@ -367,16 +338,6 @@ body { } } } - - // * Top curve for blue sections - .border-top-curved-primary { - border-image-slice: 100% 0; - } - - // * Top curve for white sections - .border-top-curved-white { - border-image-slice: 100% 0; - } } } @@ -402,48 +363,7 @@ body { > .banner-section { .banner.banner-slider { @include rfs(35.625rem, height); - - // .swiper-banner { - // height: inherit; - - // .swiper-banner-pagination { - // bottom: 2rem; - // left: 5%; - // height: 5rem; - // } - - // .swiper-pagination-bullet { - // position: absolute; - // width: 5rem; - // height: 5rem; - // border: 2px solid; - // border-color: $color-white; - // border-radius: 4rem; - // background-size: cover; - - // &:hover { - // cursor: pointer; - // } - // } - - // .swiper-pagination-bullet-active { - // bottom: -0.5rem; - // width: 6rem; - // height: 6rem; - // border-color: $color-quad; - // } - // } } } - - // // * Top curve for blue sections - // .border-top-curved-primary { - // border-image-slice: 100% 0; - // } - - // // * Top curve for white sections - // .border-top-curved-white { - // border-image-slice: 100% 0; - // } } } diff --git a/resources/sass/fo/fo.scss b/resources/sass/fo/fo.scss index 475eb03..7779141 100644 --- a/resources/sass/fo/fo.scss +++ b/resources/sass/fo/fo.scss @@ -7,6 +7,8 @@ @import "./vendor/ckEditorContent"; @import "./vendor/bootstrap"; @import "./vendor/swiper"; +@import "./vendor/cookie-notice"; +@import "./vendor/fancybox"; // * BASE @import "./base/bootstrap-overload"; @@ -16,3 +18,5 @@ // * PAGES @import "./pages/homepage"; +@import "./pages/unveil"; + diff --git a/resources/sass/fo/pages/_homepage.scss b/resources/sass/fo/pages/_homepage.scss index 9c38e1e..ae85b2d 100644 --- a/resources/sass/fo/pages/_homepage.scss +++ b/resources/sass/fo/pages/_homepage.scss @@ -16,6 +16,20 @@ } } + .team { + #joinus-carousel { + .carousel-indicators { + button { + background-color: $color-light; + } + + .active { + background-color: $color-quad; + } + } + } + } + .strip { .strip-item { width: 100vw; @@ -117,6 +131,36 @@ // LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG @include media-breakpoint-up(lg) { .homepage { + .missions { + .key-number { + position: absolute !important; + z-index: 5; + } + + .text-bubble-top-sixt { + top: -2rem; + left: 1rem; + + &::before { + transform: translate(-50%) rotate(-90deg); + } + } + + .text-bubble-top-quad { + right: 0; + bottom: -4rem; + + &::before { + transform: translate(-50%) rotate(90deg); + } + } + + .video-thumbnail { + width: 20rem; + height: 20rem; + } + } + .ambition { > div { border-radius: 2rem; @@ -178,3 +222,77 @@ } } +// XXXXXXX XXXXXXXLLLLLLLLLLL +// X:::::X X:::::XL:::::::::L +// X:::::X X:::::XL:::::::::L +// X::::::X X::::::XLL:::::::LL +// XXX:::::X X:::::XXX L:::::L +// X:::::X X:::::X L:::::L +// X:::::X:::::X L:::::L +// X:::::::::X L:::::L +// X:::::::::X L:::::L +// X:::::X:::::X L:::::L +// X:::::X X:::::X L:::::L +// XXX:::::X X:::::XXX L:::::L LLLLLL +// X::::::X X::::::XLL:::::::LLLLLLLLL:::::L +// X:::::X X:::::XL::::::::::::::::::::::L +// X:::::X X:::::XL::::::::::::::::::::::L +// XXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL +@include media-breakpoint-up(xl) { + .homepage { + .missions { + .text-bubble-top-sixt { + top: -2rem; + left: 3rem; + } + + .text-bubble-top-quad { + right: 2rem; + bottom: -4rem; + } + + .video-thumbnail { + width: 25rem; + height: 25rem; + } + } + } +} + +// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLL +// X:::::X X:::::XX:::::X X:::::XL:::::::::L +// X:::::X X:::::XX:::::X X:::::XL:::::::::L +// X::::::X X::::::XX::::::X X::::::XLL:::::::LL +// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L +// X:::::X X:::::X X:::::X X:::::X L:::::L +// X:::::X:::::X X:::::X:::::X L:::::L +// X:::::::::X X:::::::::X L:::::L +// X:::::::::X X:::::::::X L:::::L +// X:::::X:::::X X:::::X:::::X L:::::L +// X:::::X X:::::X X:::::X X:::::X L:::::L +// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L LLLLLL +// X::::::X X::::::XX::::::X X::::::XLL:::::::LLLLLLLLL:::::L +// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L +// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L +// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL +@include media-breakpoint-up(xxl) { + .homepage { + .missions { + .text-bubble-top-sixt { + top: -2rem; + left: 4rem; + } + + .text-bubble-top-quad { + right: 3rem; + bottom: -4rem; + } + + .video-thumbnail { + width: 30rem; + height: 30rem; + } + } + } +} + diff --git a/resources/sass/fo/pages/_unveil.scss b/resources/sass/fo/pages/_unveil.scss new file mode 100644 index 0000000..16eed07 --- /dev/null +++ b/resources/sass/fo/pages/_unveil.scss @@ -0,0 +1,141 @@ +@use "sass:color"; +@use "../utilities/mixins"; + +.unveil { + .ck-content { + h3 { + color: $color-sixt; + font-weight: bold; + } + } + + .key-numbers { + .key-number { + width: 10rem; + height: 10rem; + } + } + + .sites { + .embed-map { + min-height: 20rem; + } + } + + .history { + #historical-milestone-carousel { + .carousel-indicators { + bottom: -2rem; + + [data-bs-target] { + height: 2rem; + margin-right: auto; + margin-left: auto; + background-color: transparent; + opacity: 1; + text-indent: 0; + + /* stylelint-disable-next-line selector-max-compound-selectors */ + .year-selector { + bottom: -2rem; + color: color.adjust($color-primary, $alpha: -0.5); + } + } + + /* stylelint-disable-next-line selector-max-compound-selectors */ + .swiper-year .swiper-wrapper::before { + position: absolute; + top: 50%; + left: 35%; + // Unlimited width, the border should always be visible in the swiper. + width: 99999%; + border-top: 1px solid #000; + background: #000; + content: ''; + transform: translateY(-50%); + } + } + + .picture { + z-index: 0; + top: 3rem; + left: -3rem; + max-height: 70%; + transform: rotate(-15deg); + + @include media-breakpoint-up(lg) { + left: 0; + } + } + + .year { + font-size: 6rem; + + @include media-breakpoint-up(lg) { + font-size: 18rem; + } + } + } + } + + .commitments { + .ck-content { + h3 { + color: $color-white; + } + } + } +} + +// LLLLLLLLLLL GGGGGGGGGGGGG +// L:::::::::L GGG::::::::::::G +// L:::::::::L GG:::::::::::::::G +// LL:::::::LL G:::::GGGGGGGG::::G +// L:::::L G:::::G GGGGGG +// L:::::L G:::::G +// L:::::L G:::::G +// L:::::L G:::::G GGGGGGGGGG +// L:::::L G:::::G G::::::::G +// L:::::L G:::::G GGGGG::::G +// L:::::L G:::::G G::::G +// L:::::L LLLLLL G:::::G G::::G +// LL:::::::LLLLLLLLL:::::L G:::::GGGGGGGG::::G +// L::::::::::::::::::::::L GG:::::::::::::::G +// L::::::::::::::::::::::L GGG::::::GGG:::G +// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG +@include media-breakpoint-up(lg) { + .unveil { + .history { + #historical-milestone-carousel { + .carousel-indicators { + bottom: -2rem; + + [data-bs-target] { + margin-right: 3px; + margin-left: 3px; + } + + &::before { + position: absolute; + top: 50%; + left: 1rem; + width: 100vw; + border-top: 1px solid #000; + background: #000; + content: ''; + transform: translateY(-50%); + } + } + + .picture { + left: 0; + } + + .year { + font-size: 18rem; + } + } + } + } +} + diff --git a/resources/sass/fo/utilities/_mixins.scss b/resources/sass/fo/utilities/_mixins.scss index d9073ae..96bb61e 100644 --- a/resources/sass/fo/utilities/_mixins.scss +++ b/resources/sass/fo/utilities/_mixins.scss @@ -86,12 +86,13 @@ } @mixin text-bubble-top($color) { - // background-color: color.adjust($color, $lightness: 80%); - - // background-image: url("data:image/svg+xml,%3Csvg width='195' height='206' viewBox='0 0 195 206' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_946_3707)'%3E%3Cpath d='M4 14C4 8.47715 8.47715 4 14 4H180.813C186.336 4 190.813 8.47715 190.813 14V176.418C190.813 181.94 186.336 186.418 180.813 186.418H142.816C139.203 186.418 135.871 188.366 134.1 191.515L128.82 200.901C128.055 202.26 126.098 202.26 125.334 200.901L120.054 191.515C118.283 188.366 114.951 186.418 111.338 186.418H14C8.47715 186.418 4 181.94 4 176.418V14Z' fill='#{urlencodecolor(rgba-to-rgb(color.change($color, $lightness: 95%)))}'/%3E%3Cpath d='M4.25 14C4.25 8.61523 8.61522 4.25 14 4.25H180.813C186.198 4.25 190.563 8.61522 190.563 14V176.418C190.563 181.802 186.198 186.168 180.813 186.168H142.816C139.112 186.168 135.697 188.165 133.882 191.392L128.602 200.779C127.933 201.968 126.221 201.968 125.552 200.779L120.272 191.392C118.457 188.165 115.041 186.168 111.338 186.168H14C8.61522 186.168 4.25 181.802 4.25 176.418V14Z' stroke='#{urlencodecolor($color)}' stroke-width='0.5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_946_3707' x='0' y='0' width='194.813' height='205.92' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.827451 0 0 0 0 0.403922 0 0 0 0 0.219608 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_946_3707'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_946_3707' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='178' height='188' viewBox='0 0 178 188' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Rectangle 74' filter='url(%23filter0_d_774_5989)'%3E%3Cpath d='M4 14C4 8.47716 8.47715 4 14 4L164 4C169.523 4 174 8.47715 174 14L174 160C174 165.523 169.523 170 164 170L63.8485 170C60.2357 170 56.9039 171.949 55.1327 175.097L50.7432 182.901C49.9785 184.26 48.0215 184.26 47.2568 182.901L42.8673 175.097C41.0961 171.949 37.7643 170 34.1515 170H14C8.47715 170 4 165.523 4 160L4 14Z' fill='#{urlencodecolor(rgba-to-rgb(color.change($color, $lightness: 95%)))}'/%3E%3Cpath d='M4.25 14C4.25 8.61523 8.61522 4.25 14 4.25L164 4.25C169.385 4.25 173.75 8.61522 173.75 14L173.75 160C173.75 165.385 169.385 169.75 164 169.75L63.8485 169.75C60.1454 169.75 56.7303 171.747 54.9148 174.975L50.5253 182.779C49.8562 183.968 48.1438 183.968 47.4747 182.779L43.0852 174.975C41.2697 171.747 37.8546 169.75 34.1515 169.75H14C8.61522 169.75 4.25 165.385 4.25 160L4.25 14Z' stroke='#{urlencodecolor($color)}' stroke-width='0.5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_774_5989' x='0' y='0' width='178' height='187.921' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.827451 0 0 0 0 0.403922 0 0 0 0 0.219608 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_774_5989'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_774_5989' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A"); } +@mixin tilde($color) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='30' viewBox='0 0 36 30' fill='none'%3E%3Cpath d='M0 30C4.63384 13.1506 27.6847 14.5774 35.6141 0C34.4579 23.502 8.83069 19.4941 0 30Z' fill='#{urlencodecolor($color)}'/%3E%3Cpath d='M8.94144 23.7212C6.01962 24.8931 3.30272 26.2421 1.16092 28.1123C3.89455 21.2987 10.078 17.8667 16.7901 14.5975C17.3568 14.3215 17.9273 14.0467 18.4997 13.771C24.6548 10.8064 31.0201 7.74043 34.9405 2.05038C34.3745 6.74062 32.7223 10.1692 30.4269 12.796C27.7961 15.8067 24.2883 17.801 20.4896 19.4133C18.5914 20.2189 16.6306 20.9252 14.6775 21.6164C14.4629 21.6924 14.2482 21.7682 14.0338 21.8439C12.3019 22.4557 10.5816 23.0634 8.94144 23.7212Z' stroke='%23103251' stroke-opacity='0.5'/%3E%3C/svg%3E"); +} + @mixin with-count($n) { @if $n == 1 { &:first-child:nth-last-child(1) { diff --git a/resources/sass/fo/vendor/_bootstrap.scss b/resources/sass/fo/vendor/_bootstrap.scss index 9ff0a08..fc3088b 100644 --- a/resources/sass/fo/vendor/_bootstrap.scss +++ b/resources/sass/fo/vendor/_bootstrap.scss @@ -18,6 +18,7 @@ @import "bootstrap/scss/alert"; @import "bootstrap/scss/buttons"; @import "bootstrap/scss/button-group"; +@import "bootstrap/scss/carousel"; @import "bootstrap/scss/containers"; @import "bootstrap/scss/dropdown"; @import "bootstrap/scss/forms"; diff --git a/resources/sass/fo/vendor/_cookie-notice.scss b/resources/sass/fo/vendor/_cookie-notice.scss new file mode 100644 index 0000000..ef6df23 --- /dev/null +++ b/resources/sass/fo/vendor/_cookie-notice.scss @@ -0,0 +1 @@ +@import "@ldc-web/cookie-notice"; diff --git a/resources/sass/fo/vendor/_fancybox.scss b/resources/sass/fo/vendor/_fancybox.scss new file mode 100644 index 0000000..06aa23f --- /dev/null +++ b/resources/sass/fo/vendor/_fancybox.scss @@ -0,0 +1 @@ +@import "@fancyapps/ui/dist/fancybox/fancybox.css"; diff --git a/resources/ts/fo/base/common.ts b/resources/ts/fo/base/common.ts index 854c7dd..df151ba 100644 --- a/resources/ts/fo/base/common.ts +++ b/resources/ts/fo/base/common.ts @@ -1,78 +1,27 @@ +import { Fancybox } from "@fancyapps/ui"; import Swiper from "swiper"; import { Keyboard, Navigation, Pagination } from "swiper/modules"; document.addEventListener("DOMContentLoaded", function () { // * Video frames. - const videoFrameList = document.querySelectorAll( - ".video-frame" - ) as NodeListOf; - for (const videoLink of videoFrameList) { - if (!videoLink.dataset.type) { - throw new Error("Missing dataset type"); - } - if (!videoLink.dataset.frame) { - throw new Error("Missing dataset frame"); - } - // @ts-ignore - window.__CN_VIDEO = window.__CN_VIDEO ?? {}; + Fancybox.bind("[data-fancybox]"); - const newIframe = document.createElement("iframe"); - newIframe.frameBorder = "0"; - newIframe.allow = "fullscreen"; - newIframe.width = "1920px"; - newIframe.height = "1080px"; - newIframe.setAttribute("allowfullscreen", "allowfullscreen"); + // Define a multiplier according to the window size. + let windowWidth = window.innerWidth; + let multiplier = 1; - // @ts-ignore - const instance = new FsLightbox(); - instance.props.sources = [newIframe]; - - setTimeout(() => { - videoLink.addEventListener("click", (e) => { - e.preventDefault(); - - // * This comes fslightbox lib - // @ts-ignore - instance.open(); - setTimeout(function () { - // @ts-ignore - newIframe.src = window.__CN_VIDEO[videoLink.dataset.type] - ? String(videoLink.href) - : String(videoLink.dataset.frame); - }, 50); - return false; - }); - }, 300); + function getWindowWidth() { + windowWidth = window.innerWidth; + } + window.onresize = getWindowWidth; + if (windowWidth < 992) { + multiplier = 2; + } else { + multiplier = 3; } // SWIPER const swiperConfig = { - "swiper-news": { - modules: [Navigation, Keyboard], - grabCursor: true, - slidesPerView: 1.1, - navigation: { - nextEl: ".swiper-button-next-custom", - prevEl: ".swiper-button-prev-custom", - }, - keyboard: { - enabled: true, - }, - breakpoints: { - 576: { - slidesPerView: 1.1, - spaceBetween: 0, - }, - 768: { - slidesPerView: 1.5, - spaceBetween: 0, - }, - 1200: { - slidesPerView: 1.3, - spaceBetween: 0, - }, - }, - }, "swiper-banner": { modules: [Pagination, Keyboard], grabCursor: true, @@ -100,7 +49,7 @@ document.addEventListener("DOMContentLoaded", function () { element.style.backgroundImage = "url('" + slidePicture.src + "')"; // Bullet superposition element.style.zIndex = String(100 - index); - element.style.left = String(3 * index) + "rem"; + element.style.left = String(multiplier * index) + "rem"; // Keyboard navigation element.tabIndex = 0; element.role = "button"; @@ -115,6 +64,52 @@ document.addEventListener("DOMContentLoaded", function () { } } }, + "swiper-news": { + modules: [Navigation, Keyboard], + grabCursor: true, + slidesPerView: 1.1, + navigation: { + nextEl: ".swiper-button-next-custom", + prevEl: ".swiper-button-prev-custom", + }, + keyboard: { + enabled: true, + }, + breakpoints: { + 576: { + slidesPerView: 1.1, + spaceBetween: 0, + }, + 768: { + slidesPerView: 1.5, + spaceBetween: 0, + }, + 1200: { + slidesPerView: 1.3, + spaceBetween: 0, + }, + }, + }, + "swiper-year": { + modules: [Keyboard], + grabCursor: true, + slidesPerView: 1.5, + centeredSlides: true, + slideToClickedSlide: true, + keyboard: { + enabled: true, + }, + breakpoints: { + 768: { + slidesPerView: 1.5, + spaceBetween: 0, + }, + 1200: { + slidesPerView: 1.3, + spaceBetween: 0, + }, + }, + }, }; type SwiperSlider = { @@ -125,8 +120,6 @@ document.addEventListener("DOMContentLoaded", function () { const swiperVol = document.getElementsByClassName("swiper") as HTMLCollectionOf, sliders: SwiperSlider[] = []; - console.log(swiperVol); - for (const htmlElt of swiperVol) { if (!swiperConfig[htmlElt.id as keyof typeof swiperConfig]) { throw new Error(`Undefined swiper id ${htmlElt.id}`); @@ -180,3 +173,36 @@ function paginationKeyboardNavigation(swiper: Swiper) { }); }); } + +// Bootstrap Carousel +// Set all carousel items to the same height +export function carouselNormalization(carouselId: string) { + const heights = [] as number[]; //create empty array to store height values + let tallest = 0; //create variable to make note of the tallest slide + + const carouselItems = document.getElementById(carouselId)?.getElementsByClassName("carousel-item") as HTMLCollectionOf; + if (carouselItems === undefined) { + return; + } + for (const carouselItem of carouselItems) { + let was_show = 0; + // We need to display all elements to get their height, but we also need to remember which one was displayed first. + if (carouselItem.classList.contains("active")) { + was_show = 1; + } else { + carouselItem.classList.add("active"); + was_show = 0; + } + + heights.push(carouselItem.offsetHeight); + + if (was_show == 0) { + carouselItem.classList.remove("active"); + } + } + + tallest = Math.max.apply(null, heights); //cache largest value + for (const carouselItem of carouselItems) { + carouselItem.style.minHeight = tallest + "px"; + } +} diff --git a/resources/ts/fo/components/HistoricalMilestonesSliderComponent.vue b/resources/ts/fo/components/HistoricalMilestonesSliderComponent.vue new file mode 100644 index 0000000..3cd77ae --- /dev/null +++ b/resources/ts/fo/components/HistoricalMilestonesSliderComponent.vue @@ -0,0 +1,259 @@ + + + + + diff --git a/resources/ts/fo/fo.ts b/resources/ts/fo/fo.ts index 42a1497..0c65668 100644 --- a/resources/ts/fo/fo.ts +++ b/resources/ts/fo/fo.ts @@ -2,6 +2,13 @@ /// import.meta.glob(["./../../assets/images/**"]); +// COOKIE NOTICE +import CookieNotice from "@ldc-web/cookie-notice"; +window.CookieNotice = CookieNotice; + +import { Fancybox } from "@fancyapps/ui"; +window.Fancybox = Fancybox; + // UTILITIES import "./utilities/bootstrap"; import "./utilities/fontawesome"; @@ -11,3 +18,7 @@ import "./utilities/vue-fo"; import "./base/common"; import "./base/layout"; +// PAGES +import "./pages/home"; +import "./pages/unveil"; + diff --git a/resources/ts/fo/pages/home.ts b/resources/ts/fo/pages/home.ts new file mode 100644 index 0000000..e115f0f --- /dev/null +++ b/resources/ts/fo/pages/home.ts @@ -0,0 +1,11 @@ +import { carouselNormalization } from "../base/common"; + +document.addEventListener("DOMContentLoaded", function () { + const homePage = document.querySelector("section.homepage"); + if (homePage === null) { + return; + } + + // Set bootstrap carousel items to the same height + carouselNormalization("joinus-carousel"); +}); diff --git a/resources/ts/fo/pages/unveil.ts b/resources/ts/fo/pages/unveil.ts new file mode 100644 index 0000000..981d594 --- /dev/null +++ b/resources/ts/fo/pages/unveil.ts @@ -0,0 +1,53 @@ +import { carouselNormalization } from "../base/common"; + +document.addEventListener("DOMContentLoaded", function () { + const unveilPage = document.querySelector("section.unveil"); + if (unveilPage === null) { + return; + } + + // Update historical milestone carousel indicators color + const historicalMilestoneCarousel = document.getElementById("historical-milestone-carousel"); + if (historicalMilestoneCarousel === null) { + return; + } + historicalMilestoneCarousel.addEventListener("slid.bs.carousel", (event) => { + updateCarouselIndicators(event, historicalMilestoneCarousel); + }); + + // Set bootstrap carousel items to the same height + carouselNormalization("historical-milestone-carousel"); +}); + +// Update carousel indicators colors. +function updateCarouselIndicators(event: Event, carousel: HTMLElement) { + const indicators = carousel.getElementsByClassName("carousel-indicators"); + if (indicators === null) { + return; + } + + // The colors to use in the carousel, in this order. + const colors = [ + "quint", "secondary", "sixt", "quad" + ]; + + for (const indicator of indicators) { + Array.from(indicator.getElementsByTagName("button")).forEach(function (element, index) { + const text = element.firstElementChild as HTMLElement; + if (element.classList.contains("active")) { + // Change tilde color + element.classList.add("tilde-" + colors[index % 4]); + element.classList.remove("tilde-white"); + // Change text color + text.classList.add("text-" + colors[index % 4]); + } else { + // Change tilde color + element.classList.remove("tilde-" + colors[index % 4]); + element.classList.add("tilde-white"); + // Change text color + text.classList.remove("text-" + colors[index % 4]); + } + }); + } + +} diff --git a/resources/ts/fo/utilities/fontawesome.ts b/resources/ts/fo/utilities/fontawesome.ts index 1d9cf7d..7dd7beb 100644 --- a/resources/ts/fo/utilities/fontawesome.ts +++ b/resources/ts/fo/utilities/fontawesome.ts @@ -1,5 +1,6 @@ import { config, dom, library } from "@fortawesome/fontawesome-svg-core"; import { + faArrowRightLong, faCircleCheck, faCircleExclamation, faCircleInfo, @@ -17,5 +18,6 @@ library.add(faCircleInfo); library.add(faCirclePlay); library.add(faQuestionCircle); library.add(faMagnifyingGlass); +library.add(faArrowRightLong); dom.watch(); diff --git a/resources/ts/index.d.ts b/resources/ts/index.d.ts index ba9101e..36411c4 100644 --- a/resources/ts/index.d.ts +++ b/resources/ts/index.d.ts @@ -1,6 +1,8 @@ -export { }; +import type { Fancybox } from "@fancyapps/ui"; +import CookieNotice from "@ldc-web/cookie-notice"; import type VueTagsInput from "@sipec/vue3-tags-input"; import { AxiosStatic } from "axios"; +export { }; // * Enum interface EnumInterface { @@ -71,6 +73,8 @@ declare global { type Enum = EnumInterface; interface Window { + CookieNotice: typeof CookieNotice; + Fancybox: typeof Fancybox; axios: AxiosStatic; Swal: Function; vueDebug: boolean | undefined; diff --git a/resources/views/fo/layout.blade.php b/resources/views/fo/layout.blade.php index 751d16b..1a5f299 100644 --- a/resources/views/fo/layout.blade.php +++ b/resources/views/fo/layout.blade.php @@ -34,6 +34,7 @@
@include('fo.layouts.footer')
+ @include('vendor.cn-cookies') @stack('scripts-constants') @include('modules.script-constants') @vite(['resources/ts/fo/fo.ts']) diff --git a/resources/views/fo/layouts/key-number.blade.php b/resources/views/fo/layouts/key-number.blade.php new file mode 100644 index 0000000..77439b8 --- /dev/null +++ b/resources/views/fo/layouts/key-number.blade.php @@ -0,0 +1,17 @@ +@if (!empty($link)) + + @else +
+@endif +

+ {{ $keySection->data[$minicrud_selector]['value'] }}
+ {{ str(__($text))->upper() }} +

+@if (!empty($link)) +

+ +@else +
+@endif diff --git a/resources/views/fo/layouts/nav-menu.blade.php b/resources/views/fo/layouts/nav-menu.blade.php index c4b18a8..eee4790 100644 --- a/resources/views/fo/layouts/nav-menu.blade.php +++ b/resources/views/fo/layouts/nav-menu.blade.php @@ -29,8 +29,9 @@
  • @php $activePage = false; @endphp - + {{ __('On se dévoile') }}
    • diff --git a/resources/views/fo/modules/frame.blade.php b/resources/views/fo/modules/frame.blade.php new file mode 100644 index 0000000..1fb8b0f --- /dev/null +++ b/resources/views/fo/modules/frame.blade.php @@ -0,0 +1,20 @@ + + + + + + + + {{ __('Autorisation nécessaire') }} + + + +

    + {{ __('cookie-notice.custom.frame', [ + 'type' => $frame, + ]) }} +

    + + + diff --git a/resources/views/fo/modules/video-frame.blade.php b/resources/views/fo/modules/video-frame.blade.php index 6694fc6..cbc6bc5 100644 --- a/resources/views/fo/modules/video-frame.blade.php +++ b/resources/views/fo/modules/video-frame.blade.php @@ -1,14 +1,7 @@ @php $uniqueID = uniqid(); @endphp - - {{ $alt }} - +{{-- FIXME: cookie-notice ici devrait laisser l'image affichée... Remettre la classe cn-vimeo avec le fix. --}} + + {{ $alt }} + diff --git a/resources/views/fo/pages/home.blade.php b/resources/views/fo/pages/home.blade.php index a06c54e..82dd7f9 100644 --- a/resources/views/fo/pages/home.blade.php +++ b/resources/views/fo/pages/home.blade.php @@ -26,9 +26,9 @@ @php $missionSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::home_missions)->first(); @endphp -
    +
    -
    +

    {{ $missionSection->h2_title }}

    @if ($missionSection->text) @@ -40,7 +40,7 @@ href="#CHANGEME" title="{{ __('Accéder à la page \'On se dévoile\'') }}">{{ __('On se dévoile') }}
    -
    +

    @@ -55,7 +55,17 @@ {{ str(__('métiers'))->upper() }}

    - {{-- FIXME: DESKTOP:: La même vidéo qu'en mobile semble utilisée ici --}} +
    +
    + @include('fo.modules.video-frame', [ + 'type' => 'vimeo', + 'title' => __('Visionner la vidéo'), + 'link' => 'https://vimeo.com/#CHANGEME', + 'picture' => $missionSection->data['bloc_image']['value'], + 'alt' => trans('Video_about_who_we_are'), + ]) +
    +
    @@ -64,9 +74,19 @@ {{ __('On se dévoile') }}
    - {{-- FIXME: MOBILE: Une vidéo est visible sur la créa mais pas dans le bo, c'est administrable ou non ? Si non, besoin de plus d'infos --}} - - {{-- FIXME: Une image est dans le document synthèse BO et dans le minicrud, on en fait quoi ? --}} +
    +
    +
    +
    + @include('fo.modules.video-frame', [ + 'type' => 'vimeo', + 'title' => __('Visionner la vidéo'), + 'link' => 'https://vimeo.com/#CHANGEME', + 'picture' => $missionSection->data['bloc_image']['value'], + 'alt' => trans('Video_about_who_we_are'), + ]) +
    +
    @@ -100,10 +120,10 @@ $teamSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::home_team)->first(); @endphp
    -
    +
    -
    +

    {{ $teamSection->h2_title }}

    @if ($teamSection->text)
    @@ -117,9 +137,8 @@
    {{-- @endif --}}
    -
    - {{-- FIXME: Un slider de 3 éléments est visible sur la créa mais n'est pas dans le BO. Administrable ou non ? --}} -
    +
    +
    @@ -135,12 +154,48 @@
    -
    -

    - Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, perferendis odit laborum voluptate - ipsum cumque quaerat porro qui quo facilis vero ullam rem eveniet recusandae corporis a. Voluptates, - facere exercitationem? -

    +
    @@ -209,8 +264,8 @@
    {{ __('flèche vers la gauche') }} + title="{{ __('Navigation du slider (gauche)') }}" alt="{{ __('flèche vers la gauche') }}" + role="button" tabindex="0">
    diff --git a/resources/views/fo/pages/unveil.blade.php b/resources/views/fo/pages/unveil.blade.php new file mode 100644 index 0000000..4f7d99a --- /dev/null +++ b/resources/views/fo/pages/unveil.blade.php @@ -0,0 +1,256 @@ +@extends('fo.layout') + +@section('title', $staticPageModel->seo_title) +@section('description', $staticPageModel->seo_description) +@section('breadcrumb', request()->route()->getName()) + +@section('banner') + @include('fo.layouts.banner', [ + 'h1' => __($staticPageModel->title), + 'asset' => Vite::asset('resources/assets/images/banners/home_reworked.jpg'), + 'title' => __('Paysage d\'un champs de blé au soleil couchant avec une lisière en fond de tableau'), + 'alt' => __('Image de fond'), + 'displayArrow' => true, + ]) +@endsection + +@section('content') +
    + {{-- KEY NUMBERS --}} + @php + $keySection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_pole)->first(); + @endphp +
    +
    +
    +
    +

    {{ $keySection->h2_title }}

    + @if ($keySection->text) +
    + {!! clean($keySection->text) !!} +
    + @endif +
    +
    +
    +
    +
    + @include('fo.layouts.key-number', [ + 'color' => 'sixt', + 'minicrud_selector' => 'bloc_key_sites', + 'text' => 'sites', + 'link' => '#CHANGEME', + ]) + @include('fo.layouts.key-number', [ + 'color' => 'quad', + 'minicrud_selector' => 'bloc_key_especes', + 'text' => 'espèces', + 'link' => '#CHANGEME', + ]) +
    +
    +
    +
    + @include('fo.layouts.key-number', [ + 'color' => 'tertiary', + 'minicrud_selector' => 'bloc_key_ca', + 'text' => 'millions de ca', + 'link' => '#CHANGEME', + ]) + @include('fo.layouts.key-number', [ + 'color' => 'quint', + 'minicrud_selector' => 'bloc_key_collaborateurs', + 'text' => 'collaborateurs', + 'link' => '#CHANGEME', + ]) +
    +
    +
    +
    +
    + {{-- LOCAL --}} + @php + $localSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_local)->first(); + @endphp +
    +
    +
    +
    + {{-- FIXME: Ajouter une image éditable dans ce minicrud --}} +
    + +
    +
    +

    {{ $localSection->h2_title }}

    + @if ($localSection->text) +
    + {!! clean($localSection->text) !!} +
    + @endif +
    +
    +
    +
    +
    + {{-- FIXME: Entre la partie en bleu et la partie 'nos sites' est visible une autre partie sur la créa, or toutes les sections sont déjà utilisées. Qu'est-ce que c'est ? REDECOUPAGE A FAIRE DES SECTIONS --}} + {{-- FIXME: Dans cette même partie, il y a 3 images accompagnées d'une légende et d'un texte qui sont en colonne pour le mobile et en slider pour le desktop. Actuellement, ces images sont dans un WYSIWYG. On rend administrables les images ? OUI --}} + {{-- SITES --}} + @php + $siteSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_sites)->first(); + @endphp +
    +
    +
    +
    +
    +

    {{ $siteSection->h2_title }}

    + @if ($siteSection->text) +
    + {!! clean($siteSection->text) !!} +
    + @endif +
    +
    +
    + {{-- FIXME: Quelles coordonnées pour la map ? --}} +
    + +
    +
    +
    +
    +
    + {{-- OUR HISTORY --}} + @php + $historySection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_history)->first(); + @endphp +
    +
    +
    +
    +

    {{ $historySection->h2_title }}

    + @if ($historySection->text) +
    + {!! clean($historySection->text) !!} +
    + @endif +
    + {{-- HISTORICAL MILESTONES SWIPER --}} +
    + {{-- FIXME: en desktop, le carousel-indicators n'est pas mis à jour au clic. La slide change mais pas l'indicateur... --}} + @php + $colors = ['quint', 'secondary', 'sixt', 'quad']; + @endphp + +
    +
    +
    +
    + {{-- COMMITMENTS --}} + @php + $commitmentSection = $sectionModels->where('section', \App\Enums\Sections\PageSectionEnum::unveil_commitments)->first(); + @endphp +
    +
    +
    +
    +
    +

    {{ $commitmentSection->h2_title }}

    + @if ($commitmentSection->text) +
    + {!! clean($commitmentSection->text) !!} +
    + @endif +
    + {{ __('On s\'engage') }} +
    +
    +
    +
    +
    +
    +
    +@endsection diff --git a/resources/views/fo/partials/strips/strip-item.blade.php b/resources/views/fo/partials/strips/strip-item.blade.php index b468b7e..dea6465 100644 --- a/resources/views/fo/partials/strips/strip-item.blade.php +++ b/resources/views/fo/partials/strips/strip-item.blade.php @@ -1,4 +1,4 @@ -
    +
    @if ($stripModel->picto !== \App\Enums\Strips\PictoEnum::none) {{ $stripModel->picto->alt() }} @@ -6,7 +6,9 @@

    {!! clean($stripModel->text) !!}

    @if ($stripModel->news) - {{ $stripModel->news->title }} + {{ $stripModel->news->title }}  @endif
    diff --git a/resources/views/vendor/cn-cookies.blade.php b/resources/views/vendor/cn-cookies.blade.php new file mode 100644 index 0000000..bbe9195 --- /dev/null +++ b/resources/views/vendor/cn-cookies.blade.php @@ -0,0 +1,238 @@ +{{-- blade-formatter-disable --}} +@php + +$site_name = Str::ucfirst(config('app.name')); +$logo_picture_url = Vite::asset('resources/assets/images/logo.png'); +$logo_title_text = __('Logo du site :name', ['name' => $site_name]); +$logo_alt_text = __('Logo :name', ['name' => $site_name]); + +$strings = (object)[ + 'modal_title' => __('cookie-notice.modal_title'), + 'button_customize_cookies' => __('cookie-notice.button_customize_cookies'), + 'button_close_cookies' => __('cookie-notice.button_close_cookies'), + 'button_title_open_new_tab' => __('cookie-notice.button_title_open_new_tab'), + 'button_forbid' => __('cookie-notice.button_forbid'), + 'button_allow' => __('cookie-notice.button_allow'), + 'button_forbid_all' => Str::upper(__('cookie-notice.button_forbid_all')), + 'button_allow_all' => Str::upper(__('cookie-notice.button_allow_all')), + 'button_customize' => Str::upper(__('cookie-notice.button_customize')), + 'button_forbid_all_title' => __('cookie-notice.button_forbid_all_title'), + 'button_allow_all_title' => __('cookie-notice.button_allow_all_title'), + 'button_back' => Str::upper(__('cookie-notice.button_back')), + 'banner_title' => __('cookie-notice.banner_title', ['site_name' => $site_name]), + 'banner_text' => __('cookie-notice.banner_text'), + 'panel_title' => __('cookie-notice.panel_title'), + 'panel_content' => __('cookie-notice.panel_content'), + 'panel_subtitle' => __('cookie-notice.panel_subtitle'), + 'panel_details' => __('cookie-notice.panel_details'), + 'picture_cookie_title' => __('cookie-notice.picture_cookie_title'), + 'navigation_title' => __('cookie-notice.navigation_title'), +]; + +$cookies = []; + +// YOUTUBE +$cookies['youtube'] = [ + 'name' => 'VIDEOS - Youtube', + 'description' => __('Les cookies déposés via les services de partage de vidéo ont pour finalité de permettre à l’utilisateur de visionner directement sur le site le contenu multimédia.'), + 'link' => 'https://policies.google.com/technologies/cookies?hl=fr&utm_source=ucb', + 'labelLink' => __('En savoir +'), + 'cookies' => ['NID', 'VISITOR_INFO1_LIVE', 'YSC'] +]; + +$cookies['youtube']['script'] = << +@endpush diff --git a/resources/views/vendor/cookie-notice-templates/standard.blade.php b/resources/views/vendor/cookie-notice-templates/standard.blade.php new file mode 100644 index 0000000..154a40c --- /dev/null +++ b/resources/views/vendor/cookie-notice-templates/standard.blade.php @@ -0,0 +1,82 @@ +
    + + {{-- BANNER --}} +
    +
    + +
    + {{-- CONTENT VIEW --}} +
    + {{-- 1ST PAGE BANNER --}} +
    +
    + {{ $logo_alt_text }} +
    +
    +
    + {!! nl2br(e($strings->banner_title)) !!} +
    +
    +

    {!! nl2br(e($strings->banner_text)) !!}

    +
    +
    +
    + {{-- 2ND PAGE CUSTOMIZE PANEL --}} +
    +

    {{ $strings->panel_title }}

    +

    {!! nl2br(e($strings->panel_subtitle)) !!}

    +

    {!! nl2br(e($strings->panel_details)) !!}

    +
    + {{-- COOKIES LIST --}} +
      +
      +
      +
      + {{-- NAV BAR --}} + + + {{-- COOKIE LIST LI TEMPLATE --}} +
      +
      +
      + #name + #description + #link +
      +
      +
      + + +
      +
      + + +
      +
      +
      +
      +
      +
      diff --git a/routes/web-fo.php b/routes/web-fo.php index 2a0aca5..f9322b2 100644 --- a/routes/web-fo.php +++ b/routes/web-fo.php @@ -1,6 +1,7 @@ name('fo.')->group(function () { @@ -10,4 +11,11 @@ Route::middleware(['throttle:credentials'])->name('fo.')->group(function () { } Route::get('/', [HomeController::class, 'index'])->name('homepage'); + Route::get('/on-se-devoile', [StaticPageController::class, 'unveil'])->name('unveil'); + + // * Iframe cookies + Route::get('/frame/{frame}', function (string $frame) { + return view('fo.modules.frame', ['frame' => $frame]); + }) + ->where('frame', '[a-z]+')->name('frame'); });