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

twig & js header

Browse Source
This commit is contained in:
ouidade
2023-11-24 16:14:55 +01:00
parent 7456d756b3
commit fbb9165185
7 changed files with 167 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/reha/css/reha.css
+30 -7
View File
@@ -203,7 +203,7 @@ header {
position: absolute;
background-color: white;
width: 550px;
height: 100vh;
height: 200vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px);
padding: 5% 10% 5% 5%; }
@@ -217,21 +217,33 @@ header {
header .region-header #block-reha-config-pages .bouton-contact ::before {
content: url(../images/noun-letter-1064628.svg);
padding-right: 1rem; }
header .region-header #block-reha-config-pages .config_pages--contact--full {
header .region-header #block-reha-config-pages .contacts {
height: 0;
/* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
width: 100%; }
header .region-header #block-reha-config-pages .config_pages--contact--full .field--type-text-long {
header .region-header #block-reha-config-pages .contacts .titre {
display: none;
display: inline-flex;
font-weight: 800;
position: relative;
margin-top: 2rem; }
header .region-header #block-reha-config-pages .contacts .titre ::after {
content: url(../images/noun-cross-1151731.svg);
float: right;
position: relative;
left: 200px;
cursor: pointer; }
header .region-header #block-reha-config-pages .contacts .contacts-full {
display: none;
background-color: white;
position: absolute;
right: 0px;
top: 100%;
width: 550px;
height: 100vh;
height: 200vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px); }
header .region-header #block-reha-config-pages .config_pages--contact--full .field--type-text-long .field__item {
header .region-header #block-reha-config-pages .contacts .contacts-full .field__item {
display: flex;
flex-direction: column;
padding: 5% 10% 5% 5%; }
@@ -257,16 +269,27 @@ header {
position: absolute;
background-color: white;
width: 550px;
height: 100vh;
height: 200vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px);
padding: 5% 10% 5% 5%; }
padding: 5% 10% 5% 45%; }
header .bouton {
align-self: flex-end;
width: fit-content; }
header .bouton h2 {
text-transform: lowercase;
display: inline-flex; }
header .titre {
display: inline-flex;
font-weight: 800;
position: relative;
margin-top: 2rem; }
header .titre ::after {
content: url(../images/noun-cross-1151731.svg);
float: right;
position: relative;
left: 200px;
cursor: pointer; }
footer {
background-color: white;
web/themes/custom/reha/images/noun-cross-1151731.svg
+51
View File
@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
version="1.1"
x="0px"
y="0px"
viewBox="0 0 34.696911 34.690243"
id="svg2"
sodipodi:docname="noun-cross-1151731.svg"
width="34.696911"
height="34.690243"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<sodipodi:namedview
id="namedview2"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="5.4758349"
inkscape:cx="61.451816"
inkscape:cy="-18.079435"
inkscape:window-width="1920"
inkscape:window-height="1172"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<g
transform="translate(-32.678287,-985.02548)"
id="g1">
<path
d="m 66.970561,985.39163 c -0.390531,-0.39054 -1.023701,-0.39052 -1.41422,0 L 49.99999,1000.948 34.443649,985.39163 c -0.39053,-0.39052 -1.02368,-0.39054 -1.414209,0 -0.390541,0.39053 -0.390521,1.0237 0,1.41422 l 15.556351,15.55635 -15.556351,15.5564 c -0.390521,0.3905 -0.390541,1.0237 0,1.4142 0.390529,0.3905 1.023699,0.3905 1.41422,0 l 15.556351,-15.5564 15.55634,15.5564 c 0.390529,0.3905 1.023679,0.3905 1.41421,0 0.390539,-0.3905 0.390519,-1.0237 0,-1.4142 L 51.41421,1002.3622 66.970561,986.80584 c 0.390519,-0.39053 0.390539,-1.02368 0,-1.41421 z"
style="color:#000000;text-indent:0;text-transform:none;direction:ltr;baseline-shift:baseline;enable-background:accumulate"
fill="#000000"
fill-opacity="1"
stroke="none"
marker="none"
visibility="visible"
display="inline"
overflow="visible"
id="path1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

web/themes/custom/reha/js/reha.js
+31 -9
View File
@@ -21,6 +21,8 @@ jQuery(document).ready(function($){
// menu déroulant
////////////// contacts ///////
$(document).ready(function() {
$(".bouton-contact").click(function(event) {
// Fermer .connexion-full s'il est déroulé
@@ -30,34 +32,54 @@ jQuery(document).ready(function($){
// if ($(".connected-full").is(":visible")) {
// $(".connected-full").slideUp();
// }
// Ouvrir .field--type-text-long
$(".field--type-text-long").slideToggle();
// Ouvrir .contacts-full
$(".contacts-full").slideToggle();
});
});
////////////// connexion ///////
$(document).ready(function() {
$(".bouton-connexion").click(function(event) {
// Fermer .field--type-text-long s'il est déroulé
if ($(".field--type-text-long").is(":visible")) {
$(".field--type-text-long").slideUp();
// Fermer .contacts-full s'il est déroulé
if ($(".contacts-full").is(":visible")) {
$(".contacts-full").slideUp();
}
// Ouvrir .connexion-full
$(".connexion-full").slideToggle();
});
});
////////////// connected ///////
$(document).ready(function() {
$(".bouton-connected").click(function(event) {
// Fermer .field--type-text-long s'il est déroulé
if ($(".field--type-text-long").is(":visible")) {
$(".field--type-text-long").slideUp();
// Fermer .contacts-full s'il est déroulé
if ($(".contacts-full").is(":visible")) {
$(".contacts-full").slideUp();
}
// Ouvrir .connexion-full
// Ouvrir .connected-full
$(".connected-full").slideToggle();
});
});
$(document).ready(function() {
$(".titre").click(function(event) {
if ($(".connected-full").is(":visible")) {
$(".connected-full").slideUp();
}
if ($(".contacts-full").is(":visible")) {
$(".contacts-full").slideUp();
}
if ($(".contacts-full").is(":visible")) {
$(".contacts-full").slideUp();
}
// // Ouvrir .connexion-full
// $(".connected-full").slideToggle();
});
});
});
web/themes/custom/reha/scss/partials/_header.scss
+39 -6
View File
@@ -65,7 +65,7 @@ header{
background-color: $white-header;
// width: 30vw;
width: $width-menu-slidedown;
height: 100vh;
height: 200vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px);
padding: 5% 10% 5% 5%;
@@ -86,10 +86,27 @@ header{
flex-direction: column;
height: fit-content;
.config_pages--contact--full {
.contacts {
height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
width: 100%;
.field--type-text-long {
.titre{
display: none;
display: inline-flex;
font-weight: 800;
position: relative;
margin-top: 2rem;
::after{
content: url(../images/noun-cross-1151731.svg);
float: right;
position: relative;
left: 200px;
// bottom: 100px;
cursor: pointer;
}
}
.contacts-full {
display: none;
background-color: $white-header;
position: absolute;
@@ -97,7 +114,7 @@ header{
top: 100%;
width: $width-menu-slidedown;
// width: 30vw;
height: 100vh;
height: 200vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px);
.field__item{
@@ -132,10 +149,10 @@ header{
background-color: $white-header;
// width: 30vw;
width: $width-menu-slidedown;
height: 100vh;
height: 200vh;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
clip-path: inset(0px -10px -10px -10px);
padding: 5% 10% 5% 5%;
padding: 5% 10% 5% 45%;
}
}
}
@@ -150,6 +167,22 @@ header{
}
}
.titre{
display: inline-flex;
font-weight: 800;
position: relative;
margin-top: 2rem;
::after{
content: url(../images/noun-cross-1151731.svg);
float: right;
position: relative;
left: 200px;
// bottom: 100px;
cursor: pointer;
}
}
}
web/themes/custom/reha/templates/block--config-pages--contact.html.twig
+9 -1
View File
@@ -44,6 +44,14 @@
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
<div class="contacts">
<div class="contacts-full">
<section class="titre">
<p> Contacts </p>
</section>
{{ content }}
</div>
</div>
{% endblock %}
</div>
web/themes/custom/reha/templates/block--reha-connexionutilisateur.html.twig
+3
View File
@@ -46,6 +46,9 @@
{% block content %}
<div class="connexion">
<div class="connexion-full">
<section class="titre">
<p></p>
</section>
{{ content }}
</div>
</div>
web/themes/custom/reha/templates/block--views-block--current-user-block-block-1.html.twig
+4
View File
@@ -46,6 +46,10 @@
{% block content %}
<div class="connected">
<div class="connected-full">
<section class="titre">
<p> Information personnelles </p>
</section>
{{ content }}
</div>
</div>