diff --git a/web/themes/custom/reha/dist/css/bundle.css b/web/themes/custom/reha/dist/css/bundle.css index 9eebf0d..82e2963 100644 --- a/web/themes/custom/reha/dist/css/bundle.css +++ b/web/themes/custom/reha/dist/css/bundle.css @@ -17,6 +17,7 @@ .field--type-link { width: fit-content; + padding: 0.4rem; } .bouton { @@ -43,15 +44,12 @@ display: none; } -#edit-submit:hover { - background-color: #fdc300; -} - -.views-field-edit-node:hover { - background-color: #fdc300; -} - -.form-submit:hover { +.views-field-edit-node:hover, +.field--name-field-lien:hover, +#edit-submit:hover, +.form-submit:hover, +.field--type-link:hover, +.field--type-file:hover { background-color: #fdc300; } @@ -176,6 +174,15 @@ padding-top: 0; } } +.layout-content .layout__region--first { + flex: 0 1 25%; +} +.layout-content .layout__region--second { + flex: 0 1 75%; +} +.layout-content .layout__region--second.view-id-home { + margin: 0; +} aside { width: 20%; @@ -217,6 +224,10 @@ main { display: none; } +p { + background-color: transparent; +} + ul { list-style-type: none; } @@ -911,7 +922,7 @@ input { .slick-next { position: absolute; display: block; - z-index: 999; + z-index: 9; height: 20px; width: 20px; line-height: 0px; @@ -919,7 +930,7 @@ input { cursor: pointer; background: transparent; color: transparent; - top: 50%; + top: 25%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); @@ -956,6 +967,7 @@ input { .slick-prev { left: -25px; + padding-left: 4rem; } [dir=rtl] .slick-prev { left: auto; @@ -963,9 +975,11 @@ input { } .slick-prev:before { content: "<"; + font-weight: lighter; } [dir=rtl] .slick-prev:before { content: ">"; + font-weight: lighter; } .slick-next { @@ -977,9 +991,11 @@ input { } .slick-next:before { content: ">"; + font-weight: lighter; } [dir=rtl] .slick-next:before { content: "<"; + font-weight: lighter; } /* Dots */ @@ -1191,13 +1207,21 @@ input { padding-top: 2rem; padding-bottom: 2rem; } +.home-page-layout-content .layout-content .layout--onecol .block-region-content { + display: grid; + grid-template-rows: repeat(8, 1fr); +} @media (max-width: 891px) { .home-page-layout-content .layout-content .layout--onecol .block-region-content { display: flex; flex-direction: column; } } +.home-page-layout-content .layout-content .layout--onecol .block-region-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee { + grid-row: 1/span 3; +} .home-page-layout-content .layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 { + grid-row: 2/span 6; margin-bottom: 2rem; } @media (max-width: 500px) { @@ -1580,6 +1604,33 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div width: 70%; } +.home-page-layout-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee { + border: solid #fdc300 1px; + background-color: rgb(255, 255, 255); + font-weight: 800; + padding: 2rem; + margin-right: 1rem; + width: 20%; + margin-left: 8%; + padding-top: 0.5rem; + padding-left: 0.5rem; + padding-bottom: 5rem; +} +@media (max-width: 891px) { + .home-page-layout-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee { + margin-bottom: 1rem; + } +} +.home-page-layout-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee p { + margin: 0; +} +.home-page-layout-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee strong { + font-size: 1.3rem; +} +.home-page-layout-content .block-views-blocksites-block-1 { + top: -60px; + position: relative; +} .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site { width: 70%; margin: auto; @@ -1637,20 +1688,6 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div .home-page-layout-content .block-views-blocksites-block-1 .views-row .node-type-site .filtered-content .field--name-field-architecte { order: 4; } -.home-page-layout-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee { - border: solid #fdc300 1px; - background-color: rgb(255, 255, 255); - font-weight: 800; - padding: 2rem; - margin-right: 1rem; - width: 20%; - margin-left: 8%; -} -@media (max-width: 891px) { - .home-page-layout-content .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee { - margin-bottom: 1rem; - } -} .home-page-layout-content .block-block-contentbbaa5e2a-7f7c-498f-b08e-d1a3b36c03a8 { width: fit-content; margin: auto; @@ -1741,6 +1778,7 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div } .block-views-blockactus-block-1 { + display: none; background-color: white; } .block-views-blockactus-block-1 h2 { @@ -1801,4 +1839,118 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div width: 60%; margin: auto; padding-top: 5rem; +} + +.page-programme .block-region-first { + padding-left: 18%; +} +.page-programme .block-region-second h2 { + font-weight: 1000; +} +.page-programme .block-region-second .view-display-id-block_1 { + margin: 0; + width: 80%; + padding-top: 1rem; +} +.page-programme .block-region-second .block-config-pages-block { + margin: 0; + width: 80%; + padding-top: 1rem; +} +.page-programme .block-region-second .block-config-pages-block .config_pages--partenaires--full .paragraph--type--partenaire { + width: 100%; + padding-bottom: 3rem; + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(auto-fill); +} +@media (max-width: 810px) { + .page-programme .block-region-second .block-config-pages-block .config_pages--partenaires--full .paragraph--type--partenaire { + display: flex; + flex-direction: column; + } +} +.page-programme .block-region-second .block-config-pages-block .config_pages--partenaires--full .paragraph--type--partenaire .field--name-field-logo { + grid-column: 1/2; + grid-row: 2; + margin-top: 2rem; + padding-right: 1rem; +} +.page-programme .block-region-second .block-config-pages-block .config_pages--partenaires--full .paragraph--type--partenaire .field--name-field-nom { + grid-column: 2/8; + grid-row: 1; + font-weight: 900; + font-size: 1.2rem; +} +.page-programme .block-region-second .block-config-pages-block .config_pages--partenaires--full .paragraph--type--partenaire .field--name-field-texte { + grid-column: 2/8; + grid-row: 2; +} +.page-programme .block-region-second .block-config-pages-block .config_pages--partenaires--full .paragraph--type--partenaire .field--name-field-texte span { + background-color: none; +} +.page-programme .block-region-second .block-config-pages-block .config_pages--partenaires--full .paragraph--type--partenaire .field--name-field-lien { + grid-column: 2/8; + grid-row: 3; +} + +.page-node-site .block-region-first .block-entity-fieldnodefield-fichiers { + width: 80%; + margin: auto; +} +.page-node-site .block-region-second { + width: 50%; +} +.page-node-site .block-region-second img { + width: 100%; + height: auto; +} +.page-node-site .block-region-second .block-entity-fieldnodetitle { + order: 2; + margin: 0; + font-size: 1.3rem; + font-weight: 900; +} +.page-node-site .block-region-second .field--name-field-numero-site { + order: 1; + text-transform: uppercase; + font-size: 1.5rem; +} +.page-node-site .block-region-second .field--name-field-adresse-site { + order: 3; + font-size: 1.3rem; + line-height: 0.3rem; +} +.page-node-site .block-region-second .field--name-field-adresse-site .address { + margin: 0; + display: inline-flex; +} +.page-node-site .block-region-second .field--name-field-adresse-site .address .postal-code { + order: 2; +} +.page-node-site .block-region-second .field--name-field-adresse-site .address .locality { + order: 1; + text-transform: capitalize; + margin-right: 0.5rem; +} +.page-node-site .block-region-second .field--name-field-adresse-site .address .country { + display: none; +} +.page-node-site .block-region-second .field--name-field-architecte { + order: 4; + padding-top: 1rem; +} +.page-node-site .block-region-second ul.links { + order: 5; + text-transform: uppercase; + padding: 0; + margin: 0; + border: none; + padding-bottom: 2rem; + padding-top: 0.9rem; + display: inline-flex; +} +.page-node-site .block-region-second ul.links::after { + content: url("../../dist/images/noun-arrow-1569918-black.svg"); + padding-left: 0.5rem; } \ No newline at end of file diff --git a/web/themes/custom/reha/reha.theme b/web/themes/custom/reha/reha.theme index 1809039..23c3d5e 100644 --- a/web/themes/custom/reha/reha.theme +++ b/web/themes/custom/reha/reha.theme @@ -22,12 +22,7 @@ function reha_preprocess_html(&$variables) { } } -/** - * Implements hook_preprocess_HOOK() for page.html.twig. - */ -function reha_preprocess_page(&$variables) { -} /** * Implements hook_preprocess_HOOK() for node.html.twig. @@ -57,6 +52,27 @@ function reha_preprocess_node(&$variables) { } +/** + * Implements hook_preprocess_HOOK() for page templates. + */ +function reha_preprocess_page(&$variables) { + // Vérifiez si c'est une page de nœud. + if ($node = \Drupal::routeMatch()->getParameter('node')) { + if ($node instanceof \Drupal\node\NodeInterface) { + // Ajoutez une classe unique basée sur le nid (Node ID). + $variables['attributes']['class'][] = 'page-node-' . $node->id(); + + // Ajoutez un ID unique basé sur le nid. + $variables['attributes']['id'] = 'page-node-' . $node->id(); + } + } + else { + // Si ce n'est pas une page de nœud, vous pouvez ajouter un ID basé sur le nom de la route. + $route_name = \Drupal::routeMatch()->getRouteName(); + $variables['attributes']['id'] = 'page-' . str_replace('.', '-', $route_name); + } +} + // /** // * Implements hook_preprocess_HOOK() for node templates. diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss index 35846a7..78a3e81 100644 --- a/web/themes/custom/reha/scss/global/_layout.scss +++ b/web/themes/custom/reha/scss/global/_layout.scss @@ -40,7 +40,15 @@ $width-menu-slidedown : 550px; @media (max-width:500px) { padding-top: 0; } - + .layout__region--first{ + flex: 0 1 25%; + } + .layout__region--second{ + flex: 0 1 75%; + &.view-id-home{ + margin: 0; + } + } } @@ -77,4 +85,8 @@ main{ #block-reha-titredepage{ display: none; +} + +p{ + background-color: transparent; } \ No newline at end of file diff --git a/web/themes/custom/reha/scss/global/variables/_buttons.scss b/web/themes/custom/reha/scss/global/variables/_buttons.scss index c4bd98d..c03a957 100644 --- a/web/themes/custom/reha/scss/global/variables/_buttons.scss +++ b/web/themes/custom/reha/scss/global/variables/_buttons.scss @@ -13,16 +13,17 @@ } -// %hoveryellow{ -// :hover{ -// background-color: $yellow-puca; -// } -// } +%hoveryellow{ + :hover{ + background-color: $yellow-puca; + } +} .field--type-link { @extend %buttonwithborder; width: fit-content; + padding: 0.4rem; } .bouton{ @@ -62,14 +63,16 @@ display: none; } -#edit-submit:hover{ - background-color: $yellow-puca; -} -.views-field-edit-node:hover{ - background-color: $yellow-puca; -} -.form-submit:hover{ - background-color: $yellow-puca; +.views-field-edit-node:hover, +.field--name-field-lien:hover, +#edit-submit:hover, +.form-submit:hover, +.field--type-link:hover, +.field--type-file:hover{ + background-color: $yellow-puca; } + + + diff --git a/web/themes/custom/reha/scss/global/variables/mixin.scss b/web/themes/custom/reha/scss/global/variables/mixin.scss index 4510877..b4a4d65 100644 --- a/web/themes/custom/reha/scss/global/variables/mixin.scss +++ b/web/themes/custom/reha/scss/global/variables/mixin.scss @@ -7,4 +7,37 @@ transition: 0.3s transform ease, 0.3s box-shadow ease; } } - \ No newline at end of file + +@mixin node-site { + h2{ + order: 2; + margin: 0; + } + .field--name-field-numero-site { + order: 1; + text-transform: uppercase; + font-size: 2rem; + } + .field--name-field-adresse-site{ + order: 3; + font-size: 1.5rem; + .address{ + margin: 0; + display: inline-flex; + .postal-code{ + order: 2; + } + .locality{ + order: 1; + text-transform: capitalize; + margin-right: 0.5rem; + } + .country{ + display: none; + } + } + } + .field--name-field-architecte{ + order: 4; + } +} \ No newline at end of file diff --git a/web/themes/custom/reha/scss/pages/_home.scss b/web/themes/custom/reha/scss/pages/_home.scss index 30eb69a..5af7391 100644 --- a/web/themes/custom/reha/scss/pages/_home.scss +++ b/web/themes/custom/reha/scss/pages/_home.scss @@ -43,16 +43,20 @@ } .block-region-content{ - // display: grid; + display: grid; // grid-column: repeat(2, 1fr); + grid-template-rows: repeat(8, 1fr); @media(max-width: 891px){ display: flex; flex-direction: column; } + .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee{ + grid-row: 1 /span 3; + } .block-views-blockhome-block-1{ // grid-column: 1 /span 2; - // grid-row: 1; + grid-row: 2 /span 6; margin-bottom: 2rem; @media(max-width: 500px){ img{ diff --git a/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss b/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss index 02971b1..d6f4ef4 100644 --- a/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss +++ b/web/themes/custom/reha/scss/pages/home/home-view-actualites.scss @@ -1,4 +1,5 @@ .block-views-blockactus-block-1{ + display:none; background-color: white; h2{ width: 80%; diff --git a/web/themes/custom/reha/scss/pages/home/home-view-sites.scss b/web/themes/custom/reha/scss/pages/home/home-view-sites.scss index d771adb..de8822e 100644 --- a/web/themes/custom/reha/scss/pages/home/home-view-sites.scss +++ b/web/themes/custom/reha/scss/pages/home/home-view-sites.scss @@ -1,6 +1,29 @@ .home-page-layout-content { + .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee{ + border: solid $yellow-puca 1px; + background-color: $white-button; + font-weight: 800; + padding: 2rem; + margin-right: 1rem; + width: 20%; + margin-left: 8%; + padding-top: 0.5rem; + padding-left: 0.5rem; + padding-bottom: 5rem; + @media(max-width: 891px){ + margin-bottom: 1rem; + // margin: auto; + } + p{margin: 0;} + strong{ + font-size: 1.3rem; + } + } .block-views-blocksites-block-1 { + top: -60px; + position: relative; + .views-row{ .node-type-site{ @@ -64,19 +87,7 @@ } } - .block-block-content3d4d153c-9da8-49e2-be7a-d2245f5716ee{ - border: solid $yellow-puca 1px; - background-color: $white-button; - font-weight: 800; - padding: 2rem; - margin-right: 1rem; - width: 20%; - margin-left: 8%; - @media(max-width: 891px){ - margin-bottom: 1rem; - // margin: auto; - } - } + .block-block-contentbbaa5e2a-7f7c-498f-b08e-d1a3b36c03a8{ width: fit-content; diff --git a/web/themes/custom/reha/scss/pages/le-programme.scss b/web/themes/custom/reha/scss/pages/le-programme.scss new file mode 100644 index 0000000..e5ebde1 --- /dev/null +++ b/web/themes/custom/reha/scss/pages/le-programme.scss @@ -0,0 +1,70 @@ + +.page-programme{ + .block-region-first{ + padding-left: 18%; + } + .block-region-second{ + h2{ + font-weight: 1000; + } + .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{ + // background-color: $white; + width: 100%; + padding-bottom: 3rem; + display: grid; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: repeat(auto-fill); + @media (max-width: 810px){ + display: flex; + flex-direction: column; + } + .field--name-field-logo{ + + grid-column: 1 / 2; + grid-row: 2; + margin-top: 2rem; + padding-right: 1rem; + } + .field--name-field-nom{ + grid-column: 2 / 8; + grid-row: 1; + font-weight: 900; + font-size: 1.2rem + + } + .field--name-field-texte{ + grid-column: 2 / 8; + grid-row: 2; + span{ + background-color: none; + } + } + .field--name-field-lien{ + grid-column: 2 / 8; + grid-row: 3; + } + + + } + } + + } + + + } +} + diff --git a/web/themes/custom/reha/scss/pages/node-site.scss b/web/themes/custom/reha/scss/pages/node-site.scss new file mode 100644 index 0000000..1be32b1 --- /dev/null +++ b/web/themes/custom/reha/scss/pages/node-site.scss @@ -0,0 +1,73 @@ + + +.page-node-site{ + .block-region-first{ + .block-entity-fieldnodefield-fichiers{ + width: 80%; + margin: auto; + } + } + .block-region-second{ + width: 50%; + img{ + width: 100%; + // object-fit: contain; + height: auto; + } + .block-entity-fieldnodetitle{ + order: 2; + margin: 0; + font-size: 1.3rem; + font-weight: 900; + + } + .field--name-field-numero-site { + order: 1; + text-transform: uppercase; + font-size: 1.5rem; + } + .field--name-field-adresse-site{ + order: 3; + font-size: 1.3rem; + line-height: 0.3rem; + + .address{ + margin: 0; + display: inline-flex; + .postal-code{ + order: 2; + } + .locality{ + order: 1; + text-transform: capitalize; + margin-right: 0.5rem; + } + .country{ + display: none; + } + } + } + .field--name-field-architecte{ + order: 4; + padding-top: 1rem; + } + ul.links{ + order: 5; + text-transform: uppercase; + padding: 0; + margin: 0; + border: none; + padding-bottom: 2rem; + padding-top: 0.9rem; + display: inline-flex; + &::after{ + content:url("../../dist/images/noun-arrow-1569918-black.svg"); + padding-left: 0.5rem; + } + + } + } + + + +} \ No newline at end of file diff --git a/web/themes/custom/reha/scss/partials/_slick-theme.scss b/web/themes/custom/reha/scss/partials/_slick-theme.scss index 03d0cf5..e5eaac5 100644 --- a/web/themes/custom/reha/scss/partials/_slick-theme.scss +++ b/web/themes/custom/reha/scss/partials/_slick-theme.scss @@ -64,7 +64,7 @@ $slick-opacity-not-active: 0.25 !default; .slick-next { position: absolute; display: block; - z-index: 999; + z-index: 9; height: 20px; width: 20px; line-height: 0px; @@ -72,7 +72,7 @@ $slick-opacity-not-active: 0.25 !default; cursor: pointer; background: transparent; color: transparent; - top: 50%; + top: 25%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); @@ -103,14 +103,19 @@ $slick-opacity-not-active: 0.25 !default; .slick-prev { left: -25px; + padding-left: 4rem; [dir="rtl"] & { left: auto; right: 200px; } &:before { content: $slick-prev-character; + font-weight: lighter; + [dir="rtl"] & { content: $slick-next-character; + font-weight: lighter; + } } } @@ -123,8 +128,12 @@ $slick-opacity-not-active: 0.25 !default; } &:before { content: $slick-next-character; + font-weight: lighter; + [dir="rtl"] & { content: $slick-prev-character; + font-weight: lighter; + } } } diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss index 40a0b1f..a4d794d 100644 --- a/web/themes/custom/reha/scss/reha.scss +++ b/web/themes/custom/reha/scss/reha.scss @@ -24,7 +24,6 @@ @import "partials/slick"; @import "partials/slick_custom"; - /*pages*/ @import "pages/home"; @import "pages/creer-un-compte"; @@ -36,4 +35,6 @@ @import "pages/home/home-view-sites"; @import "pages/les-sites-pilotes"; @import "pages/home/home-view-actualites"; -@import "pages/home/home-view-presentation"; \ No newline at end of file +@import "pages/home/home-view-presentation"; +@import "pages/le-programme"; +@import "pages/node-site"; diff --git a/web/themes/custom/reha/templates/page--node.html.twig b/web/themes/custom/reha/templates/page--node.html.twig new file mode 100644 index 0000000..7a501a5 --- /dev/null +++ b/web/themes/custom/reha/templates/page--node.html.twig @@ -0,0 +1,97 @@ +{# +/** + * @file + * Default theme implementation to display a single page. + * + * The doctype, html, head and body tags are not in this template. Instead they + * can be found in the html.html.twig template in this directory. + * + * Available variables: + * + * General utility variables: + * - base_path: The base URL path of the Drupal installation. Will usually be + * "/" unless you have installed Drupal in a sub-directory. + * - is_front: A flag indicating if the current page is the front page. + * - logged_in: A flag indicating if the user is registered and signed in. + * - is_admin: A flag indicating if the user has permission to access + * administration pages. + * + * Site identity: + * - front_page: The URL of the front page. Use this instead of base_path when + * linking to the front page. This includes the language domain or prefix. + * + * Page content (in order of occurrence in the default page.html.twig): + * - messages: Status and error messages. Should be displayed prominently. + * - node: Fully loaded node, if there is an automatically-loaded node + * associated with the page and the node ID is the second argument in the + * page's path (e.g. node/12345 and node/12345/revisions, but not + * comment/reply/12345). + * + * Regions: + * - page.header: Items for the header region. + * - page.primary_menu: Items for the primary menu region. + * - page.secondary_menu: Items for the secondary menu region. + * - page.highlighted: Items for the highlighted content region. + * - page.help: Dynamic help text, mostly for admin pages. + * - page.content: The main content of the current page. + * - page.sidebar_first: Items for the first sidebar. + * - page.sidebar_second: Items for the second sidebar. + * - page.footer: Items for the footer region. + * - page.breadcrumb: Items for the breadcrumb region. + * + * @see template_preprocess_page() + * @see html.html.twig + * + * @ingroup themeable + */ +#} +