From aa386780bfffabb4506a33ef4004c3bc81c85304 Mon Sep 17 00:00:00 2001 From: ouidade Date: Mon, 24 Nov 2025 11:35:23 +0100 Subject: [PATCH] debrousaillage node projet responsive --- .../dist/assets/css/bundle.css | 45 +++++++++++++++++ .../assets/scss/pages/node-type-projet.scss | 48 ++++++++++++------- .../src/assets/scss/pages/node-type-site.scss | 14 +++--- 3 files changed, 83 insertions(+), 24 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 1d9884c..8c6ea5a 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 @@ -3686,6 +3686,11 @@ body { .node-type-site .layout-content .content_container { width: 90% !important; } +@media (max-width: 810px) { + .node-type-site .layout-content .content_container { + margin-top: 12rem !important; + } +} .node-type-site .layout--threecol-25-50-25 { flex-wrap: nowrap; } @@ -4235,10 +4240,30 @@ body { .node-type-projet .layout-content .content_container { width: 100% !important; } +@media (max-width: 810px) { + .node-type-projet .layout-content .content_container { + margin-top: 12rem !important; + } +} +.node-type-projet .layout--threecol-25-50-25 { + flex-wrap: nowrap; +} +@media (max-width: 810px) { + .node-type-projet .layout--threecol-25-50-25 { + display: flex; + flex-direction: column; + width: 100%; + } +} .node-type-projet .layout--threecol-25-50-25 .layout__region--first { flex: 0 1 25%; position: relative; } +@media (max-width: 810px) { + .node-type-projet .layout--threecol-25-50-25 .layout__region--first { + flex: 0 1 100%; + } +} .node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first { position: fixed; width: 20% !important; @@ -4247,12 +4272,26 @@ body { flex-direction: column; margin-left: 2rem; } +@media (max-width: 810px) { + .node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first { + position: relative; + width: 100% !important; + margin-left: 0rem; + margin-top: 0; + } +} .node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first #sites-map-container { width: 100% !important; } .node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first #sites-map-container h2 { display: none; } +@media (max-width: 810px) { + .node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first #sites-map-container { + width: 50% !important; + margin: auto; + } +} .node-type-projet .layout--threecol-25-50-25 .layout__region--first .block-region-first .field_field_site_projet .node-type-site { width: 80%; margin: auto; @@ -4301,6 +4340,12 @@ body { margin-top: 1rem; max-width: 45%; } +@media (max-width: 810px) { + .node-type-projet .layout--threecol-25-50-25 .layout__region--second { + max-width: 80% !important; + margin: auto; + } +} .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second { position: relative; margin-top: 1rem; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss index f25d373..4788500 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss @@ -5,36 +5,47 @@ .content_container{ width: 100% !important; + @media(max-width:810px){ + margin-top: 12rem !important; + } } } .layout--threecol-25-50-25{ - // flex-wrap: nowrap; - // @media(max-width: 810px){ - // display: flex; - // flex-direction: column; - // width: 100%; - // } + flex-wrap: nowrap; + @media(max-width: 810px){ + display: flex; + flex-direction: column; + width: 100%; + } .layout__region--first{ flex: 0 1 25%; - // margin-top: 1rem; position: relative; + @media(max-width: 810px){ + flex: 0 1 100%; + } .block-region-first{ position:fixed; width: 20% !important; margin-top: 1rem; display: flex; flex-direction: column; - // align-items: center; - margin-left: 2rem; - // @media(max-width: 810px){ - // position: relative; - // width: 100% !important; - // } + + @media(max-width: 810px){ + position: relative; + width: 100% !important; + margin-left: 0rem; + margin-top: 0; + }margin-left: 2rem; #sites-map-container{ width: 100% !important; h2{ display: none; } + @media(max-width: 810px){ + width: 50% !important; + margin: auto; + + } } .field_field_site_projet{ .node-type-site{ @@ -97,14 +108,19 @@ flex: 0 1 45% !important; margin-top: 1rem; max-width: 45%; - // margin-left: 3rem; + @media(max-width: 810px){ + max-width: 80% !important; + margin: auto; + } .block-region-second{ - // margin-left: 3rem; position: relative; - // margin-right: 3rem; margin-top: 1rem; display: flex; flex-direction: column; + @media(max-width: 810px){ + // margin-left: 2rem; + // margin-top: 3rem; + } .field_field_laureats{ ::before{ content: ""; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss index a604bbc..841c17a 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-site.scss @@ -2,8 +2,14 @@ .layout-content{ margin-top: 2rem; max-width: 100vw; + @media(max-width:810px){ + // margin-top: 12rem !important; + } .content_container{ width: 90% !important; + @media(max-width:810px){ + margin-top: 12rem !important; + } } } .layout--threecol-25-50-25{ @@ -234,14 +240,6 @@ flex: 1 1 auto; min-width: 25%; } - // div .field_field_porteur_s_de_site{ - // border-bottom: none; - // padding-bottom: 0; - // } - // div .field_field_nom_de_la_commune_nb_d_hab{ - // border-bottom: none; - // padding-bottom: 0; - // } div:has(.field_field_region){ border-bottom: none; padding-bottom: 0;