From a068605319ed5510670f3011d3e2bd4a8546a003 Mon Sep 17 00:00:00 2001
From: druid <druid@druids-MBP-2.lan>
Date: Mon, 25 Jan 2021 12:33:02 +0200
Subject: [PATCH] close button alignment and shadow for sticky header
---
.../hy-desktop-menu-links.scss | 14 ++++++++------
.../hy-desktop-menu-links.tsx | 18 ++++++++++++------
2 files changed, 20 insertions(+), 12 deletions(-)
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
index c8eb79c3..369c6401 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.scss
@@ -163,7 +163,14 @@
border: none;
position: absolute;
right: 10px;
- top: 10px;
+ top: 0;
+
+ @include breakpoint($extrawide) {
+ padding: 22px 32px 17px 32px;
+ }
+ @include breakpoint($xlarge) {
+ padding: 30px 32px 30px 32px;
+ }
&__label {
@include font-size(18px, 22px);
@@ -203,11 +210,6 @@
&:focus {
box-shadow: 0 0 16px 0 rgba(0, 83, 121, 0.2);
color: var(--link-blue);
-
- svg {
- //height: 42px;
- //width: 42px;
- }
}
@include breakpoint($extrawide) {
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 06a6c7c9..df3bf4af 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -72,10 +72,14 @@ export class HyDesktopMenuLinks {
if (hyBackdropDiv) {
if (state === 'open') {
- hyBackdropDiv.classList.add('is-active');
+ let me = window.outerHeight - top;
+ hyBackdropDiv.style.height = `${me}px`;
hyBackdropDiv.style.top = `${top}px`;
+ hyBackdropDiv.style.position = 'absolute';
+ hyBackdropDiv.classList.add('is-active');
+ //console.log(document.body.clientHeight + ' ' + window.outerHeight + ' ' + top);
} else {
- hyBackdropDiv.style.top = '0';
+ hyBackdropDiv.removeAttribute('style');
hyBackdropDiv.classList.remove('is-active');
}
}
@@ -134,7 +138,11 @@ export class HyDesktopMenuLinks {
// Add shadow backdrop
let rect = activeMenuItemSibling.getBoundingClientRect();
- this.showBackdropShadow('open', rect.bottom);
+ //this.showBackdropShadow('open', rect.bottom);
+ let shadowTop = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
+ ? this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height
+ : this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height;
+ this.showBackdropShadow('open', shadowTop);
// Position submenu block under the activated top menu item.
let activeButtonRect = activeMenuItem.getBoundingClientRect();
@@ -245,7 +253,6 @@ export class HyDesktopMenuLinks {
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
const headerHeight = hyHeader.offsetTop + hyHeader.offsetHeight;
- console.log('leave ' + leaveEvent.clientY + ' ' + headerHeight);
if (leaveEvent.clientY < headerHeight - 4) {
this.closePanel();
}
@@ -267,8 +274,7 @@ export class HyDesktopMenuLinks {
if (this.currenOpenMenuId == id) {
// Mouse moving around the same menu link
- if (moveEvent.clientY < topBorder - 8) {
- console.log(topBorder + ' ' + moveEvent.clientY);
+ if (moveEvent.clientY < topBorder - 4) {
this.closePanel();
}
}
--
GitLab