bachir/drupal-reha
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bouton contact

Browse Source
This commit is contained in:
ouidade
2023-11-22 16:35:55 +01:00
parent 26da70efc2
commit 19320aa20a
7 changed files with 155 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/css/reha.css
+34 -11
View File
@@ -1,3 +1,4 @@
@charset "UTF-8";
/*reha*/ /*reha*/
/*global*/ /*global*/
/* Colors used for REHA */ /* Colors used for REHA */
@@ -9,6 +10,14 @@
margin-bottom: 1rem; margin-bottom: 1rem;
background-color: white; } background-color: white; }
.bouton {
background-color: white !important;
border: none !important;
cursor: pointer; }
.mailto {
text-decoration: underline; }
/*marianne*/ /*marianne*/
@font-face { @font-face {
font-family: 'Marianne'; font-family: 'Marianne';
@@ -104,8 +113,7 @@
display: flex; display: flex;
flex-flow: row wrap; } flex-flow: row wrap; }
.layout-container header { .layout-container header {
flex: 0 0 100%; flex: 0 0 100%; }
height: 150px; }
.layout-container main { .layout-container main {
position: relative; } position: relative; }
.layout-container footer { .layout-container footer {
@@ -133,13 +141,14 @@ a {
/*partials*/ /*partials*/
header { header {
display: block; display: block;
height: 150px;
background-color: white; background-color: white;
position: fixed;
z-index: 99; z-index: 99;
width: 100vw; width: 100vw;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; } top: 0;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
header div { header div {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -151,23 +160,37 @@ header {
header div #block-reha-connexionutilisateur { header div #block-reha-connexionutilisateur {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 15%; } width: 15%;
height: 150px; }
header div #block-reha-connexionutilisateur .user-login-form { header div #block-reha-connexionutilisateur .user-login-form {
display: none; } display: none; }
header div #block-reha-connexionutilisateur ul { header div #block-reha-connexionutilisateur ul {
display: none; } display: none; }
header div #block-reha-config-pages { header div #block-reha-config-pages {
width: 15%; width: 35%;
display: flex; 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 { header div #block-reha-config-pages .config_pages--contact--full {
display: none; display: none;
/* Cacher initialement le contenu */ } /* Cacher initialement le contenu */
header div #block-reha-config-pages .open { height: 0;
display: block; } /* 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 { header div #block-reha-config-pages .field--type-text-long {
transition: height 0.5s; 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 { footer {
background-color: white; background-color: white;
web/themes/custom/reha/js/reha.js
+33 -21
View File
@@ -18,37 +18,49 @@
} (Drupal)); } (Drupal));
jQuery(document).ready(function($){ jQuery(document).ready(function($){
// // POPIN Biographies
// $(".bouton").click(function(event){ // POPIN Biographies
// 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')
// }); /////////// 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"); //////////////// ok /////////////////
// return false;
// });
$(document).ready(function() { $(document).ready(function() {
$(".bouton").click(function() { $(".bouton").click(function(event) {
$(".config_pages--contact--full").slideDown(); $(".config_pages--contact--full").slideToggle();
}); });
}); });
/////////////// ok /////////////////
// $(document).ready(function() { // $(document).ready(function() {
// $("#block-reha-config-pages .bouton").click(function() { // $(".bouton").click(function() {
// // $(".config_pages--contact--full").slideToggle(); // // $(".config_pages--contact--full").slideToggle();
// var fenetre = document.querySelectorAll('.config_pages--contact--full'); // var fenetre = document.querySelectorAll('.config_pages--contact--full');
web/themes/custom/reha/scss/global/_core.scss
+3
View File
@@ -0,0 +1,3 @@
.mailto{
text-decoration: underline;
}
web/themes/custom/reha/scss/global/_layout.scss
+2 -1
View File
@@ -1,4 +1,6 @@
$header-height : 150px;
.layout-container { .layout-container {
position: relative; position: relative;
@@ -17,7 +19,6 @@
header{ header{
flex: 0 0 100%; flex: 0 0 100%;
height: 150px;
} }
main{ main{
position: relative; position: relative;
web/themes/custom/reha/scss/global/variables/_buttons.scss
+5 -1
View File
@@ -9,5 +9,9 @@
background-color: white; background-color: white;
} }
.bouton{
background-color: white !important;
border: none !important;
cursor: pointer;
}
web/themes/custom/reha/scss/partials/_header.scss
+75 -47
View File
@@ -2,17 +2,18 @@
header{ header{
display: block; display: block;
height: $header-height;
background-color: white; background-color: white;
position: fixed; // position: fixed;
z-index: 99; z-index: 99;
width: 100vw; width: 100vw;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
// .sticky{ // .sticky{
// position: fixed; // position: fixed;
// } // }
// height: 150px;
div{ div{
display:flex; display:flex;
flex-direction: row; flex-direction: row;
@@ -34,6 +35,8 @@ header{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 15%; width: 15%;
height: $header-height;
.user-login-form{ .user-login-form{
display: none; display: none;
} }
@@ -43,22 +46,59 @@ header{
} }
#block-reha-config-pages{ #block-reha-config-pages{
width: 15%; width:35%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: $header-height;
.bouton{
align-self: flex-end;
width: 50%;
}
.config_pages--contact--full { .config_pages--contact--full {
display: none; /* Cacher initialement le contenu */ display: none; /* Cacher initialement le contenu */
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{ // .open{
display: block; // display: block;
} // width: 300px;
// background-color: $white;
// }
.field--type-text-long { .field--type-text-long {
transition: height 0.5s; /* Animation de 0.5 seconde lors de l'expansion vers le bas */ 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 { // .config_pages--contact--full {
// position: fixed; // position: fixed;
// z-index: 1; // z-index: 1;
// top: 0; // top: $header-height;
// right: 0; // right: 0;
// bottom: 0; // bottom: 0;
// left: 0; // left: 0;
@@ -92,64 +132,50 @@ header{
// // } // // }
// } // }
// // #modal .mask{ // .config_pages--contact--full .field--type-text-long{
// // 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; // position: absolute;
// background: white !important; // background: white !important;
// top: 50%; // top: 50%;
// left: 45%; // left: 50%;
// // transform: translateX(-50%) translateY(-50%); // transform: translateX(-50%) translateY(-50%);
// width:fit-content; // width: 50%;
// height: fit-content; // height: content;
// min-height: 50px; // min-height: 50px;
// border: solid; // border: solid;
// color: black; // color: black;
// // .message{ // .field__item{
// // padding: 5% 10% 5% 5%; // padding: 5% 10% 5% 5%;
// }
// // a.close{
// // position: absolute;
// // right: 5%;
// // top:5%;
// // color: black;
// // font-size: 30px;
// // } // // }
// a.close{ // // a.close:hover{
// position: absolute; // // color: black;
// right: 5%; // // }
// top:5%;
// color: black;
// font-size: 30px;
// }
// a.close:hover{
// color: black;
// }
// @media (max-width: 442px) { // @media (max-width: 442px) {
// transform: translateX(-50%) translateY(-50%); // transform: translateX(-50%) translateY(-50%);
// width: 85%; // width: 85%;
// height: 80%; // height: 80%;
// overflow-y: scroll; // overflow-y: scroll;
// a.close { // // a.close {
// font-size: 0.8rem; // // font-size: 0.8rem;
// position: absolute; // // position: absolute;
// right: 2%; // // right: 2%;
// top:0.8%; // // top:0.8%;
// } // // }
// p { // p {
// font-size: 0.8rem; // font-size: 0.8rem;
// margin-top: 0; // margin-top: 0;
// } // }
// .message{ // .field__item{
// padding: 5% 5% 5% 5%; // padding: 5% 5% 5% 5%;
// } // }
@@ -169,7 +195,7 @@ header{
// font-size: 0.8rem; // font-size: 0.8rem;
// margin-top: 0; // margin-top: 0;
// } // }
// .message{ // .field__item{
// padding: 5% 5% 5% 5%; // padding: 5% 5% 5% 5%;
// } // }
@@ -180,3 +206,5 @@ header{
web/themes/custom/reha/scss/reha.scss
+2 -1
View File
@@ -1,10 +1,11 @@
/*reha*/ /*reha*/
/*global*/ /*global*/
@import "global/variables/colors"; @import "global/variables/colors";
@import "global/variables/typography.scss"; @import "global/variables/typography.scss";
@import "global/variables/buttons.scss"; @import "global/variables/buttons.scss";
@import "global/core";
@import "global/fonts"; @import "global/fonts";
@import "global/layout"; @import "global/layout";
@import "global/reset"; @import "global/reset";