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

hauteur header

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-11-08 10:03:28 +01:00
parent 4879d1b4e7
commit 0181f810a6
9 changed files with 127 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css Normal file
View File

@ -0,0 +1,106 @@
@font-face {
font-family: 'gilroy-semibold';
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
}
#sites-map-container {
background-color: transparent;
text-align: center;
position: relative;
width: 155%;
/* Prend toute la largeur du conteneur parent */
max-width: 800px;
/* Optionnel : Limiter la largeur maximale */
margin: 0 auto;
/* Centrer le conteneur */
height: auto;
/* Permet à la hauteur de s'ajuster automatiquement */
}
@media (max-width: 810px) {
#sites-map-container {
width: 80%;
/* Prend toute la largeur du conteneur parent */
}
}
@media (max-width: 530px) {
#sites-map-container {
width: 100%;
/* Prend toute la largeur du conteneur parent */
height: 485px;
}
}
@media (max-width: 400px) {
#sites-map-container {
width: 100%;
/* Prend toute la largeur du conteneur parent */
height: 430px;
}
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover {
cursor: pointer;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
font-family: 'gilroy-light';
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
}
@media (max-width: 1090px) {
#sites-map-container #popup {
bottom: 20px;
}
}
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%;
/* Centrer verticalement */
left: 80%;
/* Placer le popup à droite de la carte */
transform: translateY(-50%);
/* Ajuster pour centrer verticalement */
width: 300px;
}
}
#sites-map-container strong {
color: #f7002b;
font-family: 'gilroy-bold';
}
#sites-map-container a {
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after {
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content {
width: 300px;
padding-right: 30px;
}
#popup-content p {
font-size: 0.7rem;
}
@media (max-width: 810px) {
#popup-content {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}

98
web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss
View File

@ -1,98 +0,0 @@
@font-face {
font-family: 'gilroy-semibold';
src: url('../css/fonts/Gilroy/gilroy-semibold-webfont.woff') format('woff');
}
#sites-map-container {
background-color: transparent;
text-align: center;
position: relative;
width: 155%; /* Prend toute la largeur du conteneur parent */
max-width: 800px; /* Optionnel : Limiter la largeur maximale */
margin: 0 auto; /* Centrer le conteneur */
height: auto; /* Permet à la hauteur de s'ajuster automatiquement */
@media (max-width: 810px) {
width: 80%; /* Prend toute la largeur du conteneur parent */
}
@media (max-width: 530px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 485px;
}
@media (max-width: 400px) {
width: 100%; /* Prend toute la largeur du conteneur parent */
height: 430px;
}
}
/* Changer la couleur au survol (hover) */
#sites-map-container .site-link:hover{
cursor: pointer;
}
/* Styles du popup (caché par défaut) */
#sites-map-container #popup {
font-family: 'gilroy-light';
display: none;
position: absolute;
z-index: 1000;
text-align: left;
padding-left: 1rem;
pointer-events: none;
@media (max-width: 1090px) {
bottom: 20px;
}
}
/* Position du popup à droite lorsque l'écran est plus grand que 1090px */
@media (min-width: 1090px) {
#sites-map-container #popup {
top: 50%; /* Centrer verticalement */
left: 80%; /* Placer le popup à droite de la carte */
transform: translateY(-50%); /* Ajuster pour centrer verticalement */
width: 300px;
}
}
#sites-map-container strong{
color: #f7002b;
font-family: 'gilroy-bold';
}
#sites-map-container a{
display: none;
align-items: center;
color: white;
background: black;
text-transform: uppercase;
font-size: 0.8rem;
padding-left: 0.5rem;
text-decoration: none;
margin-top: 0.7rem;
height: 1.3rem;
}
#sites-map-container a:after{
display: inline-flex;
content: url("../img/noun-arrow-to-right.svg");
padding-right: 0.2rem;
padding-left: 0.2rem;
}
#popup-content{
width: 300px;
padding-right: 30px;
p{
font-size: 0.7rem;
}
@media (max-width : 810px) {
width: 300px;
background-color: white;
border-radius: 5px;
padding: 0.5rem;
padding-left: 1rem;
}
}

0
web/modules/custom/q2d_mod/assets/css/fontface.scss → web/modules/custom/q2d_mod/assets/css/fontface.css
View File

4
web/modules/custom/q2d_mod/q2d_mod.libraries.yml
View File

@ -1,7 +1,7 @@
sites_map_block:
css:
theme:
assets/css/fontface.scss: {}
assets/css/carte-interactive-qdd.scss: {}
assets/css/fontface.css: {}
assets/css/carte-interactive-qdd.css: {}
js:
assets/js/carte-interactive-qdd.js: {}