diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index 3a476ed..759990b 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -1,6 +1,14 @@ /*reha*/ /*global*/ /* Colors used for REHA */ +.field--type-link { + width: 45%; + text-transform: uppercase; + padding: 1rem; + border: solid black 1px; + margin-bottom: 1rem; + background-color: white; } + /*marianne*/ @font-face { font-family: 'Marianne'; @@ -96,7 +104,8 @@ display: flex; flex-flow: row wrap; } .layout-container header { - flex: 0 0 100%; } + flex: 0 0 100%; + height: 150px; } .layout-container main { position: relative; } .layout-container footer { @@ -121,18 +130,9 @@ a { :link { color: black; } -.field--type-link { - width: 45%; - text-transform: uppercase; - padding: 1rem; - border: solid black 1px; - margin-bottom: 1rem; - background-color: white; } - /*partials*/ header { display: block; - width: 100%; background-color: white; position: fixed; z-index: 99; @@ -140,11 +140,34 @@ header { position: -webkit-sticky; position: sticky; top: 0; } - header .sticky { - position: fixed; } header div { display: flex; - flex-direction: row; } + flex-direction: row; + justify-content: space-between; } + header div #block-reha-logoministere { + width: fit-content; } + header div #block-reha-logoreha { + max-height: 90%; } + header div #block-reha-connexionutilisateur { + display: flex; + flex-direction: column; + width: 15%; } + header div #block-reha-connexionutilisateur .user-login-form { + display: none; } + header div #block-reha-connexionutilisateur ul { + display: none; } + header div #block-reha-config-pages { + width: 15%; + display: flex; + flex-direction: column; } + header div #block-reha-config-pages .config_pages--contact--full { + display: none; + /* Cacher initialement le contenu */ } + header div #block-reha-config-pages .open { + display: block; } + header div #block-reha-config-pages .field--type-text-long { + transition: height 0.5s; + /* Animation de 0.5 seconde lors de l'expansion vers le bas */ } footer { background-color: white; @@ -174,6 +197,7 @@ footer { display: flex; flex-direction: column; } +/*pages*/ .layout--onecol { width: 70%; margin: auto; @@ -183,6 +207,10 @@ footer { .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f { display: flex; justify-content: flex-end; } + .layout--onecol .block-region-content .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f :hover { + background-color: #fdc300; } .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 { display: flex; justify-content: flex-end; } + .layout--onecol .block-region-content .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0 :hover { + background-color: #fdc300; } diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js index a67d32b..c20be1a 100644 --- a/web/themes/custom/reha/js/reha.js +++ b/web/themes/custom/reha/js/reha.js @@ -14,4 +14,48 @@ } }; + } (Drupal)); + +jQuery(document).ready(function($){ +// // POPIN Biographies + +// $(".bouton").click(function(event){ +// console.log(event); +// // +// var mods = document.querySelectorAll('.config_pages--contact--full'); +// mods.forEach((m, i) => { +// m.classList.remove('open') +// }); +// // +// var btn = event.currentTarget; +// console.log('btn', btn); +// var mod = btn.parentNode.querySelector('.config_pages--contact--full'); +// mod.classList.add('open') + +// }); + + +// $(".config_pages--contact--full .open").click(function(event){ +// $ (".config_pages--contact--full").removeClass("open"); +// return false; +// }); + + $(document).ready(function() { + $(".bouton").click(function() { + $(".config_pages--contact--full").slideDown(); + }); + }); + + // $(document).ready(function() { + // $("#block-reha-config-pages .bouton").click(function() { + // // $(".config_pages--contact--full").slideToggle(); + // var fenetre = document.querySelectorAll('.config_pages--contact--full'); + + // m.classList.add('open') + // }); + // }); + +}); + + diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss index 769aaf3..0da9f17 100644 --- a/web/themes/custom/reha/scss/global/_layout.scss +++ b/web/themes/custom/reha/scss/global/_layout.scss @@ -17,6 +17,7 @@ header{ flex: 0 0 100%; + height: 150px; } main{ position: relative; diff --git a/web/themes/custom/reha/scss/global/_reset.scss b/web/themes/custom/reha/scss/global/_reset.scss index 1a00f12..6a2b233 100644 --- a/web/themes/custom/reha/scss/global/_reset.scss +++ b/web/themes/custom/reha/scss/global/_reset.scss @@ -6,4 +6,5 @@ a{ } :link{ color: black; -} \ 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 491c5fd..2191fe7 100644 --- a/web/themes/custom/reha/scss/global/variables/_buttons.scss +++ b/web/themes/custom/reha/scss/global/variables/_buttons.scss @@ -7,6 +7,7 @@ border: solid black 1px; margin-bottom: 1rem; background-color: white; + } diff --git a/web/themes/custom/reha/scss/global/variables/_colors.scss b/web/themes/custom/reha/scss/global/variables/_colors.scss index dd961ea..2e1dbef 100644 --- a/web/themes/custom/reha/scss/global/variables/_colors.scss +++ b/web/themes/custom/reha/scss/global/variables/_colors.scss @@ -4,6 +4,8 @@ $background-home: rgba(153, 147, 174, 0.1); +$white: white; +$yellow-puca: #fdc300; // $blue-light: rgb(0,158,227); diff --git a/web/themes/custom/reha/scss/pages/_home.scss b/web/themes/custom/reha/scss/pages/_home.scss index fa52f3b..482e2d9 100644 --- a/web/themes/custom/reha/scss/pages/_home.scss +++ b/web/themes/custom/reha/scss/pages/_home.scss @@ -8,9 +8,17 @@ .block-block-content1ca95211-9fa2-4ef2-a460-8184d1eaf20f{ display: flex; - justify-content: flex-end; } + justify-content: flex-end; + :hover{ + background-color: $yellow-puca; + } + } .block-block-content1dd151e8-8a8b-4586-9e62-8905ba0c93e0{ display: flex; - justify-content: flex-end; } + justify-content: flex-end; + :hover{ + background-color: $yellow-puca; + } + } } } diff --git a/web/themes/custom/reha/scss/partials/_footer.scss b/web/themes/custom/reha/scss/partials/_footer.scss index 650e3fc..43e5bf7 100644 --- a/web/themes/custom/reha/scss/partials/_footer.scss +++ b/web/themes/custom/reha/scss/partials/_footer.scss @@ -3,7 +3,7 @@ footer{ // display: flex; // flex-direction: row; - background-color: white; + background-color: $white; font-family: "Marianne"; font-weight: 800; @@ -31,8 +31,8 @@ footer{ #block-reha-operateurduprogramme{ display: flex; flex-direction: column; - border-left: #fdc300 solid 5px; - border-right: #fdc300 solid 5px; + border-left: $yellow-puca solid 5px; + border-right: $yellow-puca solid 5px; padding-left: 3rem; // font-family: 'Marianne'; diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss index df1a7a1..b1b5cbf 100644 --- a/web/themes/custom/reha/scss/partials/_header.scss +++ b/web/themes/custom/reha/scss/partials/_header.scss @@ -1,25 +1,181 @@ - header{ - display: block; - width: 100%; - background-color: white; - position: fixed; - z-index: 99; - width: 100vw; +header{ + display: block; + background-color: white; + position: fixed; + z-index: 99; + width: 100vw; + position: -webkit-sticky; + position: sticky; + top: 0; + // .sticky{ + // position: fixed; + // } + // height: 150px; + div{ + display:flex; + flex-direction: row; + justify-content: space-between; - position: -webkit-sticky; - position: sticky; - top: 0; - .sticky{ - position: fixed; + #block-reha-logoministere{ + + width: fit-content; } - div{ - display:flex; - flex-direction: row; + #block-reha-logoreha{ + max-height: 90%; + img{ + // max-height: ; + } + } + + #block-reha-connexionutilisateur{ + display: flex; + flex-direction: column; + width: 15%; + .user-login-form{ + display: none; + } + ul{ + display: none; + } + + } + #block-reha-config-pages{ + width: 15%; + display: flex; + flex-direction: column; + .config_pages--contact--full { + display: none; /* Cacher initialement le contenu */ + + } + .open{ + display: block; + } + + + .field--type-text-long { + transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ + } + } + } + +} + + + + + +// pop in biographie + +// .config_pages--contact--full { +// position: fixed; +// z-index: 1; +// top: 0; +// right: 0; +// bottom: 0; +// left: 0; +// display: none; +// } +// .config_pages--contact--full.open{ +// display: block; +// // .bouton { +// // border: solid !important; +// // background-color: transparent; +// // text-transform: uppercase; +// // align-self: flex-end; +// // margin:auto; +// // margin-bottom: 2rem; +// // } +// } + +// // #modal .mask{ +// // background: none !important; +// // opacity: 1; +// // position: absolute; +// // top: 0; +// // right: 0; +// // bottom: 0; +// // left: 0; +// // +// // } +// // #body .grey { +// // opacity: 0.5; +// // } + +// .config_pages--contact--full{ +// position: absolute; +// background: white !important; +// top: 50%; +// left: 45%; +// // transform: translateX(-50%) translateY(-50%); +// width:fit-content; +// height: fit-content; +// min-height: 50px; +// border: solid; +// color: black; + +// // .message{ +// // padding: 5% 10% 5% 5%; +// // } + +// a.close{ +// position: absolute; +// right: 5%; +// top:5%; +// color: black; +// font-size: 30px; +// } + +// a.close:hover{ +// color: black; +// } + +// @media (max-width: 442px) { +// transform: translateX(-50%) translateY(-50%); +// width: 85%; +// height: 80%; +// overflow-y: scroll; +// a.close { +// font-size: 0.8rem; +// position: absolute; +// right: 2%; +// top:0.8%; +// } +// p { +// font-size: 0.8rem; +// margin-top: 0; +// } +// .message{ +// padding: 5% 5% 5% 5%; +// } + +// } +// @media (max-width: 1024px) { +// transform: translateX(-50%) translateY(-50%); +// width: 75%; +// height: 65%; +// overflow-y: scroll; +// a.close { +// font-size: 0.8rem; +// position: absolute; +// right: 2%; +// top:0.8%; +// } +// p { +// font-size: 0.8rem; +// margin-top: 0; +// } +// .message{ +// padding: 5% 5% 5% 5%; +// } + +// } +// } + diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss index 52b845d..3d669a4 100644 --- a/web/themes/custom/reha/scss/reha.scss +++ b/web/themes/custom/reha/scss/reha.scss @@ -1,17 +1,19 @@ /*reha*/ /*global*/ -@import "global/variables/_colors"; -@import "global/variables/_typography.scss"; -@import "global/_fonts"; -@import "global/_layout"; -@import "global/_reset"; +@import "global/variables/colors"; +@import "global/variables/typography.scss"; +@import "global/variables/buttons.scss"; + +@import "global/fonts"; +@import "global/layout"; +@import "global/reset"; -@import "global/variables/_buttons.scss"; /*partials*/ -@import "partials/_header"; -@import "partials/_footer"; +@import "partials/header"; +@import "partials/footer"; -@import "pages/_home"; \ No newline at end of file +/*pages*/ +@import "pages/home"; \ No newline at end of file diff --git a/web/themes/custom/reha/templates/block--config-pages--contact.html.twig b/web/themes/custom/reha/templates/block--config-pages--contact.html.twig new file mode 100644 index 0000000..4a525bc --- /dev/null +++ b/web/themes/custom/reha/templates/block--config-pages--contact.html.twig @@ -0,0 +1,49 @@ +{# +/** + * @file + * Default theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + ] +%} + + {{ title_prefix }} + {% if label %} + + {% endif %} + {{ title_suffix }} + {% block content %} + {{ content }} + {% endblock %} + diff --git a/web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig b/web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig new file mode 100644 index 0000000..4a525bc --- /dev/null +++ b/web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig @@ -0,0 +1,49 @@ +{# +/** + * @file + * Default theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - provider: The module or other provider that provided this block plugin. + * - Block plugin specific settings will also be stored here. + * - in_preview: Whether the plugin is being rendered in preview mode. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + ] +%} + + {{ title_prefix }} + {% if label %} + + {% endif %} + {{ title_suffix }} + {% block content %} + {{ content }} + {% endblock %} +