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 Soussi Chiadmi 2025-03-31 16:55:10 +02:00
parent fc8699b3be
commit b3826b9501
7 changed files with 1020 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

985
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

1
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

142
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -250,7 +250,7 @@ svg.ext {
}
/*partials*/
header {
header[role=banner] {
display: flex;
flex-direction: row;
height: 100vh;
@ -261,11 +261,11 @@ header {
top: 0;
transition: none;
}
header .language-switcher-language-url {
header[role=banner] .language-switcher-language-url {
text-transform: uppercase;
color: white;
}
header .language-switcher-language-url ul {
header[role=banner] .language-switcher-language-url ul {
display: flex;
flex-direction: row;
font-size: 0.6rem;
@ -273,82 +273,82 @@ header .language-switcher-language-url ul {
width: fit-content;
}
@media (max-width: 810px) {
header .language-switcher-language-url ul {
header[role=banner] .language-switcher-language-url ul {
font-size: 0.9rem;
}
}
header .language-switcher-language-url ul li a {
header[role=banner] .language-switcher-language-url ul li a {
color: white;
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: " / ";
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";
}
@media (max-width: 810px) {
header {
header[role=banner] {
height: 100vh;
}
header header {
header[role=banner] header {
position: relative;
flex-direction: column;
height: auto !important;
}
}
header .contextual-region {
header[role=banner] .contextual-region {
width: max-content;
}
header .header_left_container {
header[role=banner] .header_left_container {
flex: 0 0 100%;
display: flex;
flex-direction: row;
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
background-color: rgb(255, 255, 255);
}
header .header_left_container img {
header[role=banner] .header_left_container img {
display: none;
}
@media (max-width: 660px) {
header .header_left_container {
header[role=banner] .header_left_container {
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;
}
@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;
}
}
header .header_left_container #block-quartiers-de-demain-logoepau-2 {
header[role=banner] .header_left_container #block-quartiers-de-demain-logoepau-2 {
display: none;
height: 200px;
}
@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;
}
}
header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
header[role=banner] .header_left_container #block-quartiers-de-demain-logoquartiersdedemain {
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%;
margin: auto;
}
@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%;
}
}
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%;
}
header .header_left_container img {
header[role=banner] .header_left_container img {
width: auto;
margin: auto;
height: calc(200px - 1rem);
@ -356,21 +356,21 @@ header .header_left_container img {
transition: height 0.3s; /* Add transition for smooth resizing */
}
@media (max-width: 891px) {
header .header_left_container img {
header[role=banner] .header_left_container img {
height: 160px;
}
}
@media (max-width: 660px) {
header .header_left_container img {
header[role=banner] .header_left_container img {
height: 70px;
}
}
@media (max-width: 450px) {
header .header_left_container img {
header[role=banner] .header_left_container img {
height: 50px;
}
}
header .header_right_container {
header[role=banner] .header_right_container {
flex: 0 0 0%;
width: fit-content;
min-width: fit-content;
@ -388,48 +388,48 @@ header .header_right_container {
padding-bottom: 0rem;
}
@media (max-width: 660px) {
header .header_right_container {
header[role=banner] .header_right_container {
padding-right: 0;
}
}
header .header_right_container .language-switcher-language-url {
header[role=banner] .header_right_container .language-switcher-language-url {
text-transform: uppercase;
color: white;
}
header .header_right_container .language-switcher-language-url ul {
header[role=banner] .header_right_container .language-switcher-language-url ul {
display: flex;
flex-direction: row;
font-size: 0.6rem;
padding: 0;
}
@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;
}
}
@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;
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;
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: " / ";
white-space: pre;
}
@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;
}
}
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";
}
header .header_nav_container {
header[role=banner] .header_nav_container {
flex: 0 0 0%;
width: 100%;
min-width: fit-content;
@ -442,17 +442,17 @@ header .header_nav_container {
flex-direction: column;
}
@media (max-width: 500px) {
header .header_nav_container {
header[role=banner] .header_nav_container {
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;
}
header .header_nav_container #block-quartiers-de-demain-entete h2 {
header[role=banner] .header_nav_container #block-quartiers-de-demain-entete h2 {
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;
flex-direction: column;
align-items: flex-start;
@ -462,59 +462,59 @@ header .header_nav_container #block-quartiers-de-demain-entete ul {
margin: auto;
}
@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;
align-items: center;
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%;
text-align: left;
}
@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;
}
}
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;
color: white;
font-size: 0.5rem;
}
@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;
}
}
@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;
flex-direction: column;
align-items: center;
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;
margin: auto;
}
@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;
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;
}
}
header .header_nav_container.hidden {
header[role=banner] .header_nav_container.hidden {
transform: translateX(30%);
}
header .header_nav_container.visible {
header[role=banner] .header_nav_container.visible {
transform: translateX(0);
}
header .header:hover + .header_nav_container {
header[role=banner] .header:hover + .header_nav_container {
transform: translateX(0);
}
@ -528,95 +528,95 @@ header .header:hover + .header_nav_container {
}
/* 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 */
width: 35%;
transform-origin: bottom right;
transition: all 1s ease-in-out;
}
@media (max-width: 1090px) {
.header--collapsed {
header[role=banner].header--collapsed {
height: 160px;
}
}
@media (min-width: 1400px) {
.header--collapsed {
header[role=banner].header--collapsed {
height: 250px;
}
}
.header--collapsed .qdd-header {
header[role=banner].header--collapsed .qdd-header {
opacity: 1 !important;
}
@media (max-width: 810px) {
.header--collapsed {
header[role=banner].header--collapsed {
width: 100%;
height: 170px;
}
}
.header--collapsed .header_left_container {
header[role=banner].header--collapsed .header_left_container {
flex: 0 0 65%;
transform-origin: bottom right;
}
@media (max-width: 810px) {
.header--collapsed .header_left_container {
header[role=banner].header--collapsed .header_left_container {
flex: 1 0 100%;
}
}
.header--collapsed .header_nav_container {
header[role=banner].header--collapsed .header_nav_container {
flex: 0 0 30%;
transform-origin: bottom right;
min-width: fit-content;
}
@media (max-width: 810px) {
.header--collapsed .header_nav_container {
header[role=banner].header--collapsed .header_nav_container {
flex: 1 0 100%;
position: relative;
left: -100%;
}
}
.header--collapsed-already {
header[role=banner].header--collapsed-already {
height: 200px; /* Ou la hauteur que vous souhaitez pour votre header */
width: 35%;
transform-origin: bottom right;
transition: all 0s ease-in-out;
}
.header--collapsed-already .qdd-header {
header[role=banner].header--collapsed-already .qdd-header {
opacity: 1 !important;
}
@media (max-width: 810px) {
.header--collapsed-already {
header[role=banner].header--collapsed-already {
width: 100%;
}
}
@media (min-width: 1400px) {
.header--collapsed-already {
header[role=banner].header--collapsed-already {
height: 250px;
}
}
.header--collapsed-already .header_left_container {
header[role=banner].header--collapsed-already .header_left_container {
flex: 0 0 65%;
transform-origin: bottom right;
}
@media (max-width: 810px) {
.header--collapsed-already .header_left_container {
header[role=banner].header--collapsed-already .header_left_container {
flex: 1 0 100%;
}
}
.header--collapsed-already .header_nav_container {
header[role=banner].header--collapsed-already .header_nav_container {
flex: 0 0 30%;
min-width: fit-content;
transform-origin: bottom right;
}
@media (max-width: 810px) {
.header--collapsed-already .header_nav_container {
header[role=banner].header--collapsed-already .header_nav_container {
flex: 1 0 100%;
position: relative;
left: -100%;
}
}
@media (max-width: 550px) {
.header--collapsed-already .header_nav_container {
header[role=banner].header--collapsed-already .header_nav_container {
top: 0px;
}
}
@ -3120,7 +3120,7 @@ body {
.partenaires .layout-content .content_container .views-element-container {
width: 80%;
}
.partenaires .layout-content .content_container .views-element-container::before {
.partenaires .layout-content .content_container .views-element-container .header_view::after {
content: "";
display: block;
border-bottom: solid 2px rgb(7, 50, 194);

2
web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js
View File

@ -17,7 +17,7 @@
//////// start header ////////////
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 headerNavContainer = document.querySelector('.header_nav_container');
const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');

18
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/partenaires.scss
View File

@ -24,15 +24,19 @@
}
}
.views-element-container{
&::before{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
width: 80% ;
margin: auto;
}
width: 80%;
.header_view{
&::after{
content:"";
display: block;
border-bottom: solid 2px $blue_QDD;
width: 80% ;
margin: auto;
}
}
h3{
color: rgb(7, 50, 194);
font-size: 2.5rem;

6
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss
View File

@ -1,4 +1,4 @@
header{
header[role="banner"]{
display: flex;
flex-direction: row;
height: 100vh;
@ -292,7 +292,7 @@ header{
}
}
/* 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 */
width: 35%;
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 */
width: 35%;
transform-origin: bottom right;

1
web/themes/custom/quartiers_de_demain/webpack.config.js
View File

@ -3,6 +3,7 @@ const path = require("path");
let config = {
mode: 'development',
devtool: "source-map",
entry: [
"./src/assets/js/quartiers_de_demain.js",