From 350a0bc5fcce70e4395eed775624d310e092dc92 Mon Sep 17 00:00:00 2001 From: ouidade Date: Sat, 6 Jul 2024 18:59:45 +0200 Subject: [PATCH] header --- .../quartiers_de_demain/dist/assets/bundle.js | 2 +- .../dist/assets/css/bundle.css | 109 ++------ .../src/assets/js/quartiers_de_demain.js | 26 +- .../src/assets/scss/global/_layout.scss | 5 +- .../src/assets/scss/pages/consultation.scss | 2 +- .../src/assets/scss/partials/_header.scss | 260 ++++++++++-------- .../templates/region--header-nav.html.twig | 4 +- 7 files changed, 197 insertions(+), 211 deletions(-) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js index 34851c1..baca342 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.query \**********************************************/ /***/ (() => { -eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n jQuery(document).ready(function($){\n\n $('.open-block').click(function(){\n $(this).toggleClass('opened');\n\n $('.header_nav_container').toggleClass('display-nav-opened');\n \n if(mobile == true){\n $(\"body\").css(\"overflow\",\"hidden\");\n }\n\n });\n \n // Hide the header_nav_container when a link inside it is clicked\n $('.header_nav_container li').click(function() {\n $('.header_nav_container').fadeOut();\n });\n\n\n\n\n});\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.view');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.content-actus').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n}\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n \n // Check and replace empty day fields\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const dateElement = paragraph.querySelector('.date');\n const dayField = paragraph.querySelector('.field_field_date_de_jour');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n\n if (dayField && dayField.textContent.trim()) {\n dateElement.classList.add('jour');\n } else {\n dateElement.classList.add('mois');\n const monthText = monthField.textContent.trim();\n // console.log(monthText)\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n }\n });\n\n // Initialize\n showSlides(currentSlide);\n});\n\n\n\n\n// slideshow home \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); +eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n // });\n\n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n//////////////////////////////////////////// smooth apparition des textes\n\n\nfunction scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n}\n\n\n$( document ).ready(function() {\n scrollReaveal();\n});\n\n\n\n////////////////// Timeline ///////////////////////\n\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.view');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / visibleSlides;\n document.querySelector('.content-actus').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n}\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n \n // Check and replace empty day fields\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const dateElement = paragraph.querySelector('.date');\n const dayField = paragraph.querySelector('.field_field_date_de_jour');\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n\n if (dayField && dayField.textContent.trim()) {\n dateElement.classList.add('jour');\n } else {\n dateElement.classList.add('mois');\n const monthText = monthField.textContent.trim();\n // console.log(monthText)\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n console.log(monthField)\n }\n }\n });\n\n // Initialize\n showSlides(currentSlide);\n});\n\n\n\n\n// slideshow home \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: true,\n arrows: false,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); /***/ }) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index b9385df..7720efa 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -172,18 +172,16 @@ h3 { user-select: none; } .layout-container header { - flex: 0 0 100%; + flex: 0 0 50%; } .layout-container footer { flex: 0 0 100%; } .layout-container main { width: 100%; -} - -.layout-content { padding-top: 320px; } + @media (max-width: 500px) { .layout-content { padding-top: 50px; @@ -225,26 +223,24 @@ svg.ext { /*partials*/ header { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-template-rows: repeat(3, 1fr); + display: flex; + flex-direction: row; height: 320px; background-color: rgb(255, 255, 255); z-index: 99; width: 38vw; max-width: 100vw; + position: fixed; top: 0; - border: 1px solid #808080; } header .contextual-region { width: max-content; } header .header_left_container { - grid-column: 1/span 11; - grid-row: 1/span 3; + flex: 0 0 60%; display: flex; flex-direction: row; - border-right: 1px solid #808080; + border-bottom: 1px solid #808080; padding-left: 2%; padding-right: 2%; } @@ -277,7 +273,8 @@ header .header_left_container #block-quartiers-de-demain-logoquartiersdedemain { header .header_left_container img { width: auto; margin: auto; - height: 320px; + height: calc(320px - 5rem); + padding: 2rem; } @media (max-width: 891px) { header .header_left_container img { @@ -295,6 +292,7 @@ header .header_left_container img { } } header .header_right_container { + display: none; margin: auto; } @media (max-width: 660px) { @@ -335,84 +333,38 @@ header .header_right_container .language-switcher-language-url ul .is-active { font-weight: 600; } header .header_nav_container { - display: none; - grid-row: 3; - grid-column: 1/span 12; + flex: 0 0 30%; top: 100%; width: 100%; - background: rgb(232, 235, 244); + background: rgb(7, 50, 194); border-bottom: 1px solid #808080; border-top: 1px solid #808080; - font-size: 1.2rem; text-align: center; } -header .header_nav_container #block-quartiers-de-demain-entete { - grid-column: 1/span 11; - order: 2; - margin: auto; -} header .header_nav_container #block-quartiers-de-demain-entete h2 { display: none; } -header .display-nav-opened { - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-gap: 10px; -} -header .open-block, header .open-block.opened { - cursor: pointer; -} -header .open-block span, header .open-block.opened span { - display: block; - width: 58px; - height: 2px; +header .header_nav_container #block-quartiers-de-demain-entete ul { + display: flex; + flex-direction: column; + align-items: flex-start; position: relative; - background: black; - border-radius: 3px; - z-index: 1; + top: 80px; + padding-left: 1rem; + margin: 0; } -@media (max-width: 660px) { - header .open-block span, header .open-block.opened span { - width: 25px; - } +header .header_nav_container #block-quartiers-de-demain-entete ul li a { + text-transform: uppercase; + color: white; + font-size: 0.5rem; } -header .open-block { - height: 100%; - display: grid; - align-items: center; - margin: auto; +header .header_nav_container #block-quartiers-de-demain-entete ul li:not(:last-of-type) ::after { + content: ""; + display: block; + width: 80px; + border-bottom: solid white 1px; + padding-bottom: 0.3rem; } -@media (max-width: 450px) { - header .open-block { - height: 50px; - } -} -header .open-block span { - margin-bottom: 13px; - transform-origin: 4px 0px; -} -@media (max-width: 660px) { - header .open-block span { - margin-bottom: 5px; - } -} -header .open-block.opened { - margin: auto; -} -header .open-block.opened span { - transform-origin: center; - margin-bottom: 0; -} -header .open-block.opened > div > span:first-child { - transform: translateY(57%) rotate(45deg); -} -header .open-block.opened > div > span:nth-child(2) { - transform: rotate(-45deg); -} -header .open-block.opened > div > span:nth-child(3) { - display: none; -} - footer { z-index: 100; } @@ -1370,9 +1322,6 @@ footer span.totop #toTop .arrow-up::before { #consultation { background-color: #f6f7f3; } -#consultation .layout-content { - padding-top: 1rem; -} #consultation .layout-content .content_container { display: flex; flex-direction: column; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js index 4bea74b..f2dc1c7 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js @@ -14,28 +14,28 @@ } (Drupal)); - jQuery(document).ready(function($){ + // jQuery(document).ready(function($){ - $('.open-block').click(function(){ - $(this).toggleClass('opened'); + // $('.open-block').click(function(){ + // $(this).toggleClass('opened'); - $('.header_nav_container').toggleClass('display-nav-opened'); + // $('.header_nav_container').toggleClass('display-nav-opened'); - if(mobile == true){ - $("body").css("overflow","hidden"); - } + // if(mobile == true){ + // $("body").css("overflow","hidden"); + // } - }); + // }); - // Hide the header_nav_container when a link inside it is clicked - $('.header_nav_container li').click(function() { - $('.header_nav_container').fadeOut(); - }); + // // Hide the header_nav_container when a link inside it is clicked + // $('.header_nav_container li').click(function() { + // $('.header_nav_container').fadeOut(); + // }); -}); + // }); // ///////////////// diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss index 7b9a3f5..aa68291 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/global/_layout.scss @@ -28,7 +28,7 @@ $width-menu-slidedown : 550px; user-select: none; header{ - flex: 0 0 100%; + flex: 0 0 50%; } footer{ @@ -36,6 +36,7 @@ $width-menu-slidedown : 550px; } main{ width: 100%; + padding-top: $header-height; // display: grid; // grid-template-columns: repeat(12, 1fr); } @@ -47,7 +48,7 @@ $width-menu-slidedown : 550px; .layout-content{ // grid-column: 1 / span 12; - padding-top: $header-height; + // padding-top: $header-height; @media(max-width: 500px){ padding-top: $header-height-ultrasmall; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss index 285b705..5a31438 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/consultation.scss @@ -3,7 +3,7 @@ .layout-content{ - padding-top: 1rem; + // padding-top: 1rem; .content_container{ display: flex; flex-direction: column; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss index 0202c99..3ba0c6c 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/_header.scss @@ -1,16 +1,18 @@ header{ - display: grid; - grid-template-columns: repeat(12, 1fr); - // grid-gap: 10px; - grid-template-rows: repeat(3, 1fr); + // display: grid; + // grid-template-columns: 2.5fr 1fr; + // // grid-gap: 10px; + // grid-template-rows: repeat(3, 1fr); + display: flex; + flex-direction: row; height: $header-height; background-color: $white-header; z-index: 99; width: 38vw; max-width: 100vw; - // position: fixed; + position: fixed; top: 0; - border: 1px solid #808080; + // border: 1px solid #808080; // @media (max-width:810px) { // // width: 800px; // height: $header-height-pad; @@ -26,54 +28,57 @@ header{ width: max-content; } - .header_left_container{ - grid-column: 1 /span 11; - grid-row: 1 /span 3; + .header_left_container{ + // grid-column: 1 ; + // grid-row: 1 /span 3; + flex: 0 0 60%; display: flex; flex-direction: row; - border-right: 1px solid #808080; - padding-left: 2%; - padding-right: 2%; - @media(max-width: 660px){ - height: inherit; + border-bottom: 1px solid #808080; + padding-left: 2%; + padding-right: 2%; + @media(max-width: 660px){ + height: inherit; + } + + #block-quartiers-de-demain-logorepu-2{ + display: none; + @media(max-width: 891px){ + height: $header-height-pad; + } + } + #block-quartiers-de-demain-logoepau-2{ + display: none; + height: $header-height; + @media(max-width: 891px){ + height: $header-height-pad; } - #block-quartiers-de-demain-logorepu-2{ - display: none; - @media(max-width: 891px){ - height: $header-height-pad; - } - } - #block-quartiers-de-demain-logoepau-2{ - display: none; - height: $header-height; + } + #block-quartiers-de-demain-logoquartiersdedemain{ + // margin-left: auto; + padding-right: 5%; + margin: auto; + + } + img{ + width: auto; + margin: auto; + height: calc($header-height - 5rem); + padding: 2rem; @media(max-width: 891px){ - height: $header-height-pad; - } - - } - #block-quartiers-de-demain-logoquartiersdedemain{ - // margin-left: auto; - padding-right: 5%; - margin: auto; - - } - img{ - width: auto; - margin: auto; - height: $header-height; - @media(max-width: 891px){ - height: $header-height-pad; - } - @media(max-width: 660px){ - height: $header-height-small; - } - @media(max-width: 450px){ - height: $header-height-ultrasmall; - } - } - } - .header_right_container{ + height: $header-height-pad; + } + @media(max-width: 660px){ + height: $header-height-small; + } + @media(max-width: 450px){ + height: $header-height-ultrasmall; + } + } + } + .header_right_container{ + display: none; margin: auto; @media(max-width: 660px){ padding-right: 0; @@ -102,97 +107,128 @@ header{ } } } - + .is-active{ font-weight: 600; } - + } } - } + + } .header_nav_container{ - display: none; - grid-row: 3; - grid-column: 1 /span 12; + // display: none; + // grid-row: 3; + // grid-column: 1 /span 2; // position: absolute; + flex: 0 0 30%; top: 100%; width: 100%; - background: $bleu_fond_header; + background: $blue_QDD; border-bottom: 1px solid #808080; border-top: 1px solid #808080; - font-size: $font-big; + // font-size: $font-big; text-align: center; #block-quartiers-de-demain-entete{ - grid-column: 1 /span 11; - order: 2; - margin: auto; + // grid-column: 1 /span 11; + + // order: 2; + // margin: auto; h2{ display: none; } + ul { + + display: flex; + flex-direction: column; + align-items: flex-start; + position: relative; + top: calc($header-height / 4 ); + padding-left: 1rem; + margin: 0; + li{ + a{ + text-transform: uppercase; + color: white; + font-size: 0.5rem; + } + &:not(:last-of-type){ + ::after{ + content: ""; + display: block; + width: 80px; + border-bottom: solid white 1px; + padding-bottom: 0.3rem; + } + + } + } + + } @media(max-width: 660px){ } } } - .display-nav-opened{ - display: grid; - grid-template-columns: repeat(12, 1fr); - grid-gap: 10px; - } + // .display-nav-opened{ + // display: grid; + // grid-template-columns: repeat(12, 1fr); + // grid-gap: 10px; + // } - .open-block, .open-block.opened{ - cursor:pointer; - span{ - display: block; - width: 58px; - height: 2px; - position: relative; - background: black; - border-radius: 3px; - z-index: 1; - @media(max-width: 660px){ - width: 25px; - } - } - } - .open-block{ - height: 100%; - display: grid; - align-items: center; - margin: auto; - @media(max-width: 450px){ - height: $header-height-ultrasmall; - } - span{ - margin-bottom: 13px; - transform-origin: 4px 0px; - @media(max-width: 660px){ - margin-bottom: 5px; - } - } + // .open-block, .open-block.opened{ + // cursor:pointer; + // span{ + // display: block; + // width: 58px; + // height: 2px; + // position: relative; + // background: black; + // border-radius: 3px; + // z-index: 1; + // @media(max-width: 660px){ + // width: 25px; + // } + // } + // } + // .open-block{ + // height: 100%; + // display: grid; + // align-items: center; + // margin: auto; + // @media(max-width: 450px){ + // height: $header-height-ultrasmall; + // } + // span{ + // margin-bottom: 13px; + // transform-origin: 4px 0px; + // @media(max-width: 660px){ + // margin-bottom: 5px; + // } + // } - } - .open-block.opened { - margin: auto; - span { - transform-origin: center; - margin-bottom: 0; - } - &>div>span:first-child { - transform: translateY(57%) rotate(45deg); - } - &>div>span:nth-child(2) { - transform: rotate(-45deg); - } - &>div>span:nth-child(3) { - display: none; - } + // } + // .open-block.opened { + // margin: auto; + // span { + // transform-origin: center; + // margin-bottom: 0; + // } + // &>div>span:first-child { + // transform: translateY(57%) rotate(45deg); + // } + // &>div>span:nth-child(2) { + // transform: rotate(-45deg); + // } + // &>div>span:nth-child(3) { + // display: none; + // } - } + // } } \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig b/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig index 588a459..ce5d41b 100644 --- a/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/region--header-nav.html.twig @@ -24,12 +24,12 @@ #} -
+ {#
-
+
#} {% endif %} \ No newline at end of file