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

hauteur header

This commit is contained in:
ouidade 2024-11-08 10:03:28 +01:00
parent 4879d1b4e7
commit 0181f810a6
9 changed files with 127 additions and 205 deletions
Show Stats 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: {}

0
web/themes/custom/quartiers_de_demain/dist/assets/css/ajax-loader.gif vendored Normal file
View File

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

@ -2,6 +2,7 @@
/*quartiers_de_demain*/
/*global*/
/* Colors used for quartiers_de_demain */
@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";
p {
font-size: 0.8rem;
}
@ -481,6 +482,11 @@ header .header:hover + .header_nav_container {
height: 160px;
}
}
@media (min-width: 1400px) {
.header--collapsed {
height: 250px;
}
}
.header--collapsed .qdd-header {
opacity: 1 !important;
}
@ -527,6 +533,11 @@ header .header:hover + .header_nav_container {
height: 170px;
}
}
@media (min-width: 1400px) {
.header--collapsed-already {
height: 250px;
}
}
.header--collapsed-already .header_left_container {
flex: 0 0 65%;
transform-origin: bottom right;
@ -3285,106 +3296,3 @@ main {
aspect-ratio: 1/1;
object-fit: cover;
}
@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;
}
}

2
web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss
View File

@ -1,4 +1,4 @@
$header-height-big : 250px;
$header-height : 200px;
$header-height-pad : 160px;
$header-height-small : 70px;

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

@ -226,6 +226,9 @@ header{
@media(max-width: 1090px) {
height: $header-height-pad;
}
@media (min-width: 1400px) {
height: $header-height-big;
}
.qdd-header{
opacity: 1 !important;
}
@ -264,6 +267,9 @@ header{
width: 100%;
height: 170px;
}
@media (min-width: 1400px) {
height: $header-height-big;
}
.header_left_container{
flex: 0 0 65%;
transform-origin: bottom right;

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

@ -50,4 +50,4 @@
@import "pages/lessites.scss";
@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.scss";
@import "/home/ouidade/Developer/docker-quartiersdedemain/src/web/modules/custom/q2d_mod/assets/css/carte-interactive-qdd.css";