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

js header

Browse Source
This commit is contained in:
ouidade
2023-11-22 13:20:06 +01:00
parent d0b2b2e424
commit 26da70efc2
12 changed files with 384 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/css/reha.css
+41 -13
View File
@@ -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; }
web/themes/custom/reha/js/reha.js
+44
View File
@@ -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')
// });
// });
});
web/themes/custom/reha/scss/global/_layout.scss
+1
View File
@@ -17,6 +17,7 @@
header{
flex: 0 0 100%;
height: 150px;
}
main{
position: relative;
web/themes/custom/reha/scss/global/_reset.scss
+2 -1
View File
@@ -6,4 +6,5 @@ a{
}
:link{
color: black;
}
}
web/themes/custom/reha/scss/global/variables/_buttons.scss
+1
View File
@@ -7,6 +7,7 @@
border: solid black 1px;
margin-bottom: 1rem;
background-color: white;
}
web/themes/custom/reha/scss/global/variables/_colors.scss
+2
View File
@@ -4,6 +4,8 @@
$background-home: rgba(153, 147, 174, 0.1);
$white: white;
$yellow-puca: #fdc300;
// $blue-light: rgb(0,158,227);
web/themes/custom/reha/scss/pages/_home.scss
+10 -2
View File
@@ -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;
}
}
}
}
web/themes/custom/reha/scss/partials/_footer.scss
+3 -3
View File
@@ -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';
web/themes/custom/reha/scss/partials/_header.scss
+171 -15
View File
@@ -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%;
// }
// }
// }
web/themes/custom/reha/scss/reha.scss
+11 -9
View File
@@ -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";
/*pages*/
@import "pages/home";
web/themes/custom/reha/templates/block--config-pages--contact.html.twig
+49
View File
@@ -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,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<button class="bouton">
<h2{{ title_attributes }}>{{ label }}</h2>
</button>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>
web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig
+49
View File
@@ -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,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<button class="bouton">
<h2{{ title_attributes }}>{{ label }}</h2>
</button>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>