From 19320aa20a28cb89a1a6f3f2096ccaef5c785eca Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 22 Nov 2023 16:35:55 +0100 Subject: [PATCH] bouton contact --- web/themes/custom/reha/css/reha.css | 45 +++++-- web/themes/custom/reha/js/reha.js | 54 +++++--- web/themes/custom/reha/scss/global/_core.scss | 3 + .../custom/reha/scss/global/_layout.scss | 3 +- .../reha/scss/global/variables/_buttons.scss | 6 +- .../custom/reha/scss/partials/_header.scss | 124 +++++++++++------- web/themes/custom/reha/scss/reha.scss | 3 +- 7 files changed, 155 insertions(+), 83 deletions(-) create mode 100644 web/themes/custom/reha/scss/global/_core.scss diff --git a/web/themes/custom/reha/css/reha.css b/web/themes/custom/reha/css/reha.css index 759990b..cb3b46f 100644 --- a/web/themes/custom/reha/css/reha.css +++ b/web/themes/custom/reha/css/reha.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /*reha*/ /*global*/ /* Colors used for REHA */ @@ -9,6 +10,14 @@ margin-bottom: 1rem; background-color: white; } +.bouton { + background-color: white !important; + border: none !important; + cursor: pointer; } + +.mailto { + text-decoration: underline; } + /*marianne*/ @font-face { font-family: 'Marianne'; @@ -104,8 +113,7 @@ display: flex; flex-flow: row wrap; } .layout-container header { - flex: 0 0 100%; - height: 150px; } + flex: 0 0 100%; } .layout-container main { position: relative; } .layout-container footer { @@ -133,13 +141,14 @@ a { /*partials*/ header { display: block; + height: 150px; background-color: white; - position: fixed; z-index: 99; width: 100vw; position: -webkit-sticky; position: sticky; - top: 0; } + top: 0; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } header div { display: flex; flex-direction: row; @@ -151,23 +160,37 @@ header { header div #block-reha-connexionutilisateur { display: flex; flex-direction: column; - width: 15%; } + width: 15%; + height: 150px; } 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%; + width: 35%; display: flex; - flex-direction: column; } + flex-direction: column; + height: 150px; } + header div #block-reha-config-pages .bouton { + align-self: flex-end; + width: 50%; } 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; } + /* Cacher initialement le contenu */ + height: 0; + /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */ + width: 100%; } 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 */ } + /* Animation de 0.5 seconde lors de l'expansion vers le bas */ + background-color: white; + display: block; + width: 100%; + height: 100vh; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + clip-path: inset(0px -10px -10px -10px); } + header div #block-reha-config-pages .field--type-text-long .field__item { + padding: 5% 10% 5% 5%; } footer { background-color: white; diff --git a/web/themes/custom/reha/js/reha.js b/web/themes/custom/reha/js/reha.js index c20be1a..53ba4f9 100644 --- a/web/themes/custom/reha/js/reha.js +++ b/web/themes/custom/reha/js/reha.js @@ -18,37 +18,49 @@ } (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') + // POPIN Biographies -// }); +/////////// bof ///////////////// + + // $(".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 .mask, .config_pages--contact--full a.close").click(function(event){ + // $ (".config_pages--contact--full").removeClass("open"); + // return false; + // }); -// $(".config_pages--contact--full .open").click(function(event){ -// $ (".config_pages--contact--full").removeClass("open"); -// return false; -// }); + +//////////////// ok ///////////////// $(document).ready(function() { - $(".bouton").click(function() { - $(".config_pages--contact--full").slideDown(); + $(".bouton").click(function(event) { + $(".config_pages--contact--full").slideToggle(); }); }); + /////////////// ok ///////////////// + + + + + // $(document).ready(function() { - // $("#block-reha-config-pages .bouton").click(function() { + // $(".bouton").click(function() { // // $(".config_pages--contact--full").slideToggle(); // var fenetre = document.querySelectorAll('.config_pages--contact--full'); diff --git a/web/themes/custom/reha/scss/global/_core.scss b/web/themes/custom/reha/scss/global/_core.scss new file mode 100644 index 0000000..023c6a0 --- /dev/null +++ b/web/themes/custom/reha/scss/global/_core.scss @@ -0,0 +1,3 @@ +.mailto{ + text-decoration: underline; +} \ No newline at end of file diff --git a/web/themes/custom/reha/scss/global/_layout.scss b/web/themes/custom/reha/scss/global/_layout.scss index 0da9f17..6a1fc39 100644 --- a/web/themes/custom/reha/scss/global/_layout.scss +++ b/web/themes/custom/reha/scss/global/_layout.scss @@ -1,4 +1,6 @@ +$header-height : 150px; + .layout-container { position: relative; @@ -17,7 +19,6 @@ header{ flex: 0 0 100%; - height: 150px; } main{ position: relative; diff --git a/web/themes/custom/reha/scss/global/variables/_buttons.scss b/web/themes/custom/reha/scss/global/variables/_buttons.scss index 2191fe7..fc94ce1 100644 --- a/web/themes/custom/reha/scss/global/variables/_buttons.scss +++ b/web/themes/custom/reha/scss/global/variables/_buttons.scss @@ -9,5 +9,9 @@ background-color: white; } - +.bouton{ + background-color: white !important; + border: none !important; + cursor: pointer; +} diff --git a/web/themes/custom/reha/scss/partials/_header.scss b/web/themes/custom/reha/scss/partials/_header.scss index b1b5cbf..c40aa72 100644 --- a/web/themes/custom/reha/scss/partials/_header.scss +++ b/web/themes/custom/reha/scss/partials/_header.scss @@ -2,17 +2,18 @@ header{ display: block; + height: $header-height; background-color: white; - position: fixed; + // position: fixed; z-index: 99; width: 100vw; position: -webkit-sticky; position: sticky; top: 0; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; // .sticky{ // position: fixed; // } - // height: 150px; div{ display:flex; flex-direction: row; @@ -34,6 +35,8 @@ header{ display: flex; flex-direction: column; width: 15%; + height: $header-height; + .user-login-form{ display: none; } @@ -43,22 +46,59 @@ header{ } #block-reha-config-pages{ - width: 15%; + width:35%; display: flex; flex-direction: column; + height: $header-height; + + .bouton{ + align-self: flex-end; + width: 50%; + } .config_pages--contact--full { display: none; /* Cacher initialement le contenu */ - - } - .open{ - display: block; + height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */ + // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ + width: 100%; + } + // .open{ + // display: block; + // width: 300px; + // background-color: $white; + // } .field--type-text-long { transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ + background-color: $white; + display: block; + width: 100%; + height: 100vh; + box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; + clip-path: inset(0px -10px -10px -10px); + .field__item{ + padding: 5% 10% 5% 5%; + } + + + } } + // #block-reha-config-pages { + // position: relative; + // } + + // .config_pages--contact--full { + // overflow: hidden; + // height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */ + // transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ + // } + + // .field--type-text-long { + // padding: 20px; + // background-color: #f0f0f0; + // } } @@ -74,7 +114,7 @@ header{ // .config_pages--contact--full { // position: fixed; // z-index: 1; -// top: 0; +// top: $header-height; // right: 0; // bottom: 0; // left: 0; @@ -92,64 +132,50 @@ header{ // // } // } -// // #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{ +// .config_pages--contact--full .field--type-text-long{ // position: absolute; // background: white !important; // top: 50%; -// left: 45%; -// // transform: translateX(-50%) translateY(-50%); -// width:fit-content; -// height: fit-content; +// left: 50%; +// transform: translateX(-50%) translateY(-50%); +// width: 50%; +// height: content; // min-height: 50px; // border: solid; // color: black; -// // .message{ -// // padding: 5% 10% 5% 5%; +// .field__item{ +// padding: 5% 10% 5% 5%; +// } + +// // a.close{ +// // position: absolute; +// // right: 5%; +// // top:5%; +// // color: black; +// // font-size: 30px; // // } -// a.close{ -// position: absolute; -// right: 5%; -// top:5%; -// color: black; -// font-size: 30px; -// } - -// a.close:hover{ -// color: black; -// } +// // 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%; -// } +// // a.close { +// // font-size: 0.8rem; +// // position: absolute; +// // right: 2%; +// // top:0.8%; +// // } // p { // font-size: 0.8rem; // margin-top: 0; // } -// .message{ +// .field__item{ // padding: 5% 5% 5% 5%; // } @@ -169,13 +195,15 @@ header{ // font-size: 0.8rem; // margin-top: 0; // } -// .message{ +// .field__item{ // padding: 5% 5% 5% 5%; // } // } // } + + diff --git a/web/themes/custom/reha/scss/reha.scss b/web/themes/custom/reha/scss/reha.scss index 3d669a4..a319d83 100644 --- a/web/themes/custom/reha/scss/reha.scss +++ b/web/themes/custom/reha/scss/reha.scss @@ -1,10 +1,11 @@ /*reha*/ /*global*/ + @import "global/variables/colors"; @import "global/variables/typography.scss"; @import "global/variables/buttons.scss"; - +@import "global/core"; @import "global/fonts"; @import "global/layout"; @import "global/reset";