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

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 {