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

langswitcher mobile

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-11-14 12:44:00 +01:00
parent d740d58c0b
commit 5e2cdd8d3e
4 changed files with 150 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@@ -255,6 +255,33 @@ header {
top: 0;
transition: none;
}
header .language-switcher-language-url {
text-transform: uppercase;
color: white;
}
header .language-switcher-language-url ul {
display: flex;
flex-direction: row;
font-size: 0.6rem;
padding: 0;
width: fit-content;
}
@media (max-width: 810px) {
header .language-switcher-language-url ul {
font-size: 0.9rem;
}
}
header .language-switcher-language-url ul li a {
color: white;
font-family: "gilroy-light";
}
header .language-switcher-language-url ul li:nth-child(1)::after {
content: " / ";
white-space: pre;
}
header .language-switcher-language-url ul .is-active {
font-family: "gilroy-bold";
}
@media (max-width: 810px) {
header {
height: 100vh;
@@ -401,6 +428,11 @@ header .header_nav_container {
transition: transform 0.3s ease-in-out;
z-index: -1;
}
@media (max-width: 1090px) {
header .header_nav_container {
height: fit-content;
}
}
@media (max-width: 500px) {
header .header_nav_container {
flex: 0 0 40%;
@@ -457,6 +489,10 @@ header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-o
padding-bottom: 0.3rem;
width: 60%; /* Réduit la largeur du soulignement à 50% */
}
header .header_nav_container #block-quartiers-de-demain-selecteurdelangue {
width: fit-content;
margin: auto;
}
header .header_nav_container.hidden {
transform: translateX(30%);
}
@@ -2672,6 +2708,12 @@ body {
grid-column: 2;
grid-row: 2;
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto p:nth-of-type(3) {
grid-column: 1/span 2;
grid-row: 3;
font-size: 0.6rem;
padding-top: 1rem;
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--11 .colone-picto h5 {
font-size: 3.5rem;
font-family: "gilroy-semibold";
@@ -2719,13 +2761,6 @@ body {
#consultation .layout-content .content_container .node-type-static #paragraph-id--12 .field_field_texte {
width: 80%;
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--12::after {
content: "";
display: block;
border-bottom: solid 1px rgb(7, 50, 194);
width: 100%;
padding-bottom: 2rem;
}
#consultation .layout-content .content_container .node-type-static #paragraph-id--13 .field_field_texte .colone-picto {
display: flex;
flex-direction: row;

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

@@ -661,6 +661,30 @@ document.addEventListener("DOMContentLoaded", function() {
});
document.addEventListener("DOMContentLoaded", function () {
// Fonction pour déplacer le bloc en fonction de la taille de l'écran
function moveLanguageSwitcher() {
const languageSwitcher = document.getElementById("block-quartiers-de-demain-selecteurdelangue");
const navContainer = document.querySelector(".header_nav_container");
if (window.innerWidth <= 810) { // Si écran téléphone
if (languageSwitcher && navContainer && !navContainer.contains(languageSwitcher)) {
navContainer.appendChild(languageSwitcher); // Déplace le bloc dans header_nav_container
}
} else { // Si écran non téléphone
const headerRightContainer = document.querySelector(".header_right_container");
if (languageSwitcher && headerRightContainer && !headerRightContainer.contains(languageSwitcher)) {
headerRightContainer.appendChild(languageSwitcher); // Remet le bloc dans sa position initiale
}
}
}
// Déclencher au chargement et au redimensionnement
moveLanguageSwitcher();
window.addEventListener("resize", moveLanguageSwitcher);
});
})(jQuery, window);

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

@@ -11,6 +11,46 @@ header{
// transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
// transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
.language-switcher-language-url{
text-transform: uppercase;
color: white;
ul{
display: flex;
flex-direction: row;
font-size:0.6rem;
padding: 0;
width: fit-content;
@media(max-width: 810px){
font-size: 00.9rem;
}
// @media(max-width: 500px){
// flex-direction: column;
// // margin-bottom: 0;
// margin: auto;
// }
li a {
color: white;
font-family: 'gilroy-light';
}
li:nth-child(1){
&::after{
content: " / ";
white-space: pre;
@media(max-width: 660px){
// content:none ;
}
}
}
.is-active{
font-family: 'gilroy-bold';
}
}
}
@media(max-width: 810px){
height: 100vh;
}
@@ -146,6 +186,7 @@ header{
z-index: -1 ;
@media(max-width: 1090px){
// text-align:left;
height: fit-content;
}
@media(max-width: 500px){
flex: 0 0 40%;
@@ -205,6 +246,48 @@ header{
}
}
#block-quartiers-de-demain-selecteurdelangue{
width: fit-content;
margin: auto;
// .language-switcher-language-url{
// text-transform: uppercase;
// color: white;
// ul{
// display: flex;
// flex-direction: row;
// font-size:0.6rem;
// padding: 0;
// @media(max-width: 660px){
// margin-bottom: 0;
// }
// @media(max-width: 500px){
// flex-direction: column;
// // margin-bottom: 0;
// margin: auto;
// }
// li a {
// color: white;
// font-family: 'gilroy-light';
// }
// li:nth-child(1){
// &::after{
// content: " / ";
// white-space: pre;
// @media(max-width: 660px){
// content:none ;
// }
// }
// }
// .is-active{
// font-family: 'gilroy-bold';
// }
// }
// }
}
}
.header_nav_container.hidden {