diff --git a/package-lock.json b/package-lock.json index dbc4f55..a2aebce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1050,9 +1050,9 @@ "dev": true }, "node_modules/@ldc-web/cookie-notice": { - "version": "4.0.0", - "resolved": "https://lab.s-web.fr/api/v4/projects/50/packages/npm/@ldc-web/cookie-notice/-/@ldc-web/cookie-notice-4.0.0.tgz", - "integrity": "sha1-wPt5PtlWiuOjO2sODb4YDwPeBms=", + "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": { diff --git a/package.json b/package.json index d17361a..e81e79a 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@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.0", + "@ldc-web/cookie-notice": "^4.0.1", "@sipec/vue3-tags-input": "^3.0.4", "@types/bootstrap": "^5.2.7", "@types/node": "^20.8.2", @@ -69,4 +69,4 @@ "vue-loader": "^17.3.1", "vue-tsc": "1.8.11" } -} +} \ No newline at end of file diff --git a/resources/sass/fo/utilities/_variables.scss b/resources/sass/fo/utilities/_variables.scss index 600354c..dcc7f19 100644 --- a/resources/sass/fo/utilities/_variables.scss +++ b/resources/sass/fo/utilities/_variables.scss @@ -25,8 +25,6 @@ $color-default-titles: $color-primary; $color-default-texts: $color-dark; // * FONTS -// * Keep Bs assumption -// $font-size-root: 16px; $font-default-family-base: 'Rufina', serif; // - The default site font family. $font-default-size-base: 1.125rem; // Follow crea $line-default-height-base: 1.65; @@ -35,41 +33,11 @@ $line-default-height-base: 1.65; $offcanvas-backdrop-bg: $color-white; // * HEADINGS - -// $headings-margin-bottom: $spacer * .5 !default; $headings-font-family: 'Readex-Pro', serif; - -// $headings-font-style: null !default; -// $headings-font-weight: 500 !default; -// $headings-line-height: 1.2 !default; -// $headings-color: inherit !default; $display-font-family: 'Readex Pro', sans-serif; -// $display-font-style: null !default; -// $display-font-weight: 300 !default; -// $display-line-height: $headings-line-height !default; - // * Buttons $input-btn-active-bg-color: #000; // * Inputs $input-bg: #F1F1F1; - -// scss-docs-start input-btn-variables -// $input-btn-padding-y: .375rem !default; -// $input-btn-padding-x: .75rem !default; -// $input-btn-font-family: null !default; -// $input-btn-font-size: $font-size-base !default; -// $input-btn-line-height: $line-height-base !default; -// $input-btn-focus-width: $focus-ring-width !default; -// $input-btn-focus-color-opacity: $focus-ring-opacity !default; -// $input-btn-focus-color: $focus-ring-color !default; -// $input-btn-focus-blur: $focus-ring-blur !default; -// $input-btn-focus-box-shadow: $focus-ring-box-shadow !default; -// $input-btn-padding-y-sm: .25rem !default; -// $input-btn-padding-x-sm: .5rem !default; -// $input-btn-font-size-sm: $font-size-sm !default; -// $input-btn-padding-y-lg: .5rem !default; -// $input-btn-padding-x-lg: 1rem !default; -// $input-btn-font-size-lg: $font-size-lg !default; -// $input-btn-border-width: var(--#{$prefix}border-width) !default; diff --git a/resources/sass/fo/vendor/_cookie-notice.scss b/resources/sass/fo/vendor/_cookie-notice.scss index fda1162..126ce52 100644 --- a/resources/sass/fo/vendor/_cookie-notice.scss +++ b/resources/sass/fo/vendor/_cookie-notice.scss @@ -1,615 +1,7 @@ -@use "sass:color"; +$ck-primary-color: $input-btn-active-bg-color; +$ck-secondary-color: $input-btn-active-bg-color; +$ck-background-color: $color-white; +$ck-btn-background-color: $color-white; +$ck-title-font: Sheldon, serif; -:root { - --cs-primary-color: var(); -} - -$ck-primary-color: $color-primary !default; -$ck-secondary-color: $color-secondary !default; -$ck-dark-color: $color-dark !default; -$ck-background-color: #fff !default; -$ck-list-background-color: #e4e4e4 !default; -$ck-borders-color: #808080 !default; -$ck-shadow-color: 0 0.1rem 1rem rgb(0 0 0 / 35%) !default; -$ck-title-font: Sheldon, serif !default; -$ck-title-line-height: inherit !default; -$ck-title-size: 25px !default; -$ck-text-font: 'Rufina', serif !default; -$ck-text-size: 14px !default; -$ck-btn-background-color: #fff !default; -$ck-accept-color: #3a3 !default; -$ck-deny-color: #a33 !default; - -// CN Wrapper z-index -$cn-cookie-button-z-index: 1050 !default; - -// Cookie Button dimension -$cn-cookie-button-width: 2.4rem !default; -$cn-cookie-button-height: 2.4rem !default; -$cn-cookie-button-padding: 0.3rem !default; - -// Cookie Button dimension (above mobile) -$cn-cookie-button-width-h: 3rem !default; -$cn-cookie-button-height-h: 3rem !default; -$cn-cookie-button-padding-h: 0.5rem !default; - -// Cookie Button position -$cn-cookie-button-position-left: 0.5rem; /* Distance par rapport à la gauche de la fenêtre */ -$cn-cookie-button-position-right: auto; /* Distance par rapport à la droite de la fenêtre */ -$cn-cookie-button-position-bottom: 0.5rem; /* Distance par rapport au bas de la fenêtre */ -$cn-cookie-animation-left: 0; /* Position gauche de base des cookies */ -$cn-cookie-animation-right: auto; /* Position droite de base des cookies */ - -// Cookie Button position hide btn vars -$cn-cookie-button-position-right-h: auto; -$cn-cookie-button-position-bottom-h: #{$cn-cookie-button-position-bottom - 2rem}; -$cn-cookie-button-position-left-h: #{$cn-cookie-button-position-left - 2rem}; -$cn-cookie-button-transition-show: all 1s 6s; -$cn-cookie-button-transition-hide: all 1s; - -// Buttons -$cn-button-bg-color: $ck-primary-color !default; -$cn-button-font-family: $ck-text-font !default; -$cn-button-font-size: 1rem !default; -$cn-button-line-height: 1 !default; - -@import "@ldc-web/cookie-notice/src/scss/mixins"; -@import "@ldc-web/cookie-notice/src/scss/reset"; - -/** 3.0.0 */ - -/* FENETRE D'ACCUEIL */ -$ck-bg-color: $ck-background-color; - -/* Title settings */ -$ck-w1-bgcolor-title: $ck-background-color; -$ck-w1-font-family-title: $ck-title-font; -$ck-w1-line-height-title: $ck-title-line-height; -$ck-w1-font-size-title: $ck-title-size; -$ck-w1-color-title: $ck-dark-color; - -/* Text settings */ -$ck-w1-font-family-txt: $ck-text-font; -$ck-w1-font-size-txt: $ck-text-size; -$ck-w1-color-txt: $color-dark; -$ck-w1-color-href-hover: $ck-secondary-color; - -/* Button settings */ -$ck-w1-color-btn-hover: $ck-secondary-color; -$ck-w1-font-family-btn-txt: $ck-text-font; -$ck-w1-font-size-btn-txt: $ck-text-size; -$ck-w1-color-btn-txt-hover: text($ck-secondary-color); - -/* Title settings */ -$ck-w2-font-family-title: $ck-title-font; -$ck-w2-font-size-title: $ck-title-size; -$ck-w2-color-title: $color-dark; - -/* Text settings */ -$ck-w2-font-family-txt: $ck-text-font; -$ck-w2-font-size-txt: $ck-text-size; -$ck-w2-color-txt: $color-dark; - -/* Accept/Deny btn settings */ -$ck-color-accept: $ck-borders-color; -$ck-color-deny: $ck-borders-color; -$ck-color-accept-hover: $ck-accept-color; -$ck-color-deny-hover: $ck-deny-color; -$ck-color-txt: #fff; - -/* Cookies list settings */ -$ck-bgcolor-list: $ck-list-background-color; -$ck-font-family-list: $ck-text-font; -$ck-font-size-list: $ck-text-size; -$ck-color-list: $ck-secondary-color; -$ck-color-title: $ck-secondary-color; -$breakpoint-mobile: 535px; - -%nav-button { - display: flex; - height: 3rem; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0; - background-color: $ck-primary-color; - color: $ck-dark-color; - font-family: $ck-text-font; - font-size: 1rem; - - &:hover, - &:focus { - background-color: $ck-dark-color; - color: $ck-primary-color; - } - - &:focus { - outline-color: $ck-primary-color; - } -} - -// * Prevent click on clickable element using cookie notice - -.cn-modal-bg { - display: none; -} - -.cn-open .cn-modal-bg { - position: fixed; - z-index: 1030; - top: 0; - display: block; - width: 100vw; - height: 100vh; - background-color: rgb(0 0 0 / 60%); -} - -.cn-disabled { - pointer-events: none; -} - -#cn-wrapper { - @extend %reset-styles; - // Display over BS elements - z-index: $cn-cookie-button-z-index; - - // BIG COOKIE BTN - #cn-cookie-btn { - position: fixed; - right: $cn-cookie-button-position-right; - bottom: $cn-cookie-button-position-bottom; - left: $cn-cookie-button-position-left; - width: $cn-cookie-button-width; - height: $cn-cookie-button-height; - padding: $cn-cookie-button-padding; - background-color: $ck-btn-background-color; - border-radius: 100%; - box-shadow: $ck-shadow-color; - cursor: pointer; - - @media (min-width: $breakpoint-mobile) { - right: $cn-cookie-button-position-right-h; - bottom: $cn-cookie-button-position-bottom-h; - left: $cn-cookie-button-position-left-h; - width: $cn-cookie-button-width-h; - height: $cn-cookie-button-height-h; - padding: $cn-cookie-button-padding-h; - transition: $cn-cookie-button-transition-show; - - &:hover { - right: $cn-cookie-button-position-right; - bottom: $cn-cookie-button-position-bottom; - left: $cn-cookie-button-position-left; - transition: $cn-cookie-button-transition-hide; - } - } - - &:focus { - outline-color: color.adjust( - $color: $ck-secondary-color, - $lightness: -10% - ); - } - - &-icon { - path { - fill: $ck-secondary-color; - } - - circle { - fill: $ck-secondary-color; - } - } - } - - // COOKIE BANNER MODAL - #cn-banner { - position: fixed; - z-index: $cn-cookie-button-z-index; - top: 0; - bottom: 0; - left: 0; - display: flex; - width: 100vw; - height: 100vh; - max-height: 100vh; - flex-direction: column; - align-items: center; - justify-content: flex-end; - padding: 0; - margin: auto; - margin-bottom: 0; - background-color: $ck-bg-color; - border-radius: 0; - box-shadow: $ck-shadow-color; - line-height: initial; - opacity: 0; - // * prevent body scroll (for mobile) - pointer-events: none; - transition: 0.3s; - user-select: none; - visibility: hidden; - - .cn-modal-top-line { - align-self: end; - - #cn-close-modal { - width: 4rem; - height: 3rem; - border-bottom-left-radius: 0.5rem; - - @media (min-width: $breakpoint-mobile) { - width: 3rem; - height: 2rem; - border-top-right-radius: 0.5rem; - } - } - } - - // * allow child body scroll - > * { - pointer-events: all; - } - - @media (min-width: $breakpoint-mobile) { - right: $cn-cookie-animation-right; - bottom: calc($cn-cookie-button-position-bottom + 60px); - left: $cn-cookie-animation-left; - width: 30rem; - height: auto; - max-height: 26rem; - border-radius: 0.5rem; - } - } - - #cn-li-template { - display: none; - } - - .d-none { - display: none !important; - } - - // CONTENT WRAPPER - .cn-content { - flex-grow: 1; - padding: 0.8rem; - overflow-y: auto; - - // 1rst Page BANNER - .cn-banner-content { - display: flex; - min-height: 100%; - flex-direction: column; - color: $ck-w1-color-txt; - font-family: $ck-w1-font-family-txt; - font-size: $ck-w1-font-size-txt; - - @media (min-width: $breakpoint-mobile) { - flex-flow: row wrap; - align-items: center; - - .cn-banner-img { - width: 33%; - } - - .cn-banner-text { - width: 66%; - } - } - - // LOGO - .cn-banner-img { - text-align: center; - - img { - width: 90%; - object-fit: contain; - } - } - - .cn-banner-text { - flex: 2; - - // TITLE - .cn-banner-title { - color: $ck-w1-color-title; - font-family: $ck-w1-font-family-title; - font-size: $ck-w1-font-size-title; - font-weight: bold; - line-height: $ck-w1-line-height-title; - text-align: left; - } - - .cn-banner-para-p { - margin: 6px 0; - text-align: justify; - } - } - - .cn-banner-details { - display: flex; - overflow: hidden; - height: 0; - flex-direction: row; - align-items: flex-start; - justify-content: center; - text-align: justify; - transition: 0.3s; - } - - .cn-banner-btn-details { - width: 100%; - margin: 1rem 0; - } - - .cn-banner-btn-details-p { - @extend %nav-button; - - display: inline-block; - width: 100%; - margin: 0 auto; - cursor: pointer; - font-size: 14px; - text-align: center; - } - } - - // 2nd Page MODAL - .cn-modal-container { - .cn-modal-title { - color: $ck-w2-color-title; - font-family: $ck-w2-font-family-title; - font-size: $ck-w2-font-size-title; - font-weight: bold; - text-align: center; - } - - .cn-modal-subtitle { - margin-bottom: 6px; - color: $ck-w2-color-txt; - color: $ck-w2-color-title; - font-family: $ck-w2-font-family-txt; - font-size: $ck-w2-font-size-txt; - text-align: center; - } - - .cn-modal-description { - display: flex; - flex-direction: column; - align-items: center; - color: $ck-w2-color-txt; - font-family: $ck-w2-font-family-txt; - font-size: $ck-w2-font-size-txt; - font-weight: normal; - line-height: initial; - } - - .cn-modal-wrapper { - position: relative; - display: flex; - overflow: auto; - flex-direction: column; - align-items: center; - - ul { - display: flex; - flex-direction: column; - padding: 0 20px; - list-style: none; - } - - .cn-cookie-wrapper { - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - padding: 20px; - border: 1px solid $ck-bgcolor-list; - margin: 10px 0; - border-radius: 20px; - } - - span { - color: $ck-color-list; - font-family: $ck-font-family-list; - font-size: $ck-font-size-list; - } - - a { - color: $ck-color-list; - font-family: $ck-font-family-list; - font-size: $ck-font-size-list; - } - - label { - color: $ck-color-list; - font-family: $ck-font-family-list; - font-size: $ck-font-size-list; - } - } - - .cn-cookie { - &-name { - color: $ck-color-title; - } - - &-infos { - display: flex; - width: 100%; - flex: 1; - flex-direction: column; - - span:first-of-type { - font-size: calc($ck-font-size-list * 1.25); - font-weight: bold; - } - - .cn-cookie-description { - color: $ck-w2-color-txt; - } - - a { - width: fit-content; - } - } - - &-buttons { - display: flex; - width: 200px; - justify-content: space-around; - margin-top: 6px; - - input { - display: none; - } - - label { - display: block; - width: 100px; - padding: 6px 20px; - color: $ck-color-txt; - cursor: pointer; - transition: color 0.3s; - } - - div { - display: table; - margin: 0.5em; - text-align: center; - } - } - } - - .accept, - .deny { - label { - @extend %nav-button; - - height: inherit; - background: $ck-color-accept; - } - } - - .accept { - label:hover, - label:focus { - background-color: color.adjust( - $color: $ck-color-accept-hover, - $lightness: -10% - ); - } - - .active { - background-color: $ck-color-accept-hover; - } - } - - .deny { - label:hover, - label:focus { - background-color: color.adjust( - $color: $ck-color-deny-hover, - $lightness: -10% - ); - } - - .active { - background-color: $ck-color-deny-hover; - } - } - - // stylelint-disable-next-line selector-max-compound-selectors - .accept input:checked ~ label { - background-color: $ck-color-accept-hover; - } - // stylelint-disable-next-line selector-max-compound-selectors - .deny input:checked ~ label { - background-color: $ck-color-deny-hover; - } - } - } - - // NAV BAR - .cn-nav { - display: flex; - overflow: hidden; - width: 100%; - height: 3rem * 2; - flex-shrink: 0; - flex-wrap: wrap; - align-items: center; - border-top: 1px solid $ck-borders-color; - - #cn-deny-banner { - @extend %nav-button; - - width: 50%; - } - - #cn-accept-banner { - @extend %nav-button; - - width: 50%; - border-right: 1px solid $ck-borders-color; - border-left: 1px solid $ck-borders-color; - font-weight: bolder; - } - - #cn-settings-banner { - @extend %nav-button; - - width: 100%; - border-top: 1px solid $ck-borders-color; - } - - @media (min-width: $breakpoint-mobile) { - height: 3rem; - flex-wrap: initial; - border-bottom-left-radius: 0.5rem; - border-bottom-right-radius: 0.5rem; - - #cn-deny-banner { - width: 33.33%; - } - - #cn-accept-banner { - width: 33.33%; - } - - #cn-settings-banner { - width: 33.33%; - border-top: initial; - } - } - } - - @media (min-width: $breakpoint-mobile) { - width: 100%; - height: 100%; - } -} - -// SHOW CN BANNER MODAL -.cn-open { - overflow: hidden !important; - - #cn-wrapper #cn-banner { - opacity: 1; - visibility: visible; - - @media (min-width: $breakpoint-mobile) { - right: $cn-cookie-button-position-right; - left: $cn-cookie-button-position-left; - } - } - - #cn-wrapper #cn-cookie-btn { - @media (min-width: $breakpoint-mobile) { - right: $cn-cookie-button-position-right; - bottom: $cn-cookie-button-position-bottom; - left: $cn-cookie-button-position-left; - transition: $cn-cookie-button-transition-hide; - } - } -} +@import "@ldc-web/cookie-notice"; diff --git a/resources/views/fo/pages/contact.blade.php b/resources/views/fo/pages/contact.blade.php index 9b01fc2..bfba988 100644 --- a/resources/views/fo/pages/contact.blade.php +++ b/resources/views/fo/pages/contact.blade.php @@ -34,7 +34,7 @@
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
-
+
-
+
-
+
@@ -152,7 +153,7 @@
-
+
-
+
@@ -171,7 +172,7 @@
-
+

{{ Str::of(__('souhaitez-vous joindre une photo ?'))->ucFirst()->value() }} @@ -195,7 +196,7 @@

-
+
@@ -203,7 +204,8 @@
-
+
-
+
+ data-sitekey="{{ config('services.google.recaptcha.public') }}" type="submit" + inert="true">{{ Str::ucfirst(__('contact.send')) }}
@@ -270,7 +273,9 @@ 'sitekey': '{{ config('services.google.recaptcha.public') }}' }); document.getElementById('recaptcha-warning').remove(); - document.getElementById('contact-form').inert = false; + document.getElementById('contact-form').querySelectorAll('[inert="true"]').forEach(element => { + element.inert = false; + }); }; }); diff --git a/resources/views/vendor/cookie-notice-templates/standard.blade.php b/resources/views/vendor/cookie-notice-templates/standard.blade.php index 154a40c..d5dc341 100644 --- a/resources/views/vendor/cookie-notice-templates/standard.blade.php +++ b/resources/views/vendor/cookie-notice-templates/standard.blade.php @@ -5,15 +5,15 @@ {{ $strings->picture_cookie_title }} - - - - - - - - + fill="#000000" /> + + + + + + + + {{-- BANNER --}}