From 11c4c6d45471136d60504466e5b2624d4796e05f Mon Sep 17 00:00:00 2001 From: ouidade Date: Fri, 7 Nov 2025 23:01:32 +0100 Subject: [PATCH] /lesprojets responsive --- .../dist/assets/css/bundle.css | 63 ++++++++++++++ .../src/assets/scss/pages/lesprojets.scss | 87 ++++++++++++++++++- 2 files changed, 146 insertions(+), 4 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index 006f485..8325748 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -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 { 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 { background-color: #f6f7f3; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss index 94cd0f4..a8dcb1e 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/lesprojets.scss @@ -30,6 +30,7 @@ main{ } .views-element-container{ width: 90%; + .views-row{ display: flex; flex-direction: row; @@ -49,8 +50,8 @@ main{ le-mans: "le-mans.svg", coulommiers: "coulommiers.svg" ); - - .views-field-group { + + .views-field-group { width: 18%; margin-bottom: 2rem; font-size: 0.4rem; @@ -77,8 +78,7 @@ main{ opacity: 1; } } - - + .views-field-title{ h2{ 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; + + } + } + } + } + } + + } }