bachir/drupal-quartiersdedemain
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

partenaires header view css js

Browse Source
This commit is contained in:
bachir
2025-03-31 16:55:10 +02:00
parent fc8699b3be
commit b3826b9501
7 changed files with 1020 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js
Vendored
+932 -53
View File
File diff suppressed because one or more lines are too long
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map
Vendored
+1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css
Vendored
+71 -71
View File
@@ -250,7 +250,7 @@ svg.ext {
} }
/*partials*/ /*partials*/
header { header[role=banner] {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100vh; height: 100vh;
@@ -261,11 +261,11 @@ header {
top: 0; top: 0;
transition: none; transition: none;
} }
header .language-switcher-language-url { header[role=banner] .language-switcher-language-url {
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
} }
header .language-switcher-language-url ul { header[role=banner] .language-switcher-language-url ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 0.6rem; font-size: 0.6rem;
@@ -273,82 +273,82 @@ header .language-switcher-language-url ul {
width: fit-content; width: fit-content;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
header .language-switcher-language-url ul { header[role=banner] .language-switcher-language-url ul {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
header .language-switcher-language-url ul li a { header[role=banner] .language-switcher-language-url ul li a {
color: white; color: white;
font-family: "gilroy-light"; font-family: "gilroy-light";
} }
header .language-switcher-language-url ul li:nth-child(1)::after { header[role=banner] .language-switcher-language-url ul li:nth-child(1)::after {
content: " / "; content: " / ";
white-space: pre; white-space: pre;
} }
header .language-switcher-language-url ul .is-active { header[role=banner] .language-switcher-language-url ul .is-active {
font-family: "gilroy-bold"; font-family: "gilroy-bold";
} }
@media (max-width: 810px) { @media (max-width: 810px) {
header { header[role=banner] {
height: 100vh; height: 100vh;
} }
header header { header[role=banner] header {
position: relative; position: relative;
flex-direction: column; flex-direction: column;
height: auto !important; height: auto !important;
} }
} }
header .contextual-region { header[role=banner] .contextual-region {
width: max-content; width: max-content;
} }
header .header_left_container { header[role=banner] .header_left_container {
flex: 0 0 100%; flex: 0 0 100%;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */ transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
header .header_left_container img { header[role=banner] .header_left_container img {
display: none; display: none;
} }
@media (max-width: 660px) { @media (max-width: 660px) {
header .header_left_container { header[role=banner] .header_left_container {
height: inherit; height: inherit;
} }
} }
header .header_left_container #block-quartiers-de-demain-logorepu-2 { header[role=banner] .header_left_container #block-quartiers-de-demain-logorepu-2 {
display: none; display: none;
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logorepu-2 { header[role=banner] .header_left_container #block-quartiers-de-demain-logorepu-2 {
height: 160px; height: 160px;
} }
} }
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header[role=banner] .header_left_container #block-quartiers-de-demain-logoepau-2 {
display: none; display: none;
height: 200px; height: 200px;
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container #block-quartiers-de-demain-logoepau-2 { header[role=banner] .header_left_container #block-quartiers-de-demain-logoepau-2 {
height: 160px; height: 160px;
} }
} }
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
margin: auto; margin: auto;
} }
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo { header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
width: 90%; width: 90%;
margin: auto; margin: auto;
} }
@media (max-width: 1650px) { @media (max-width: 1650px) {
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo { header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo {
width: 80%; width: 80%;
} }
} }
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header { header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header {
width: 100%; width: 100%;
} }
header .header_left_container img { header[role=banner] .header_left_container img {
width: auto; width: auto;
margin: auto; margin: auto;
height: calc(200px - 1rem); height: calc(200px - 1rem);
@@ -356,21 +356,21 @@ header .header_left_container img {
transition: height 0.3s; /* Add transition for smooth resizing */ transition: height 0.3s; /* Add transition for smooth resizing */
} }
@media (max-width: 891px) { @media (max-width: 891px) {
header .header_left_container img { header[role=banner] .header_left_container img {
height: 160px; height: 160px;
} }
} }
@media (max-width: 660px) { @media (max-width: 660px) {
header .header_left_container img { header[role=banner] .header_left_container img {
height: 70px; height: 70px;
} }
} }
@media (max-width: 450px) { @media (max-width: 450px) {
header .header_left_container img { header[role=banner] .header_left_container img {
height: 50px; height: 50px;
} }
} }
header .header_right_container { header[role=banner] .header_right_container {
flex: 0 0 0%; flex: 0 0 0%;
width: fit-content; width: fit-content;
min-width: fit-content; min-width: fit-content;
@@ -388,48 +388,48 @@ header .header_right_container {
padding-bottom: 0rem; padding-bottom: 0rem;
} }
@media (max-width: 660px) { @media (max-width: 660px) {
header .header_right_container { header[role=banner] .header_right_container {
padding-right: 0; padding-right: 0;
} }
} }
header .header_right_container .language-switcher-language-url { header[role=banner] .header_right_container .language-switcher-language-url {
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
} }
header .header_right_container .language-switcher-language-url ul { header[role=banner] .header_right_container .language-switcher-language-url ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: 0.6rem; font-size: 0.6rem;
padding: 0; padding: 0;
} }
@media (max-width: 660px) { @media (max-width: 660px) {
header .header_right_container .language-switcher-language-url ul { header[role=banner] .header_right_container .language-switcher-language-url ul {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media (max-width: 500px) { @media (max-width: 500px) {
header .header_right_container .language-switcher-language-url ul { header[role=banner] .header_right_container .language-switcher-language-url ul {
flex-direction: column; flex-direction: column;
margin: auto; margin: auto;
} }
} }
header .header_right_container .language-switcher-language-url ul li a { header[role=banner] .header_right_container .language-switcher-language-url ul li a {
color: white; color: white;
font-family: "gilroy-light"; font-family: "gilroy-light";
} }
header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after { header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
content: " / "; content: " / ";
white-space: pre; white-space: pre;
} }
@media (max-width: 660px) { @media (max-width: 660px) {
header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after { header[role=banner] .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
content: none; content: none;
} }
} }
header .header_right_container .language-switcher-language-url ul .is-active { header[role=banner] .header_right_container .language-switcher-language-url ul .is-active {
font-family: "gilroy-bold"; font-family: "gilroy-bold";
} }
header .header_nav_container { header[role=banner] .header_nav_container {
flex: 0 0 0%; flex: 0 0 0%;
width: 100%; width: 100%;
min-width: fit-content; min-width: fit-content;
@@ -442,17 +442,17 @@ header .header_nav_container {
flex-direction: column; flex-direction: column;
} }
@media (max-width: 500px) { @media (max-width: 500px) {
header .header_nav_container { header[role=banner] .header_nav_container {
flex: 0 0 40%; flex: 0 0 40%;
} }
} }
header .header_nav_container #block-quartiers-de-demain-entete { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete {
margin: auto; margin: auto;
} }
header .header_nav_container #block-quartiers-de-demain-entete h2 { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete h2 {
display: none; display: none;
} }
header .header_nav_container #block-quartiers-de-demain-entete ul { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@@ -462,59 +462,59 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
margin: auto; margin: auto;
} }
@media (max-width: 1025px) { @media (max-width: 1025px) {
header .header_nav_container #block-quartiers-de-demain-entete ul { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete ul {
top: 0; top: 0;
align-items: center; align-items: center;
padding-top: 0.3rem; padding-top: 0.3rem;
} }
} }
header .header_nav_container #block-quartiers-de-demain-entete ul li { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete ul li {
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete ul li {
padding-top: 0.3rem; padding-top: 0.3rem;
} }
} }
header .header_nav_container #block-quartiers-de-demain-entete ul li a { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete ul li a {
text-transform: uppercase; text-transform: uppercase;
color: white; color: white;
font-size: 0.5rem; font-size: 0.5rem;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete ul li a {
font-size: 0.6rem; font-size: 0.6rem;
} }
} }
@media (max-width: 810px) { @media (max-width: 810px) {
header .header_nav_container #block-quartiers-de-demain-entete ul li a { header[role=banner] .header_nav_container #block-quartiers-de-demain-entete ul li a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
font-size: 0.8rem; font-size: 0.8rem;
} }
} }
header .header_nav_container #block-quartiers-de-demain-selecteurdelangue { header[role=banner] .header_nav_container #block-quartiers-de-demain-selecteurdelangue {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
header .header_nav_container #block-quartiers-de-demain-selecteurdelangue { header[role=banner] .header_nav_container #block-quartiers-de-demain-selecteurdelangue {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
header .header_nav_container #block-quartiers-de-demain-selecteurdelangue .links { header[role=banner] .header_nav_container #block-quartiers-de-demain-selecteurdelangue .links {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
} }
header .header_nav_container.hidden { header[role=banner] .header_nav_container.hidden {
transform: translateX(30%); transform: translateX(30%);
} }
header .header_nav_container.visible { header[role=banner] .header_nav_container.visible {
transform: translateX(0); transform: translateX(0);
} }
header .header:hover + .header_nav_container { header[role=banner] .header:hover + .header_nav_container {
transform: translateX(0); transform: translateX(0);
} }
@@ -528,95 +528,95 @@ header .header:hover + .header_nav_container {
} }
/* Taille définitive du header après l'animation */ /* Taille définitive du header après l'animation */
.header--collapsed { header[role=banner].header--collapsed {
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */ height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%; width: 35%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
} }
@media (max-width: 1090px) { @media (max-width: 1090px) {
.header--collapsed { header[role=banner].header--collapsed {
height: 160px; height: 160px;
} }
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
.header--collapsed { header[role=banner].header--collapsed {
height: 250px; height: 250px;
} }
} }
.header--collapsed .qdd-header { header[role=banner].header--collapsed .qdd-header {
opacity: 1 !important; opacity: 1 !important;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed { header[role=banner].header--collapsed {
width: 100%; width: 100%;
height: 170px; height: 170px;
} }
} }
.header--collapsed .header_left_container { header[role=banner].header--collapsed .header_left_container {
flex: 0 0 65%; flex: 0 0 65%;
transform-origin: bottom right; transform-origin: bottom right;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed .header_left_container { header[role=banner].header--collapsed .header_left_container {
flex: 1 0 100%; flex: 1 0 100%;
} }
} }
.header--collapsed .header_nav_container { header[role=banner].header--collapsed .header_nav_container {
flex: 0 0 30%; flex: 0 0 30%;
transform-origin: bottom right; transform-origin: bottom right;
min-width: fit-content; min-width: fit-content;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed .header_nav_container { header[role=banner].header--collapsed .header_nav_container {
flex: 1 0 100%; flex: 1 0 100%;
position: relative; position: relative;
left: -100%; left: -100%;
} }
} }
.header--collapsed-already { header[role=banner].header--collapsed-already {
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */ height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%; width: 35%;
transform-origin: bottom right; transform-origin: bottom right;
transition: all 0s ease-in-out; transition: all 0s ease-in-out;
} }
.header--collapsed-already .qdd-header { header[role=banner].header--collapsed-already .qdd-header {
opacity: 1 !important; opacity: 1 !important;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed-already { header[role=banner].header--collapsed-already {
width: 100%; width: 100%;
} }
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
.header--collapsed-already { header[role=banner].header--collapsed-already {
height: 250px; height: 250px;
} }
} }
.header--collapsed-already .header_left_container { header[role=banner].header--collapsed-already .header_left_container {
flex: 0 0 65%; flex: 0 0 65%;
transform-origin: bottom right; transform-origin: bottom right;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed-already .header_left_container { header[role=banner].header--collapsed-already .header_left_container {
flex: 1 0 100%; flex: 1 0 100%;
} }
} }
.header--collapsed-already .header_nav_container { header[role=banner].header--collapsed-already .header_nav_container {
flex: 0 0 30%; flex: 0 0 30%;
min-width: fit-content; min-width: fit-content;
transform-origin: bottom right; transform-origin: bottom right;
} }
@media (max-width: 810px) { @media (max-width: 810px) {
.header--collapsed-already .header_nav_container { header[role=banner].header--collapsed-already .header_nav_container {
flex: 1 0 100%; flex: 1 0 100%;
position: relative; position: relative;
left: -100%; left: -100%;
} }
} }
@media (max-width: 550px) { @media (max-width: 550px) {
.header--collapsed-already .header_nav_container { header[role=banner].header--collapsed-already .header_nav_container {
top: 0px; top: 0px;
} }
} }
@@ -3120,7 +3120,7 @@ body {
.partenaires .layout-content .content_container .views-element-container { .partenaires .layout-content .content_container .views-element-container {
width: 80%; width: 80%;
} }
.partenaires .layout-content .content_container .views-element-container::before { .partenaires .layout-content .content_container .views-element-container .header_view::after {
content: ""; content: "";
display: block; display: block;
border-bottom: solid 2px rgb(7, 50, 194); border-bottom: solid 2px rgb(7, 50, 194);
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
+1 -1
View File
@@ -17,7 +17,7 @@
//////// start header //////////// //////// start header ////////////
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header'); const header = document.querySelector('header[role="banner"]');
const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)'); const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');
const headerNavContainer = document.querySelector('.header_nav_container'); const headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward'); const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss
+11 -7
View File
@@ -24,15 +24,19 @@
} }
} }
.views-element-container{ .views-element-container{
&::before{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
width: 80% ;
margin: auto;
}
width: 80%; width: 80%;
.header_view{
&::after{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
width: 80% ;
margin: auto;
}
}
h3{ h3{
color: rgb(7, 50, 194); color: rgb(7, 50, 194);
font-size: 2.5rem; font-size: 2.5rem;
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
+3 -3
View File
@@ -1,4 +1,4 @@
header{ header[role="banner"]{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100vh; height: 100vh;
@@ -292,7 +292,7 @@ header{
} }
} }
/* Taille définitive du header après l'animation */ /* Taille définitive du header après l'animation */
.header--collapsed { header[role="banner"].header--collapsed {
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */ height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%; width: 35%;
transform-origin: bottom right; transform-origin: bottom right;
@@ -331,7 +331,7 @@ header{
} }
} }
.header--collapsed-already{ header[role="banner"].header--collapsed-already{
height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */ height: $header-height; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%; width: 35%;
transform-origin: bottom right; transform-origin: bottom right;
web/themes/custom/quartiers_de_demain/webpack.config.js
+1
View File
@@ -3,6 +3,7 @@ const path = require("path");
let config = { let config = {
mode: 'development', mode: 'development',
devtool: "source-map",
entry: [ entry: [
"./src/assets/js/quartiers_de_demain.js", "./src/assets/js/quartiers_de_demain.js",