From 7e6649544414c8dab1d097ab02d7878a8f5ac403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20H=C3=A4m=C3=A4l=C3=A4inen?=
<sebastian.hamalainen@helsinki.fi>
Date: Wed, 2 Dec 2020 14:33:48 +0200
Subject: [PATCH] NXSTAGE-1002: Mobile menu fixes
---
.../navigation/menu-item/menu-item.scss | 10 +--
.../navigation/menu-item/menu-item.tsx | 2 +-
.../menu-mobile-breadcrumb.scss | 3 +-
src/components/navigation/menu/menu.scss | 12 +++-
src/components/navigation/menu/menu.tsx | 66 ++++++++++---------
src/components/site-header/site-header.scss | 6 +-
6 files changed, 54 insertions(+), 45 deletions(-)
diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 06b73c8c..451c3592 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -65,12 +65,13 @@
:host(.hy-menu-item) {
a {
- @include font-size(15px, 20px);
+ @include font-size(16px, 20px);
@include font-weight($regular);
align-items: center;
color: var(--brand-main-nearly-black);
display: flex;
font-family: var(--main-font-family);
+ letter-spacing: -0.5px;
padding: 24px 16px;
text-decoration: none;
width: 100%;
@@ -83,10 +84,9 @@
&.hy-menu-item--mobile {
background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
color: var(--brand-main-light);
- padding: 12px 12px 12px 20px;
+ padding: 14px 12px 14px 20px;
- &.is-active,
- &.in-active-trail {
+ &.is-active {
@include font-weight($bold);
color: var(--grayscale-black);
position: relative;
@@ -217,7 +217,7 @@
align-items: center;
background: linear-gradient(270deg, var(--grayscale-background-box) 0%, var(--grayscale-light) 100%);
border-bottom: 0;
- border-left: 1px dashed var(--brand-main-light);
+ border-left: 1px dotted var(--brand-main-light);
border-right: 0;
border-top: 0;
cursor: pointer;
diff --git a/src/components/navigation/menu-item/menu-item.tsx b/src/components/navigation/menu-item/menu-item.tsx
index 50cf3dae..34c7be30 100644
--- a/src/components/navigation/menu-item/menu-item.tsx
+++ b/src/components/navigation/menu-item/menu-item.tsx
@@ -212,7 +212,7 @@ export class MenuItem {
onClick={() => this.handleClick()}
class={'hy-menu-item__button'}
>
- <hy-icon icon={'hy-icon-caret-right'} size={12} />
+ <hy-icon icon={'hy-icon-caret-right'} size={14} />
</button>
)}
diff --git a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
index 5b81b608..7e18b573 100644
--- a/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
+++ b/src/components/navigation/menu-mobile-breadcrumb/menu-mobile-breadcrumb.scss
@@ -21,11 +21,12 @@
}
&__label {
- @include font-size(14px, 20px);
+ @include font-size(16px, 20px);
@include font-weight($regular);
align-items: center;
color: var(--brand-main-light);
display: flex;
+ letter-spacing: -0.5px;
margin-left: 6px;
text-align: left;
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 3f5f7a45..a6bd0ac8 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -33,13 +33,17 @@
}
}
+.hy-menu-container--mobile {
+ min-height: calc(100vh - 60px);
+ overflow-x: hidden;
+ overflow-y: visible;
+ padding-top: 32px;
+}
+
.hy-menu {
&--mobile {
-webkit-overflow-scrolling: touch;
flex-flow: column;
- min-height: calc(100vh - 60px);
- overflow-x: hidden;
- overflow-y: visible;
padding-left: 12px;
padding-right: 12px;
transform: translateX(100%);
@@ -73,8 +77,10 @@
}
&__logo-container {
+ box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
display: inline-block;
padding: 16px;
+ z-index: 100;
@include breakpoint($narrow) {
padding: 16px 28px;
diff --git a/src/components/navigation/menu/menu.tsx b/src/components/navigation/menu/menu.tsx
index 6e89a72d..9ab50e0a 100644
--- a/src/components/navigation/menu/menu.tsx
+++ b/src/components/navigation/menu/menu.tsx
@@ -133,38 +133,40 @@ export class Menu {
label={this.logoLabel}
/>
</div>
- <div
- id={'menu-bc-container'}
- class={{
- 'hy-menu__breadcrumbs': true,
- 'is-empty': this.breadcrumbs.length === 0,
- }}
- >
- <hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
- {this.breadcrumbs.length
- ? this.breadcrumbs.map((breadcrumb, index) => {
- return (
- <hy-menu-mobile-breadcrumb
- label-back={this.menuButtonBreadcrumbReturn}
- label-front-page={this.labelFrontPage}
- label={breadcrumb.label}
- bid={breadcrumb.bid}
- is-first={index === 0}
- />
- );
- })
- : ''}
- </div>
- <div
- aria-hidden={this.menuIsOpen ? 'false' : 'true'}
- class={{
- 'hy-menu': true,
- 'hy-menu--mobile': true,
- 'is-open': this.menuIsOpen,
- 'is-demo': this.isDemo,
- }}
- >
- <slot />
+ <div class="hy-menu-container--mobile">
+ <div
+ id={'menu-bc-container'}
+ class={{
+ 'hy-menu__breadcrumbs': true,
+ 'is-empty': this.breadcrumbs.length === 0,
+ }}
+ >
+ <hy-menu-language is-mobile={true} data-menu-language={this.dataMenuLanguage} />
+ {this.breadcrumbs.length
+ ? this.breadcrumbs.map((breadcrumb, index) => {
+ return (
+ <hy-menu-mobile-breadcrumb
+ label-back={this.menuButtonBreadcrumbReturn}
+ label-front-page={this.labelFrontPage}
+ label={breadcrumb.label}
+ bid={breadcrumb.bid}
+ is-first={index === 0}
+ />
+ );
+ })
+ : ''}
+ </div>
+ <div
+ aria-hidden={this.menuIsOpen ? 'false' : 'true'}
+ class={{
+ 'hy-menu': true,
+ 'hy-menu--mobile': true,
+ 'is-open': this.menuIsOpen,
+ 'is-demo': this.isDemo,
+ }}
+ >
+ <slot />
+ </div>
</div>
<div class={'hy-link__donate'}>
{this.donateLink
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index 7c43f230..9dfd65aa 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -55,7 +55,7 @@
bottom: 0;
overflow: hidden;
padding: 0;
- position: absolute;
+ position: fixed;
right: 0;
top: 0;
transform: translateX(100%);
@@ -86,7 +86,7 @@
}
&.is-open {
- position: absolute;
+ position: fixed;
right: 0;
top: 32px;
transform: translateY(-50%);
@@ -127,7 +127,7 @@
.hy-backdrop {
bottom: 0;
left: 0;
- position: absolute;
+ position: fixed;
right: 0;
top: 0;
visibility: hidden;
--
GitLab