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

/lesprojets responsive

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2025-11-07 23:01:32 +01:00
parent b6f1de83ff
commit 11c4c6d454
2 changed files with 146 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5056,6 +5056,69 @@ main {
#lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie .field-content ul li .node-type-projet .field_field_intro .more-link { #lesprojets .content_container .views-element-container .views-row .views-field-field-projets-lie .field-content ul li .node-type-projet .field_field_intro .more-link {
display: none; display: none;
} }
@media (max-width: 768px) {
#lesprojets .content_container .views-element-container {
/* Conteneur global = carrousel horizontal */
/* Masquer les barres de défilement */
/* Chaque "carte" du carrousel (site + projets) */
/* Harmonisation du style visuel */
/* La liste UL des projets devient horizontale */
}
#lesprojets .content_container .views-element-container .views-row {
display: flex;
overflow-x: auto;
gap: 1rem;
padding: 1.5rem 1rem 2rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin: 0;
}
#lesprojets .content_container .views-element-container .views-row .views-field-group {
flex: 0 0 90%;
}
#lesprojets .content_container .views-element-container .views-row .views-field-group::before {
width: 4rem;
height: 4rem;
padding-left: 2rem !important;
}
#lesprojets .content_container .views-element-container .views-row::-webkit-scrollbar {
display: none;
}
#lesprojets .content_container .views-element-container .views-row {
-ms-overflow-style: none;
scrollbar-width: none;
}
#lesprojets .content_container .views-element-container .views-field-group,
#lesprojets .content_container .views-element-container .views-field-field-projets-lie li,
#lesprojets .content_container .views-element-container .views-field-field-projets-lie .node-type-projet {
flex: 0 0 130%; /* largeur identique pour tous */
scroll-snap-align: start;
box-sizing: border-box;
}
#lesprojets .content_container .views-element-container .views-field-group,
#lesprojets .content_container .views-element-container .views-field-field-projets-lie .node-type-projet {
padding: 1rem;
}
#lesprojets .content_container .views-element-container .views-field-field-projets-lie ul {
display: contents; /* On laisse les LI se comporter comme des enfants directs du carrousel */
list-style: none;
padding: 0;
margin: 0;
}
#lesprojets .content_container .views-element-container .views-field-field-projets-lie ul li {
margin: 0;
padding: 0;
}
#lesprojets .content_container .views-element-container .views-field-field-projets-lie ul li .node-type-projet {
flex: 0 0 105%;
}
#lesprojets .content_container .views-element-container .views-field-field-projets-lie ul li .node-type-projet::before {
left: -0.5rem !important;
width: 2rem !important;
height: 4rem !important;
padding-left: 2rem !important;
}
}
#ressources { #ressources {
background-color: #f6f7f3; background-color: #f6f7f3;

87
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss
View File

@@ -30,6 +30,7 @@ main{
} }
.views-element-container{ .views-element-container{
width: 90%; width: 90%;
.views-row{ .views-row{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -49,8 +50,8 @@ main{
le-mans: "le-mans.svg", le-mans: "le-mans.svg",
coulommiers: "coulommiers.svg" coulommiers: "coulommiers.svg"
); );
.views-field-group { .views-field-group {
width: 18%; width: 18%;
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 0.4rem; font-size: 0.4rem;
@@ -77,8 +78,7 @@ main{
opacity: 1; opacity: 1;
} }
} }
.views-field-title{ .views-field-title{
h2{ h2{
margin: 0; margin: 0;
@@ -234,6 +234,85 @@ main{
} }
} }
} }
@media (max-width: 768px) {
/* Conteneur global = carrousel horizontal */
.views-row {
display: flex;
overflow-x: auto;
gap: 1rem;
padding: 1.5rem 1rem 2rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
margin: 0;
.views-field-group{
flex: 0 0 90%;
}
.views-field-group::before{
// top: -0.5rem !important;
// left: -0.5rem !important;
width: 4rem;
height: 4rem;
padding-left: 2rem !important;
}
}
/* Masquer les barres de défilement */
.views-row::-webkit-scrollbar {
display: none;
}
.views-row {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Chaque "carte" du carrousel (site + projets) */
.views-field-group,
.views-field-field-projets-lie li,
.views-field-field-projets-lie .node-type-projet {
flex: 0 0 130%; /* largeur identique pour tous */
scroll-snap-align: start;
box-sizing: border-box;
}
/* Harmonisation du style visuel */
.views-field-group,
.views-field-field-projets-lie .node-type-projet {
padding: 1rem;
}
/* La liste UL des projets devient horizontale */
.views-field-field-projets-lie {
ul {
display: contents; /* On laisse les LI se comporter comme des enfants directs du carrousel */
list-style: none;
padding: 0;
margin: 0;
li {
margin: 0;
padding: 0;
// width: 110% !important;
.node-type-projet {
flex: 0 0 105%;
}
.node-type-projet::before{
// top: -0.5rem !important;
left: -0.5rem !important;
width: 2rem !important;
height: 4rem !important;
padding-left: 2rem !important;
}
}
}
}
}
} }
} }