js header

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; }

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')
+  //   });
+  // });
+
+});
+
+

web/themes/custom/reha/scss/global/_layout.scss

@@ -17,6 +17,7 @@
     
     header{
         flex: 0 0 100%;
+        height: 150px;
     }
     main{
         position: relative;

web/themes/custom/reha/scss/global/_reset.scss

@@ -6,4 +6,5 @@ a{
 }    
 :link{
     color: black;
-}
+}
+

web/themes/custom/reha/scss/global/variables/_buttons.scss

@@ -7,6 +7,7 @@
     border: solid black 1px;
     margin-bottom: 1rem;
     background-color: white;
+
 }
 
 

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);

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;
+            }
+        }
     }
 }

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';
 

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;
-
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-        .sticky{
-                position: fixed;
+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;
+
+        #block-reha-logoministere{
+
+            width: fit-content;
+        }
+        #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;
+            }
+            
         }
-        div{
-            display:flex;
-            flex-direction: row;
+        #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

@@ -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

@@ -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

@@ -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>