From 8599dc1377c51ea2d5c175ccd8fc9cf90d65aee1 Mon Sep 17 00:00:00 2001 From: ouidade Date: Tue, 7 Oct 2025 12:15:28 +0200 Subject: [PATCH] responsive page programme --- web/themes/custom/reha/dist/css/bundle.css | 33 ++++++- .../custom/reha/scss/global/_layout.scss | 6 +- .../custom/reha/scss/pages/_le-programme.scss | 88 +++++++++++-------- .../reha/scss/pages/_les-sites-pilotes.scss | 6 ++ 4 files changed, 92 insertions(+), 41 deletions(-) diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index f75b3af..ffe37c2 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -194,7 +194,7 @@ } @media (max-width: 500px) { .layout-content { - padding-top: 0; + padding-top: 2rem; } } .layout-content .layout__region--first { @@ -203,6 +203,12 @@ .layout-content .layout__region--second { flex: 0 1 75%; } +@media (max-width: 810px) { + .layout-content .layout__region--second { + flex: 0 1 90%; + margin: auto; + } +} .layout-content .layout__region--second.view-id-home { margin: 0; } @@ -2456,6 +2462,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div width: 40%; } } +@media (max-width: 810px) { + .page-sitespilotes .view-display-id-page_1 .views-row { + width: 100%; + } +} .page-sitespilotes .view-display-id-page_1 .views-row:hover { transform: scale(1.05); transition: 0.3s transform ease, 0.3s box-shadow ease; @@ -2595,6 +2606,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row:hover { transform: none; } +@media (max-width: 810px) { + .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row { + width: 100%; + } +} .page-sitespilotes .view-display-id-page_1 footer .view-display-id-block_2 .views-row .node-type-site { margin: auto; display: flex; @@ -2885,6 +2901,11 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div margin-top: 0.6rem; border-bottom: #fdc300 solid 2px; } +@media (max-width: 810px) { + .page-programme .layout__region--first .block-region-first { + display: none; + } +} .page-programme .block-region-second h2 { font-weight: 1000; font-size: 1.8rem; @@ -2893,11 +2914,21 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div width: 80%; font-size: 1.2rem; } +@media (max-width: 810px) { + .page-programme .block-region-second .block-views-blockhome-block-1 { + width: 100%; + } +} .page-programme .block-region-second .view-display-id-block_1 { margin: 0; width: 80%; padding-top: 1rem; } +@media (max-width: 810px) { + .page-programme .block-region-second .view-display-id-block_1 { + width: 100%; + } +} .page-programme .block-region-second .block-config-pages-block { margin: 0; width: 80%; diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss index 81842f8..8633db6 100644 --- a/web/themes/custom/reha/scss/global/_layout.scss +++ b/web/themes/custom/reha/scss/global/_layout.scss @@ -43,13 +43,17 @@ $width-menu-slidedown : 550px; width: 90%; } @media (max-width:500px) { - padding-top: 0; + padding-top: 2rem; } .layout__region--first{ flex: 0 1 25%; } .layout__region--second{ flex: 0 1 75%; + @media (max-width:810px){ + flex: 0 1 90%; + margin: auto; + } &.view-id-home{ margin: 0; } diff --git a/web/themes/custom/reha/scss/pages/_le-programme.scss b/web/themes/custom/reha/scss/pages/_le-programme.scss index 69939cf..e109a57 100644 --- a/web/themes/custom/reha/scss/pages/_le-programme.scss +++ b/web/themes/custom/reha/scss/pages/_le-programme.scss @@ -46,6 +46,9 @@ } } } + @media (max-width:810px){ + display: none; + } } } .block-region-second{ @@ -56,59 +59,66 @@ .block-views-blockhome-block-1{ width: 80%; font-size: 1.2rem; + @media (max-width:810px){ + width: 100%; + } } .view-display-id-block_1{ margin: 0; width: 80%; padding-top: 1rem; - } - - .block-config-pages-block{ - margin: 0; - width: 80%; - padding-top: 1rem; - .config_pages--partenaires--full{ - .paragraph--type--partenaire{ + @media (max-width:810px){ width: 100%; - padding-bottom: 3rem; - height: 205px; - display: flex; - flex-direction: column; - flex-wrap: wrap; - justify-content: center; - align-content: baseline; - @media (max-width: 810px){ + } + } + + + .block-config-pages-block{ + margin: 0; + width: 80%; + padding-top: 1rem; + .config_pages--partenaires--full{ + .paragraph--type--partenaire{ + width: 100%; + padding-bottom: 3rem; + height: 205px; display: flex; flex-direction: column; - } - .paragraph--type--partenaire>* { - flex: 1 1 80px; - } - .field--name-field-logo{ - width: fit-content; - padding-right: 1rem; - } - .field--name-field-nom{ - font-weight: 900; - font-size: 1.2rem - } - .field--name-field-texte{ - .field__item{ - p{ - strong{ - background-color: none; + flex-wrap: wrap; + justify-content: center; + align-content: baseline; + @media (max-width: 810px){ + display: flex; + flex-direction: column; + } + .paragraph--type--partenaire>* { + flex: 1 1 80px; + } + .field--name-field-logo{ + width: fit-content; + padding-right: 1rem; + } + .field--name-field-nom{ + font-weight: 900; + font-size: 1.2rem + } + .field--name-field-texte{ + .field__item{ + p{ + strong{ + background-color: none; + } } } } + .field--name-field-lien{ + background-color: none; + } + + } - .field--name-field-lien{ - background-color: none; - } - - } } } - } } diff --git a/web/themes/custom/reha/scss/pages/_les-sites-pilotes.scss b/web/themes/custom/reha/scss/pages/_les-sites-pilotes.scss index 0600347..dbeb338 100644 --- a/web/themes/custom/reha/scss/pages/_les-sites-pilotes.scss +++ b/web/themes/custom/reha/scss/pages/_les-sites-pilotes.scss @@ -29,6 +29,9 @@ @media (max-width:1200px){ width: 40%; } + @media (max-width:810px){ + width: 100%; + } &:hover{ transform: scale(1.05); transition: 0.3s transform ease, 0.3s box-shadow ease; @@ -170,6 +173,9 @@ &:hover{ transform: none; } + @media (max-width:810px){ + width: 100%; + } .node-type-site{ margin: auto; display: flex;