langswitcher mobile
This commit is contained in:
parent
d740d58c0b
commit
5e2cdd8d3e
File diff suppressed because one or more lines are too long
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue