From cb4403d71fe3dfd63c3a8c45e375306d910d4f09 Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Fri, 5 Mar 2021 12:34:06 +0200
Subject: [PATCH] Mobile styling
---
src/components.d.ts | 14 +--
.../hy-menu-main-group.scss | 88 ++++++++++++++++---
.../hy-menu-main-group/hy-menu-main-group.tsx | 38 ++++----
.../navigation/hy-menu-main-group/readme.md | 18 ++--
src/components/navigation/menu/menu.scss | 5 ++
src/components/site-header/site-header.scss | 8 +-
src/components/site-header/site-header.tsx | 14 ++-
.../site-header/site-search/site-search.scss | 3 +
8 files changed, 135 insertions(+), 53 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index e42969d1..40e55d71 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -53,7 +53,7 @@ import {CtaLinkValue} from './components/hy-link-list/hy-link-list';
import {AdditionalInfo, RelatedLink} from './components/hy-list-item/hy-list-item';
import {MenuLanguage} from './components/navigation/menu-language/menu-language';
import {ComponentLabels} from './components/site-header/site-header';
-import {MainMenu} from './components/navigation/hy-menu-main-group/hy-menu-main-group';
+import {DonateLink, MainMenu} from './components/navigation/hy-menu-main-group/hy-menu-main-group';
import {ProcessFlowBoxValue} from './components/process/process';
import {ShortcutLinkValue} from './components/hy-shortcuts/hy-shortcuts';
import {DesktopLinks as DesktopLinks1} from './components/site-header/site-header';
@@ -628,10 +628,10 @@ export namespace Components {
}
interface HyMenuMainGroup {
dataMainMenu: MainMenu[] | string;
+ donate: DonateLink[];
isMobile: boolean;
- logoLabelGroup?: string;
- logoSizeGroup?: any;
- logoUrlGroup?: string;
+ logoLabel?: string;
+ logoUrl?: string;
siteLabel?: string;
siteUrl?: string;
}
@@ -2013,10 +2013,10 @@ declare namespace LocalJSX {
}
interface HyMenuMainGroup {
dataMainMenu?: MainMenu[] | string;
+ donate?: DonateLink[];
isMobile?: boolean;
- logoLabelGroup?: string;
- logoSizeGroup?: any;
- logoUrlGroup?: string;
+ logoLabel?: string;
+ logoUrl?: string;
onUniversityMainMenuToggled?: (event: CustomEvent<any>) => void;
siteLabel?: string;
siteUrl?: string;
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index 5fbcb1d6..da533272 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -176,12 +176,8 @@
align-items: center;
display: flex;
flex-flow: row;
- margin-left: 28px;
position: relative;
- @include breakpoint($narrow) {
- margin-left: 32px;
- }
@include breakpoint($wide) {
margin-left: 40px;
}
@@ -191,29 +187,94 @@
border: none;
background: transparent;
padding: 15px 28px 15px 15px;
+
+ &:hover {
+ cursor: pointer;
+ }
}
.menu--main-group__dropdown__top {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ margin-bottom: 23px;
+}
+
+.menu--main-group__dropdown__close {
+ border: none;
+ background-color: transparent;
+ padding: 0;
+ margin: 0;
+
+ &:hover {
+ cursor: pointer;
+ }
+}
+
+.menu--main-group__logo-container .hy-site-logo__label.group {
+ max-width: 250px;
}
.menu--main-group__dropdown__items {
+ display: flex;
+ flex-direction: column;
+
+ .menu-main-link {
+ @include font-size(15px, 20px);
+
+ background-color: var(--grayscale-dark-text);
+ color: var(--grayscale-white);
+ font-family: var(--main-font-family);
+ letter-spacing: -0.5px;
+ margin-bottom: 8px;
+ padding: 14px 20px;
+ text-decoration: none;
+ width: 100%;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
}
.menu--main-group__dropdown__donate {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ background-color: var(--grayscale-dark-text);
+ position: fixed;
+ bottom: 0;
+ margin-left: -20px;
+ width: 100%;
+
+ .hy-link__donate.group {
+ @include font-size(16px, 16px);
+ @include font-weight($semibold);
+
+ display: flex;
+ color: var(--grayscale-white);
+ font-family: var(--main-font-family);
+ margin: 20px auto 16px auto;
+ text-decoration: none;
+
+ .hy-link__donate__label {
+ margin-left: 6px;
+ }
+ }
}
.menu--main-group__dropdown--mobile {
- place-items: stretch;
- //inset: 0px;
- display: flex;
- -webkit-box-orient: vertical;
-webkit-box-direction: normal;
- flex-direction: column;
- justify-items: space-between;
+ -webkit-box-orient: vertical;
background-color: var(--grayscale-black);
bottom: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-items: space-between;
+ max-width: 350px;
overflow: hidden;
padding: 0px;
+ place-items: stretch;
position: fixed;
right: 0px;
top: 0px;
@@ -223,13 +284,12 @@
width: 0px;
&.is-open {
- padding: 20px;
+ padding: 50px 20px 20px;
transform: translateX(0px);
+ transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
visibility: visible;
width: 90%;
- z-index: 100;
- padding-top: 50px;
- transition: transform 0.3s cubic-bezier(0, 0, 0.3, 1);
+ z-index: 101;
&::after {
opacity: 1;
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 115f14bd..fe3a5917 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -4,9 +4,13 @@ export interface MainMenu {
menuLinkId: string;
}
+export interface DonateLink {
+ url: string;
+ label: string;
+}
+
import {Component, Host, h, Element, Prop, State, Watch, Listen, Event, EventEmitter} from '@stencil/core';
import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
-import {DonateLink} from '../../site-header/site-header';
let keys = {
enter: 'Enter',
@@ -21,13 +25,12 @@ export class HyMenuMainGroup {
@Element() el: HTMLElement;
@Prop() dataMainMenu: MainMenu[] | string;
@Prop() isMobile: boolean = false;
- @Prop() logoUrlGroup?: string;
- @Prop() logoSizeGroup?: any;
- @Prop() logoLabelGroup?: string;
+ @Prop() logoUrl?: string;
+ @Prop() logoLabel?: string;
@Prop() siteLabel?: string;
@Prop() siteUrl?: string;
+ @Prop() donate: DonateLink[];
@State() isMenuOpen: boolean = false;
- private donateLink: DonateLink[];
@Event() universityMainMenuToggled: EventEmitter;
@@ -154,32 +157,31 @@ export class HyMenuMainGroup {
}}
>
<div class="menu--main-group__dropdown__top">
- <hy-site-logo
- is-group={true}
- size={logoSizeGroup}
- color={logoColorGroup}
- url={this.siteUrl}
- label={this.siteLabel}
- />
+ <div class={'menu--main-group__logo-container'} id={'menu-logo'}>
+ <hy-site-logo
+ is-group={true}
+ size={logoSizeGroup}
+ color={logoColorGroup}
+ url={this.siteUrl}
+ label={this.siteLabel}
+ />
+ </div>
<button class="menu--main-group__dropdown__close" onClick={() => this.isMenuOpen == false}>
- CLOSE ME
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={white} />
</button>
</div>
<div class="menu--main-group__dropdown__items">
{this._dataMainMenu.map((item) => {
return (
<a href={item.url} class={{'menu-main-link': true}}>
- <span class="heading-icon">
- <hy-icon icon={'hy-icon-caret-right'} size={10} fill={white} />
- </span>
<span class={'menu--main-group__label'}>{item.label}</span>
</a>
);
})}
</div>
<div class="menu--main-group__dropdown__donate">
- {this.donateLink &&
- this.donateLink.map((i) => {
+ {this.donate &&
+ this.donate.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
<hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
diff --git a/src/components/navigation/hy-menu-main-group/readme.md b/src/components/navigation/hy-menu-main-group/readme.md
index dd21c99c..122597d8 100644
--- a/src/components/navigation/hy-menu-main-group/readme.md
+++ b/src/components/navigation/hy-menu-main-group/readme.md
@@ -4,15 +4,15 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------- | ------------------ | ----------- | ---------------------- | ----------- |
-| `dataMainMenu` | `data-main-menu` | | `MainMenu[] \| string` | `undefined` |
-| `isMobile` | `is-mobile` | | `boolean` | `false` |
-| `logoLabelGroup` | `logo-label-group` | | `string` | `undefined` |
-| `logoSizeGroup` | `logo-size-group` | | `any` | `undefined` |
-| `logoUrlGroup` | `logo-url-group` | | `string` | `undefined` |
-| `siteLabel` | `site-label` | | `string` | `undefined` |
-| `siteUrl` | `site-url` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| -------------- | ---------------- | ----------- | ---------------------- | ----------- |
+| `dataMainMenu` | `data-main-menu` | | `MainMenu[] \| string` | `undefined` |
+| `donate` | -- | | `DonateLink[]` | `undefined` |
+| `isMobile` | `is-mobile` | | `boolean` | `false` |
+| `logoLabel` | `logo-label` | | `string` | `undefined` |
+| `logoUrl` | `logo-url` | | `string` | `undefined` |
+| `siteLabel` | `site-label` | | `string` | `undefined` |
+| `siteUrl` | `site-url` | | `string` | `undefined` |
## Events
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index 8ea72d4e..5d38d130 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -14,6 +14,11 @@
position: absolute;
right: 0;
top: 0;
+ z-index: 99;
+
+ &.is-open {
+ z-index: 101;
+ }
}
&--desktop {
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index a47d2931..241bd7a9 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -74,7 +74,7 @@
flex-flow: row;
place-content: center space-between;
position: relative;
- z-index: 100;
+ z-index: 99;
@include breakpoint($narrow) {
margin: 0 auto;
@@ -161,7 +161,11 @@
.hy-site-header__menu-container {
align-items: center;
display: flex;
- z-index: 510;
+ z-index: 99;
+
+ &.is-open {
+ z-index: 101;
+ }
}
.hy-site-header__panel {
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index cf04fdf4..433c6922 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -452,7 +452,7 @@ export class SiteHeader {
<div class={'menu--secondary menu--secondary--group'}>
<hy-site-search
class={'menu--secondary__item group'}
- size={14}
+ size={18}
color={logoColorGroup}
is-group={true}
show-label={true}
@@ -460,7 +460,15 @@ export class SiteHeader {
search-labels={this.dataSiteSearchLabels}
search-tools={this.dataSearchTools}
/>
- <hy-menu-main-group is-mobile={true} data-main-menu={this.dataMainMenuLinks} />
+ <hy-menu-main-group
+ site-label={this.siteLabel}
+ site-url={this.siteUrl}
+ logo-label={this.logoLabel}
+ logo-url={this.logoUrl}
+ is-mobile={true}
+ donate={this.donateLink}
+ data-main-menu={this.dataMainMenuLinks}
+ />
</div>
</div>
)}
@@ -475,7 +483,7 @@ export class SiteHeader {
)}
</div>
- <div class={'hy-site-header__menu-container'}>
+ <div class={{'hy-site-header__menu-container': true, 'is-open': this.isMenuOpen}}>
{!this.isGroup && (
<hy-site-search
class={'menu--secondary__item'}
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index 177a4028..bf1d97e7 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -117,10 +117,13 @@
.button--search__label {
color: var(--grayscale-white);
+ display: none;
@include breakpoint($wide) {
@include font-size(14px, 24px);
@include font-weight($semibold);
+
+ display: block;
letter-spacing: -0.5px;
}
}
--
GitLab