From b29f31a50b3076e7052d165179719292a2a0e51e Mon Sep 17 00:00:00 2001
From: Tuukka Turu <tuukka.turu@druid.fi>
Date: Mon, 12 Oct 2020 10:32:48 +0300
Subject: [PATCH] Header and menu behavior changes
---
src/components.d.ts | 4 +
.../navigation/menu-item/menu-item.scss | 16 +-
src/components/navigation/menu-item/readme.md | 38 +-
.../menu-language/menu-language.scss | 29 +-
.../menu-language/menu-language.tsx | 2 +-
.../menu-level-container.scss | 1 +
.../navigation/menu-level-container/readme.md | 20 +-
src/components/navigation/menu/menu.scss | 9 +-
src/components/navigation/menu/readme.md | 24 +-
src/components/site-header/readme.md | 24 +-
src/components/site-header/site-header.scss | 147 +++++--
src/components/site-header/site-header.tsx | 227 +++++++----
.../site-header/site-logo/site-logo.scss | 32 +-
.../site-header/site-logo/site-logo.tsx | 4 +-
.../site-header/site-search/site-search.scss | 64 +++-
.../site-header/site-search/site-search.tsx | 2 +-
src/index.html | 358 ++++++++----------
src/utils/utils.ts | 1 +
18 files changed, 625 insertions(+), 377 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index 61b2d9fb..4b9ad4b5 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -385,6 +385,8 @@ export namespace Components {
dataSiteHeaderLabels: string;
logoLabel?: string;
logoUrl?: string;
+ menuLabelClose?: string;
+ menuLabelOpen?: string;
menuType: MenuType;
}
interface HySiteLogo {
@@ -1105,6 +1107,8 @@ declare namespace LocalJSX {
dataSiteHeaderLabels?: string;
logoLabel?: string;
logoUrl?: string;
+ menuLabelClose?: string;
+ menuLabelOpen?: string;
menuType?: MenuType;
}
interface HySiteLogo {
diff --git a/src/components/navigation/menu-item/menu-item.scss b/src/components/navigation/menu-item/menu-item.scss
index 5d5098f1..830797c2 100644
--- a/src/components/navigation/menu-item/menu-item.scss
+++ b/src/components/navigation/menu-item/menu-item.scss
@@ -134,11 +134,13 @@ a {
}
@include breakpoint($extrawide) {
- @include font-size(16px, 16px);
+ @include font-size(15px, 16px);
+ padding: 10px 8px;
}
@include breakpoint($overwide) {
- @include font-size(18px, 18px);
+ @include font-size(18px, 16px);
+ padding: 10px;
}
.hy-menu-item__label {
@@ -151,6 +153,11 @@ a {
@include breakpoint($extrawide) {
padding-top: 13px;
}
+
+ @include breakpoint($overwide) {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
}
&.in-active-trail {
@@ -164,6 +171,11 @@ a {
padding-bottom: 8px;
padding-top: 14px;
}
+
+ @include breakpoint($overwide) {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ }
}
}
}
diff --git a/src/components/navigation/menu-item/readme.md b/src/components/navigation/menu-item/readme.md
index 7d3c7e65..17763127 100644
--- a/src/components/navigation/menu-item/readme.md
+++ b/src/components/navigation/menu-item/readme.md
@@ -4,25 +4,25 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------- | ---------------------------- | ----------- | --------------------------------------------------------- | ------------------ |
-| `ariaExpanded` | `aria-expanded` | | `boolean` | `false` |
-| `depth` | `depth` | | `number` | `0` |
-| `hasChildren` | `has-children` | | `boolean` | `null` |
-| `inActiveTrail` | `in-active-trail` | | `boolean` | `false` |
-| `isActive` | `is-active` | | `boolean` | `false` |
-| `isActiveChild` | `is-active-child` | | `boolean` | `false` |
-| `isDemo` | `is-demo` | | `boolean` | `false` |
-| `isHeading` | `is-heading` | | `boolean` | `false` |
-| `isParent` | `is-parent` | | `boolean` | `false` |
-| `label` | `label` | | `string` | `''` |
-| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` |
-| `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` |
-| `menuLinkId` | `menu-link-id` | | `string` | `''` |
-| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav` | `MenuType.desktop` |
-| `parentAsHeading` | `parent-as-heading` | | `string` | `''` |
-| `parentExpanded` | `parent-expanded` | | `boolean` | `false` |
-| `url` | `url` | | `string` | `''` |
+| Property | Attribute | Description | Type | Default |
+| ------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------- | ------------------ |
+| `ariaExpanded` | `aria-expanded` | | `boolean` | `false` |
+| `depth` | `depth` | | `number` | `0` |
+| `hasChildren` | `has-children` | | `boolean` | `null` |
+| `inActiveTrail` | `in-active-trail` | | `boolean` | `false` |
+| `isActive` | `is-active` | | `boolean` | `false` |
+| `isActiveChild` | `is-active-child` | | `boolean` | `false` |
+| `isDemo` | `is-demo` | | `boolean` | `false` |
+| `isHeading` | `is-heading` | | `boolean` | `false` |
+| `isParent` | `is-parent` | | `boolean` | `false` |
+| `label` | `label` | | `string` | `''` |
+| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `''` |
+| `menuItemAlternative` | `menu-item-alternative` | | `boolean` | `false` |
+| `menuLinkId` | `menu-link-id` | | `string` | `''` |
+| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.tablet` | `MenuType.desktop` |
+| `parentAsHeading` | `parent-as-heading` | | `string` | `''` |
+| `parentExpanded` | `parent-expanded` | | `boolean` | `false` |
+| `url` | `url` | | `string` | `''` |
## Events
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 5fd477f1..46563382 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -23,11 +23,20 @@
color: var(--brand-main-nearly-black);
display: flex;
flex-flow: row;
+ font-weight: 600;
letter-spacing: -0.4px;
margin: 0 -4px;
padding: 0;
text-transform: uppercase;
+ @include breakpoint($extrawide) {
+ @include font-size(12px, 24px);
+ }
+
+ @include breakpoint($overwide) {
+ @include font-size(14px, 24px);
+ }
+
&:focus {
outline: solid 2px var(--additional-yellow);
outline-offset: 2px;
@@ -42,6 +51,9 @@
> * {
padding: 0 4px;
}
+ span {
+ padding: 0;
+ }
}
.menu--language__dropdown {
@@ -54,7 +66,7 @@
margin: 0;
padding: 15px;
position: absolute;
- right: 15px;
+ right: 5px;
text-transform: uppercase;
top: 40px;
visibility: hidden;
@@ -69,3 +81,18 @@
}
}
}
+
+.menu--language__globe-icon svg {
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 16px;
+ }
+ @include breakpoint($overwide) {
+ height: 14px;
+ width: 14px;
+ }
+ @include breakpoint($extrawide) {
+ height: 16px;
+ width: 16px;
+ }
+}
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 27e10b17..52c6fd7f 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -69,7 +69,7 @@ export class MenuLanguage {
}}
aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
>
- <hy-icon icon={'hy-icon-globe'} size={14} fill={black} />
+ <hy-icon class={'menu--language__globe-icon'} icon={'hy-icon-globe'} size={14} fill={black} />
<span>
{this._dataMenuLanguage.map((item) => {
if (item.isActive) {
diff --git a/src/components/navigation/menu-level-container/menu-level-container.scss b/src/components/navigation/menu-level-container/menu-level-container.scss
index 40a1578b..b7459214 100644
--- a/src/components/navigation/menu-level-container/menu-level-container.scss
+++ b/src/components/navigation/menu-level-container/menu-level-container.scss
@@ -19,6 +19,7 @@
}
&--desktop {
+ align-items: center;
display: flex;
flex-flow: row;
width: 100%;
diff --git a/src/components/navigation/menu-level-container/readme.md b/src/components/navigation/menu-level-container/readme.md
index ab14f50c..723ff643 100644
--- a/src/components/navigation/menu-level-container/readme.md
+++ b/src/components/navigation/menu-level-container/readme.md
@@ -4,16 +4,16 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------- | ---------------------------- | ----------- | --------------------------------------------------------- | ----------------- |
-| `activeTrailTriggered` | `active-trail-triggered` | | `boolean` | `false` |
-| `depth` | `depth` | | `number` | `0` |
-| `headingItem` | `heading-item` | | `any` | `undefined` |
-| `labelFrontPage` | `label-front-page` | | `string` | `undefined` |
-| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `undefined` |
-| `menuLevel` | `menu-level` | | `number` | `undefined` |
-| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav` | `MenuType.mobile` |
-| `triggerItem` | `trigger-item` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ------------------------- | ---------------------------- | ----------- | ---------------------------------------------------------------------------- | ----------------- |
+| `activeTrailTriggered` | `active-trail-triggered` | | `boolean` | `false` |
+| `depth` | `depth` | | `number` | `0` |
+| `headingItem` | `heading-item` | | `any` | `undefined` |
+| `labelFrontPage` | `label-front-page` | | `string` | `undefined` |
+| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `undefined` |
+| `menuLevel` | `menu-level` | | `number` | `undefined` |
+| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.tablet` | `MenuType.mobile` |
+| `triggerItem` | `trigger-item` | | `string` | `undefined` |
## Dependencies
diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss
index a2b7a50d..0138078e 100644
--- a/src/components/navigation/menu/menu.scss
+++ b/src/components/navigation/menu/menu.scss
@@ -11,7 +11,7 @@
flex-flow: column;
justify-items: stretch;
left: 0;
- padding: 20px 20px 0;
+ padding: 20px 32px 0;
position: absolute;
right: 0;
top: 0;
@@ -119,4 +119,11 @@
&.is-empty {
min-height: 35px;
}
+
+ @include breakpoint($medium) {
+ .menu--language {
+ display: none;
+ visibility: hidden;
+ }
+ }
}
diff --git a/src/components/navigation/menu/readme.md b/src/components/navigation/menu/readme.md
index 68fddaf4..841305ec 100644
--- a/src/components/navigation/menu/readme.md
+++ b/src/components/navigation/menu/readme.md
@@ -4,18 +4,18 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------------- | ------------------------------- | ----------- | --------------------------------------------------------- | ------------------ |
-| `dataMenuDonate` | `data-menu-donate` | | `string` | `undefined` |
-| `dataMenuLanguage` | `data-menu-language` | | `string` | `undefined` |
-| `isDemo` | `is-demo` | | `boolean` | `false` |
-| `labelFrontPage` | `label-front-page` | | `string` | `undefined` |
-| `logoLabel` | `logo-label` | | `string` | `undefined` |
-| `logoUrl` | `logo-url` | | `string` | `undefined` |
-| `menuButtonBreadcrumbReturn` | `menu-button-breadcrumb-return` | | `string` | `undefined` |
-| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `undefined` |
-| `menuIsOpen` | `menu-is-open` | | `boolean` | `true` |
-| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav` | `MenuType.desktop` |
+| Property | Attribute | Description | Type | Default |
+| ---------------------------- | ------------------------------- | ----------- | ---------------------------------------------------------------------------- | ------------------ |
+| `dataMenuDonate` | `data-menu-donate` | | `string` | `undefined` |
+| `dataMenuLanguage` | `data-menu-language` | | `string` | `undefined` |
+| `isDemo` | `is-demo` | | `boolean` | `false` |
+| `labelFrontPage` | `label-front-page` | | `string` | `undefined` |
+| `logoLabel` | `logo-label` | | `string` | `undefined` |
+| `logoUrl` | `logo-url` | | `string` | `undefined` |
+| `menuButtonBreadcrumbReturn` | `menu-button-breadcrumb-return` | | `string` | `undefined` |
+| `menuButtonSubmenuExpand` | `menu-button-submenu-expand` | | `string` | `undefined` |
+| `menuIsOpen` | `menu-is-open` | | `boolean` | `true` |
+| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.tablet` | `MenuType.desktop` |
## Events
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 9a3781b7..7c3ceb9e 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -4,36 +4,38 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ---------------------- | ------------------------- | ----------- | --------------------------------------------------------- | ------------------ |
-| `dataMenuDonate` | `data-menu-donate` | | `string` | `undefined` |
-| `dataMenuLanguage` | `data-menu-language` | | `string` | `undefined` |
-| `dataSiteHeaderLabels` | `data-site-header-labels` | | `string` | `undefined` |
-| `logoLabel` | `logo-label` | | `string` | `undefined` |
-| `logoUrl` | `logo-url` | | `string` | `undefined` |
-| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav` | `MenuType.default` |
+| Property | Attribute | Description | Type | Default |
+| ---------------------- | ------------------------- | ----------- | ---------------------------------------------------------------------------- | ------------------ |
+| `dataMenuDonate` | `data-menu-donate` | | `string` | `undefined` |
+| `dataMenuLanguage` | `data-menu-language` | | `string` | `undefined` |
+| `dataSiteHeaderLabels` | `data-site-header-labels` | | `string` | `undefined` |
+| `logoLabel` | `logo-label` | | `string` | `undefined` |
+| `logoUrl` | `logo-url` | | `string` | `undefined` |
+| `menuLabelClose` | `menu-label-close` | | `string` | `undefined` |
+| `menuLabelOpen` | `menu-label-open` | | `string` | `undefined` |
+| `menuType` | `menu-type` | | `MenuType.desktop \| MenuType.mobile \| MenuType.sidenav \| MenuType.tablet` | `MenuType.default` |
## Dependencies
### Depends on
- [hy-site-logo](site-logo)
+- [hy-menu-language](../navigation/menu-language)
- [hy-site-search](site-search)
- [hy-icon](../icon)
-- [hy-menu-language](../navigation/menu-language)
### Graph
```mermaid
graph TD;
hy-site-header --> hy-site-logo
+ hy-site-header --> hy-menu-language
hy-site-header --> hy-site-search
hy-site-header --> hy-icon
- hy-site-header --> hy-menu-language
hy-site-logo --> hy-icon
- hy-site-search --> hy-icon
hy-menu-language --> hy-menu-language-item
hy-menu-language --> hy-icon
+ hy-site-search --> hy-icon
style hy-site-header fill:#f9f,stroke:#333,stroke-width:4px
```
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index ff95e189..e1f22293 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -4,17 +4,14 @@
.hy-site-header {
align-items: center;
+ background-color: var(--grayscale-white);
+ box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
display: flex;
flex-flow: row;
-
- &--mobile {
- background-color: var(--brand-main-nearly-black);
- }
+ place-content: center space-between;
@include breakpoint($medium) {
align-content: center;
- background-color: var(--grayscale-white);
- box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px;
display: flex;
flex-flow: row;
justify-content: space-between;
@@ -22,17 +19,33 @@
max-width: $fullhd;
}
+ @include breakpoint($extrawide) {
+ height: 96px;
+ }
+
+ @include breakpoint($overwide) {
+ height: 120px;
+ }
+
&__logo-container {
- margin: 24px 16px;
- @include breakpoint($medium) {
- margin: 24px 32px;
+ margin: 16px 8px;
+
+ @include breakpoint($narrow) {
+ margin: 16px 16px 16px 24px;
+ }
+
+ @include breakpoint($wide) {
+ margin: 16px 24px;
+ }
+
+ @include breakpoint($extrawide) {
+ margin: 16px;
}
}
&__menu-container {
align-items: center;
display: flex;
- margin-left: auto;
z-index: 510;
}
@@ -55,22 +68,61 @@
visibility: visible;
width: 90%;
z-index: 100;
+
+ @include breakpoint($medium) {
+ width: 356px;
+ }
}
}
&__panel-toggle {
background: transparent;
border: 0 none;
- padding: 15px;
+ padding: 15px 16px 15px 12px;
+
+ @include breakpoint($narrow) {
+ padding: 15px 32px 15px 10px;
+ }
&.is-open {
margin: 10px;
padding: 10px;
position: absolute;
right: 0;
- top: 10px;
+ //top: 10px;
+ top: 17px;
z-index: 101;
}
+
+ &__label {
+ @include font-weight($bold);
+ align-items: center;
+ color: var(--grayscale-black);
+ display: flex;
+ flex-direction: row;
+ font-family: var(--main-font-family);
+ font-size: 0;
+ text-transform: uppercase;
+
+ @include breakpoint($narrow) {
+ @include font-size(15px, 16px);
+ text-transform: uppercase;
+ }
+
+ svg {
+ height: 24px;
+ margin-left: 4px;
+ width: 24px;
+
+ @include breakpoint($narrow) {
+ margin-left: 8px;
+ }
+
+ @include breakpoint($medium) {
+ width: 20px;
+ }
+ }
+ }
}
}
@@ -100,29 +152,27 @@
align-items: center;
display: flex;
flex-flow: row;
- padding: 15px;
- }
-
- &__item:not(.is-first) {
- &::before {
- align-self: center;
- border-left: 1px dashed var(--brand-main-nearly-black);
- content: '';
- display: block;
- height: 25px;
- margin-left: -15px;
- margin-right: 15px;
- margin-top: 5px;
- width: 1px;
- }
+ padding: 10px;
+ }
+ }
+
+ @include breakpoint($extrawide) {
+ &__item {
+ padding: 10px 8px;
+ }
+ }
+
+ @include breakpoint($overwide) {
+ &__item {
+ padding: 10px;
}
}
}
.hy-link__donate {
- @include breakpoint($medium) {
- margin-left: 15px;
- margin-right: 15px;
+ @include breakpoint($wide) {
+ margin-left: 10px;
+ margin-right: 10px;
padding: 0;
text-decoration: none;
@@ -132,14 +182,47 @@
}
}
+ @include breakpoint($extrawide) {
+ margin-left: 8px;
+ margin-right: 32px;
+ }
+
+ @include breakpoint($overwide) {
+ margin-left: 10px;
+ margin-right: 32px;
+ }
+
&__label {
- @include breakpoint($medium) {
+ @include breakpoint($wide) {
@include font-size(14px, 14px);
- @include font-weight($regular);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
+ font-weight: 600;
margin-left: 4px;
text-decoration: none;
}
+
+ @include breakpoint($extrawide) {
+ @include font-size(12px, 14px);
+ }
+
+ @include breakpoint($overwide) {
+ @include font-size(14px, 14px);
+ }
+ }
+
+ svg {
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 16px;
+ }
+ @include breakpoint($overwide) {
+ height: 14px;
+ width: 14px;
+ }
+ @include breakpoint($extrawide) {
+ height: 16px;
+ width: 16px;
+ }
}
}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index b2b4384f..53542c52 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -25,6 +25,8 @@ export class SiteHeader {
@Prop() dataSiteHeaderLabels: string;
@Prop() logoUrl?: string;
@Prop() logoLabel?: string;
+ @Prop() menuLabelOpen?: string;
+ @Prop() menuLabelClose?: string;
@Prop({reflect: true}) menuType: MenuType = MenuType.default;
@State() isMobile: boolean;
@State() isMenuOpen: boolean = false;
@@ -88,91 +90,174 @@ export class SiteHeader {
applySizeClasses(size: number) {
// Set the menu-type based on the width of the browser.
- if (size < 768) {
+ if (size < 1200 && size > 960) {
+ this.menuType = MenuType.tablet;
+ } else if (size <= 960) {
this.menuType = MenuType.mobile;
} else {
this.menuType = MenuType.desktop;
}
// Pass the menu type to menu component.
- this.isMobile = this.menuType === MenuType.mobile;
- this.el.children[0].setAttribute('menu-type', this.menuType);
+ this.isMobile = this.menuType === (MenuType.mobile || MenuType.tablet);
+ const menuAttribute = this.menuType === MenuType.tablet ? MenuType.mobile : this.menuType;
+ this.el.children[0].setAttribute('menu-type', menuAttribute);
}
render() {
const logoSize = this.isMobile ? SiteLogoSize.small : SiteLogoSize.big;
- const logoColor = this.isMobile ? ColorVariant.white : ColorVariant.black;
+ const logoColor = ColorVariant.black;
let classAttributes = ['hy-site-header', 'hy-site-header--' + this.menuType];
- return this.isMobile ? (
- // Mobile.
- <header class={classAttributes.join(' ')}>
- <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
- <div class={'hy-site-header__logo-container'}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
- </div>
- <div class={'hy-site-header__menu-container'}>
- <hy-site-search
- is-alternative={this.isMenuOpen}
- color={this.isMenuOpen ? ColorVariant.black : ColorVariant.white}
- size={20}
- labels={this.searchLabels}
- />
- <button
- onClick={() => this.mobileMenuToggle()}
- class={{
- 'hy-site-header__panel-toggle': true,
- 'is-open': this.isMenuOpen,
- }}
- aria-label={this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open']}
- >
- {this.isMenuOpen ? (
- <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
- ) : (
- <hy-icon icon={'hy-icon-hamburger'} size={20} fill={ColorVariant.white} />
- )}
- </button>
- <div
- class={{
- 'is-open': this.isMenuOpen,
- 'hy-site-header__panel': true,
- }}
- >
+ switch (this.menuType) {
+ case MenuType.desktop:
+ return (
+ <header class={classAttributes.join(' ')}>
+ <div class={'hy-site-header__logo-container'}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
<slot name={'menu'} />
- </div>
- </div>
- </header>
+ <div class={'menu--secondary'}>
+ <hy-menu-language
+ class={'menu--secondary__item is-first'}
+ is-mobile={false}
+ data-menu-language={this.dataMenuLanguage}
+ labels={this.languageLabels}
+ />
+ <hy-site-search
+ class={'menu--secondary__item'}
+ size={14}
+ color={ColorVariant.black}
+ show-label={true}
+ labels={this.searchLabels}
+ />
+ {this.donateLink.map((i) => {
+ return (
+ <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
+ <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
+ <span class={'hy-link__donate__label'}>{i.label}</span>
+ </a>
+ );
+ })}
+ </div>
+ </header>
+ );
+ case MenuType.tablet:
+ return (
+ <header class={classAttributes.join(' ')}>
+ <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
+ <div class={'hy-site-header__logo-container'}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
+ <div class={'menu--secondary'}>
+ <hy-menu-language
+ class={'menu--secondary__item is-first'}
+ is-mobile={false}
+ data-menu-language={this.dataMenuLanguage}
+ labels={this.languageLabels}
+ />
+ <hy-site-search
+ class={'menu--secondary__item'}
+ size={14}
+ color={ColorVariant.black}
+ show-label={true}
+ labels={this.searchLabels}
+ />
+ {this.donateLink.map((i) => {
+ return (
+ <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
+ <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
+ <span class={'hy-link__donate__label'}>{i.label}</span>
+ </a>
+ );
+ })}
+ </div>
+ <div class={'hy-site-header__menu-container'}>
+ <button
+ onClick={() => this.mobileMenuToggle()}
+ class={{
+ 'hy-site-header__panel-toggle': true,
+ 'is-open': this.isMenuOpen,
+ }}
+ aria-label={this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open']}
+ >
+ {this.isMenuOpen ? (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelClose}
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ ) : (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelOpen}
+ <hy-icon icon={'hy-icon-hamburger'} size={20} fill={ColorVariant.black} />
+ </span>
+ )}
+ </button>
+ <div
+ class={{
+ 'is-open': this.isMenuOpen,
+ 'hy-site-header__panel': true,
+ }}
+ >
+ <slot name={'menu'} />
+ </div>
+ </div>
+ </header>
+ );
+ case MenuType.mobile:
+ return (
+ <header class={classAttributes.join(' ')}>
+ <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
+ <div class={'hy-site-header__logo-container'}>
+ <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
+ </div>
+ <div class={'hy-site-header__menu-container'}>
+ <hy-site-search
+ class={'menu--secondary__item'}
+ size={14}
+ color={ColorVariant.black}
+ show-label={true}
+ labels={this.searchLabels}
+ />
+ <button
+ onClick={() => this.mobileMenuToggle()}
+ class={{
+ 'hy-site-header__panel-toggle': true,
+ 'is-open': this.isMenuOpen,
+ }}
+ aria-label={this.isMenuOpen ? this.menuLabels['close'] : this.menuLabels['open']}
+ >
+ {this.isMenuOpen ? (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelClose}
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.black} />
+ </span>
+ ) : (
+ <span class="hy-site-header__panel-toggle__label">
+ {this.menuLabelOpen}
+ <hy-icon icon={'hy-icon-hamburger'} size={20} fill={ColorVariant.black} />
+ </span>
+ )}
+ </button>
+ <div
+ class={{
+ 'is-open': this.isMenuOpen,
+ 'hy-site-header__panel': true,
+ }}
+ >
+ <slot name={'menu'} />
+ </div>
+ </div>
+ </header>
+ );
+ }
+
+ /* return this.isMobile ? (
+ // Mobile.
+
) : (
// Desktop.
- <header class={classAttributes.join(' ')}>
- <div class={'hy-site-header__logo-container'}>
- <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
- </div>
- <slot name={'menu'} />
- <div class={'menu--secondary'}>
- <hy-menu-language
- class={'menu--secondary__item is-first'}
- is-mobile={false}
- data-menu-language={this.dataMenuLanguage}
- labels={this.languageLabels}
- />
- <hy-site-search
- class={'menu--secondary__item'}
- size={14}
- color={ColorVariant.black}
- show-label={true}
- labels={this.searchLabels}
- />
- {this.donateLink.map((i) => {
- return (
- <a class={'menu--secondary__item hy-link__donate'} href={i.url}>
- <hy-icon icon={'hy-icon-euro'} size={14} fill={ColorVariant.black} />
- <span class={'hy-link__donate__label'}>{i.label}</span>
- </a>
- );
- })}
- </div>
- </header>
- );
+
+ ); */
}
}
diff --git a/src/components/site-header/site-logo/site-logo.scss b/src/components/site-header/site-logo/site-logo.scss
index 8d21eee1..bac069b0 100644
--- a/src/components/site-header/site-logo/site-logo.scss
+++ b/src/components/site-header/site-logo/site-logo.scss
@@ -3,7 +3,7 @@
}
:host(.hy-site-logo--mobile) {
- --site-logo-color: var(--grayscale-white);
+ --site-logo-color: var(--brand-main-nearly-black);
}
a {
@@ -25,25 +25,37 @@ a {
font-family: var(--main-font-family);
letter-spacing: -0.9px;
margin-left: 8px;
- max-width: 90px;
- min-width: 90px;
+ max-width: 100%;
text-transform: uppercase;
- @include breakpoint($medium) {
- @include font-size(16px, 16px);
- max-width: 100px;
+ @include breakpoint($narrow) {
+ @include font-size(15px, 16px);
+ margin-left: 6px;
+ }
+
+ @include breakpoint($overwide) {
+ @include font-size(18px, 16px);
+ margin-left: 8px;
}
+ }
+
+ &__icon svg {
+ height: 32px;
+ width: 32px;
- @include breakpoint(62em) {
- max-width: 100%;
+ @include breakpoint($narrow) {
+ height: 48px;
+ width: 48px;
}
@include breakpoint($extrawide) {
- @include font-size(16px, 16px);
+ height: 56px;
+ width: 56px !important;
}
@include breakpoint($overwide) {
- @include font-size(18px, 18px);
+ height: 64px;
+ width: 64px;
}
}
}
diff --git a/src/components/site-header/site-logo/site-logo.tsx b/src/components/site-header/site-logo/site-logo.tsx
index 435be271..90f924f2 100644
--- a/src/components/site-header/site-logo/site-logo.tsx
+++ b/src/components/site-header/site-logo/site-logo.tsx
@@ -16,7 +16,7 @@ export class SiteLogo {
return this.url ? (
<Host class={'hy-site-logo'}>
<a href={this.url}>
- <hy-icon icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
+ <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
<span class={'hy-site-logo__label'} style={{color: this.color}}>
{this.label}
</span>
@@ -24,7 +24,7 @@ export class SiteLogo {
</Host>
) : this.label ? (
<Host class={'hy-site-logo'}>
- <hy-icon icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
+ <hy-icon class={'hy-site-logo__icon'} icon={'hy-icon-hy-logo'} size={this.size} fill={this.color} />
<span class={'hy-site-logo__label'} style={{color: this.color}}>
{this.label}
</span>
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index 5f4a86b4..4190ab9a 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -3,7 +3,12 @@
background: transparent;
border: 0 none;
display: flex;
- padding: 15px;
+ padding: 12px;
+ flex-direction: row;
+
+ @include breakpoint($narrow) {
+ padding: 15px 5px;
+ }
@include breakpoint($medium) {
padding: 4px 0;
@@ -14,6 +19,10 @@
}
}
+ @include breakpoint($wide) {
+ flex-direction: row-reverse;
+ }
+
&.is-open--menu {
position: absolute;
right: 50px;
@@ -22,7 +31,58 @@
}
&__label {
- @include font-size(14px);
+ @include font-size(14px, 14px);
+ @include font-weight($bold);
+
+ color: var(--site-logo-color);
+ display: none;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.9px;
margin-left: 4px;
+
+ @include breakpoint($narrow) {
+ @include font-size(15px, 16px);
+ display: block;
+ margin-left: 4px;
+ margin-right: 8px;
+ text-transform: uppercase;
+ }
+
+ @include breakpoint($wide) {
+ @include font-size(14px);
+ font-weight: 600;
+ text-transform: none;
+ }
+
+ @include breakpoint($extrawide) {
+ @include font-size(12px, 14px);
+ }
+
+ @include breakpoint($overwide) {
+ @include font-size(14px, 14px);
+ }
+ }
+
+ svg {
+ height: 20px;
+ width: 20px;
+
+ @include breakpoint($medium) {
+ height: 16px;
+ width: 16px;
+ }
+
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 16px;
+ }
+ @include breakpoint($overwide) {
+ height: 14px;
+ width: 14px;
+ }
+ @include breakpoint($extrawide) {
+ height: 16px;
+ width: 16px;
+ }
}
}
diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx
index 1548b54b..14ed05b7 100644
--- a/src/components/site-header/site-search/site-search.tsx
+++ b/src/components/site-header/site-search/site-search.tsx
@@ -32,8 +32,8 @@ export class SiteSearch {
'is-open--menu': this.isAlternative,
}}
>
- <hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
{this.showLabel ? <span class={'button--search__label'}>{this._labels['label']}</span> : ''}
+ <hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
</button>
);
}
diff --git a/src/index.html b/src/index.html
index a3b57187..b02ad2a9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,126 +11,164 @@
<script nomodule src="/build/huds-lib.js"></script>
</head>
<body class="full-width" style="padding: 0; margin: 0;">
- <hy-main has-sidebar="false">
- <div class="layout-content">
- <hy-main-content-wrapper>
- <hy-prominent-image
- text-title="Making waves with research"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- />
- </hy-main-content-wrapper>
- <!--
- <hy-introduction
- reversed
- text-title="This is an introduction"
- text-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque pretium leo quis efficitur. Praesent lorem sapien, pharetra ac suscipit non, bibendum sed nisi. Suspendisse semper felis quam, ut congue dui interdum at. Phasellus et porta libero, nec lobortis odio. Mauris ut elementum risus. Ut sed consectetur tellus. Duis pellentesque, ante in tempus pellentesque, elit nisi volutpat erat, in semper leo metus nec purus. Mauris eu finibus diam. Vestibulum eget ex et magna euismod porttitor. Pellentesque non tellus ornare, volutpat metus sit amet, ornare est. Morbi et ornare ipsum. Pellentesque condimentum magna est, vel luctus velit iaculis quis. Ut eu mi non augue dictum porta. Aliquam erat volutpat. Praesent volutpat, turpis nec mattis condimentum, mi lectus varius tellus, mattis tempus lorem justo et neque."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
-
- <hy-banner
- text-title="Check upcoming conferences"
- text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
- url="#this-is-an-accordion-item-2--title"
- url-title="Show list of conferences"
- sc-label="List of conferences"
- >
- </hy-banner>
- <section>
- <a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
- </section>
-
- <hy-banner
- text-title="Check upcoming conferences"
- text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
- url="#this-is-an-accordion-item-2--title"
- url-title="Show list of conferences"
- sc-label="List of conferences"
- >
- </hy-banner>
-
- <hy-accordion-container accordionId="example-accordion">
- <hy-accordion-item accordiontitle="This is an accordion item 1">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is an accordion item 2">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is an accordion item 3">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- </hy-accordion-container>
-
- -->
- <!--
- <hy-main-content-wrapper>
- <hy-heading heading="h2" section="contentsection">
- A process illustrated with steps
- </hy-heading>
- <hy-large-process-flow
- data-items='[
- {"phaseTitle":"First phase title",
- "boxes": [
- {"heading": "Hanc ego cum teneam sententiam",
- "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
- "links":[{"label":"Link to another page", "url": "https://helsinki.fi"}]},
- {"heading": "Hanc ego cum teneam sententiam",
- "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
- "links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
- {"label":"Link to another page", "url": "https://helsinki.fi"}]},
- {"heading": "Hanc ego cum teneam sententiam",
- "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in."},
- {"heading": "Hanc ego cum teneam sententiam",
- "description":"Certe, inquam, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem animadversionem atque in liberos atque insitam in.",
- "links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
- {"label":"Link to another page", "url": "https://helsinki.fi"}]}
- ]
- },
- {"phaseTitle":"Second phase title",
- "boxes": [
- {"heading": "Hanc ego cum teneam sententiam",
- "description":"<pre>\r\n<u>Certe<\/u>, <strong>inquam<\/strong>, pertinax non quo quaerimus, non possim accommodare torquatos nostros? quos tu paulo ante cum teneam sententiam, quid est consecutus? laudem et expedita distinctio nam libero tempore, cum teneam sententiam, quid percipit aut quid et inter mediocrem \r\nanimadversionem atque in liberos atque insitam<\/pre>\r\n\r\n<p> <\/p>\r\n\r\n<h4>atque<\/h4>\r\n",
- "links":[{"label":"Link to another page", "url": "https://helsinki.fi"},
- {"label":"Link to another page", "url": "https://helsinki.fi"}]}
- ]
- }
- ]'
- >
- </hy-large-process-flow>
- </hy-main-content-wrapper>
- --></div>
- </hy-main>
-
- <!--
- {
-"data-items": [
- {"phase-title":"Phase 1",
- "boxes": [
- {"heading": "Ford",
- "description":"blabla",
- "links":[{"label":"asdf", "url": "url"},
- {"label":"asdf2", "url": "url2"}]},
- {"heading": "BMW",
- "description":"blabla",
- "links":[{"label":"asdf", "url": "url"}]},
- {"title": "VW",
- "description":"blabla"}
- ]
- },
- {"phase-title":"Phase 2",
- "boxes": [
- {"heading": "VW",
- "description":"blabla"}
- ]
- }
-]
-}
- -->
- <!--
+ <hy-site-header
+ logo-label="University of Helsinki"
+ logo-url="/"
+ menu-label-close="Close"
+ menu-label-open="Menu"
+ search-button-label="Search"
+ data-site-header-labels='{
+ "menu_labels": {"open":"Open mobile menu","close":"Close mobile menu panel","expand":"Expand submenu"},
+ "search_labels":{"label":"Search","open":"Open search","close":"Close search"},
+ "language_labels":{"open":"Open language list","close":"Close language list"}}'
+ data-menu-language='[
+ {"langCode":"fi","abbr":"fin","label":"Finnish","url":"/fi"},
+ {"langCode":"en","abbr":"eng","label":"English","url":"/en","isActive":"true"},
+ {"langCode":"sv","abbr":"swe","label":"Swedish","url":"/sv"}
+ ]'
+ data-menu-donate='[{"url":"#","label":"Support us"}]'
+ >
+ <hy-menu slot="menu">
+ <hy-menu-level-container menu-level="1">
+ <hy-menu-item menu-link-id="1" url="#" label="News">
+ <hy-menu-level-container menu-level="2">
+ <hy-menu-item menu-link-id="2" url="#" label="News"></hy-menu-item>
+ <hy-menu-item menu-link-id="3" url="#" label="Events"></hy-menu-item>
+ <hy-menu-item menu-link-id="4" url="#" label="Think Corner"></hy-menu-item>
+ <hy-menu-item menu-link-id="5" url="#" label="Unitube"></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ <hy-menu-item menu-link-id="6" url="#" label="Research" in-active-trail="true">
+ <hy-menu-level-container menu-level="2">
+ <hy-menu-item menu-link-id="7" url="#" label="Top research">
+ <hy-menu-level-container menu-level="3">
+ <hy-menu-item menu-link-id="8" url="#" label="Centres of excellence"></hy-menu-item>
+ <hy-menu-item menu-link-id="9" url="#" label="Academy professors"></hy-menu-item>
+ <hy-menu-item menu-link-id="10" url="#" label="ERC researchers and projects"></hy-menu-item>
+ <hy-menu-item menu-link-id="11" url="#" label="Highly cited researchers"></hy-menu-item>
+ <hy-menu-item menu-link-id="12" url="#" label="Strategic research areas"></hy-menu-item>
+ <hy-menu-item menu-link-id="13" url="#" label="Profile-building research areas"></hy-menu-item>
+ <hy-menu-item menu-link-id="14" url="#" label="Research impact"></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ <hy-menu-item menu-link-id="15" url="#" label="Researchers"></hy-menu-item>
+ <hy-menu-item menu-link-id="16" url="#" label="Fields of science"></hy-menu-item>
+ <hy-menu-item menu-link-id="17" url="#" label="Research groups"></hy-menu-item>
+ <hy-menu-item menu-link-id="18" url="#" label="Doctoral education">
+ <hy-menu-level-container menu-level="3">
+ <hy-menu-item menu-link-id="19" url="#" label="Structure of the doctoral degree"></hy-menu-item>
+ <hy-menu-item menu-link-id="20" url="#" label="Research skills"></hy-menu-item>
+ <hy-menu-item menu-link-id="21" url="#" label="Doctoral dissertation"></hy-menu-item>
+ <hy-menu-item
+ menu-link-id="22"
+ url="#"
+ label="Public examination of the doctoral dissertation"
+ ></hy-menu-item>
+ <hy-menu-item menu-link-id="23" url="#" label="The research career"></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ <hy-menu-item menu-link-id="24" url="#" label="Research institutes"></hy-menu-item>
+ <hy-menu-item menu-link-id="25" url="#" label="Research stations"></hy-menu-item>
+ <hy-menu-item
+ menu-link-id="26"
+ url="#"
+ label="Services for researchers and research policy"
+ in-active-trail="true"
+ >
+ <hy-menu-level-container menu-level="3">
+ <hy-menu-item menu-link-id="27" url="#" label="Research infrastructures">
+ <hy-menu-level-container menu-level="4">
+ <hy-menu-item
+ menu-link-id="28"
+ url="#"
+ label="Research infrastructure development programme"
+ ></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ <hy-menu-item menu-link-id="29" url="#" label="Research funding"></hy-menu-item>
+ <hy-menu-item menu-link-id="30" url="#" label="Data management"></hy-menu-item>
+ <hy-menu-item menu-link-id="31" url="#" label="Research ethics" in-active-trail="true">
+ <hy-menu-level-container menu-level="4">
+ <hy-menu-item
+ menu-link-id="32"
+ url="#"
+ label="Ethical Review Board in the Humanities and Social and Behavioral Sciences"
+ ></hy-menu-item>
+ <hy-menu-item
+ menu-link-id="33"
+ url="#"
+ label="Viikki Campus Research Ethics Committee"
+ in-active-trail="true"
+ is-active="true"
+ ></hy-menu-item>
+ <hy-menu-item
+ menu-link-id="34"
+ url="#"
+ label="Research ethics committee of the Faculty of Medicine"
+ ></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ <hy-menu-item menu-link-id="35" url="#" label="Open science">
+ <hy-menu-level-container menu-level="4">
+ <hy-menu-item
+ menu-link-id="36"
+ url="#"
+ label="Open science services for researchers"
+ ></hy-menu-item>
+ <hy-menu-item menu-link-id="37" url="#" label="Principles of open publishing"></hy-menu-item>
+ <hy-menu-item menu-link-id="38" url="#" label="Data policy"></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ <hy-menu-item menu-link-id="39" url="#" label="Commercialisation of research">
+ <hy-menu-level-container menu-level="4">
+ <hy-menu-item menu-link-id="40" url="#" label="Disclose an innovation"></hy-menu-item>
+ <hy-menu-item menu-link-id="41" url="#" label="Invention rights and protection"></hy-menu-item>
+ <hy-menu-item
+ menu-link-id="42"
+ url="#"
+ label="Stages of the commercialisation process"
+ ></hy-menu-item>
+ <hy-menu-item
+ menu-link-id="43"
+ url="#"
+ label="How to fund commercialisation of research"
+ ></hy-menu-item>
+ <hy-menu-item menu-link-id="44" url="#" label="Why commercialise?"></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ <hy-menu-item menu-link-id="45" url="#" label="Admissions"></hy-menu-item>
+ <hy-menu-item menu-link-id="46" url="#" label="Cooperation"></hy-menu-item>
+ <hy-menu-item menu-link-id="47" url="#" label="About us"></hy-menu-item>
+ <hy-menu-item menu-link-id="48" menu-item-alternative="true" url="#" label="Faculties and units">
+ <hy-menu-level-container menu-level="2">
+ <hy-menu-item menu-link-id="49" url="#" label="Faculty of Agriculture and Forestry"></hy-menu-item>
+ <hy-menu-item menu-link-id="50" url="#" label="Faculty of Arts"></hy-menu-item>
+ <hy-menu-item
+ menu-link-id="51"
+ url="#"
+ label="Faculty of Biological and Environmental Sciences"
+ ></hy-menu-item>
+ <hy-menu-item menu-link-id="52" url="#" label="Faculty of Educational Sciences"></hy-menu-item>
+ <hy-menu-item menu-link-id="53" url="#" label="Faculty of Law"></hy-menu-item>
+ <hy-menu-item menu-link-id="54" url="#" label="Faculty of Medicine"></hy-menu-item>
+ <hy-menu-item menu-link-id="55" url="#" label="Faculty of Pharmacy"></hy-menu-item>
+ <hy-menu-item menu-link-id="56" url="#" label="Faculty of Science"></hy-menu-item>
+ <hy-menu-item menu-link-id="57" url="#" label="Faculty of Social Sciences"></hy-menu-item>
+ <hy-menu-item menu-link-id="58" url="#" label="Faculty of Theology"></hy-menu-item>
+ <hy-menu-item menu-link-id="59" url="#" label="Faculty of Veterinary Medicine"></hy-menu-item>
+ <hy-menu-item menu-link-id="50" url="#" label="Swedish School of Social Science"></hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu-item>
+ </hy-menu-level-container>
+ </hy-menu>
+ </hy-site-header>
<hy-main has-sidebar="true">
<div class="layout-content"></div>
+
<aside class="layout-sidebar-first" role="complementary">
<hy-menu
slot="menu"
@@ -390,58 +428,6 @@
>
</hy-banner>
- <hy-introduction
- text-title="This is an introduction"
- text-description="Highly cited researchers at the University of Helsinki, Centres of Excellence selected by the Academy of Finland and projects funded by the European Research Council."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- ></hy-introduction>
-
- <hy-introduction
- text-title="This is an introduction"
- text-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque pretium leo quis efficitur. Praesent lorem sapien, pharetra ac suscipit non, bibendum sed nisi. Suspendisse semper felis quam, ut congue dui interdum at. Phasellus et porta libero, nec lobortis odio. Mauris ut elementum risus. Ut sed consectetur tellus. Duis pellentesque, ante in tempus pellentesque, elit nisi volutpat erat, in semper leo metus nec purus. Mauris eu finibus diam. Vestibulum eget ex et magna euismod porttitor. Pellentesque non tellus ornare, volutpat metus sit amet, ornare est. Morbi et ornare ipsum. Pellentesque condimentum magna est, vel luctus velit iaculis quis. Ut eu mi non augue dictum porta. Aliquam erat volutpat. Praesent volutpat, turpis nec mattis condimentum, mi lectus varius tellus, mattis tempus lorem justo et neque."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
-
- <hy-introduction
- reversed
- text-title="This is an introduction"
- text-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque pretium leo quis efficitur. Praesent lorem sapien, pharetra ac suscipit non, bibendum sed nisi. Suspendisse semper felis quam, ut congue dui interdum at. Phasellus et porta libero, nec lobortis odio. Mauris ut elementum risus. Ut sed consectetur tellus. Duis pellentesque, ante in tempus pellentesque, elit nisi volutpat erat, in semper leo metus nec purus. Mauris eu finibus diam. Vestibulum eget ex et magna euismod porttitor. Pellentesque non tellus ornare, volutpat metus sit amet, ornare est. Morbi et ornare ipsum. Pellentesque condimentum magna est, vel luctus velit iaculis quis. Ut eu mi non augue dictum porta. Aliquam erat volutpat. Praesent volutpat, turpis nec mattis condimentum, mi lectus varius tellus, mattis tempus lorem justo et neque."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
-
- <hy-introduction
- variant="blue"
- text-title="This is an introduction"
- text-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pellentesque pretium leo quis efficitur. Praesent lorem sapien, pharetra ac suscipit non, bibendum sed nisi. Suspendisse semper felis quam, ut congue dui interdum at. Phasellus et porta libero, nec lobortis odio. Mauris ut elementum risus. Ut sed consectetur tellus. Duis pellentesque, ante in tempus pellentesque, elit nisi volutpat erat, in semper leo metus nec purus. Mauris eu finibus diam. Vestibulum eget ex et magna euismod porttitor. Pellentesque non tellus ornare, volutpat metus sit amet, ornare est. Morbi et ornare ipsum. Pellentesque condimentum magna est, vel luctus velit iaculis quis. Ut eu mi non augue dictum porta. Aliquam erat volutpat. Praesent volutpat, turpis nec mattis condimentum, mi lectus varius tellus, mattis tempus lorem justo et neque."
- url="https://www.google.com"
- url-title="Check this link"
- sc-label="label for link"
- image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
- ></hy-introduction>
- <section>
- <a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
- </section>
-
- <hy-banner
- text-title="Check upcoming conferences"
- text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
- url="#this-is-an-accordion-item-2--title"
- url-title="Show list of conferences"
- sc-label="List of conferences"
- >
- </hy-banner>
- <section>
- <a href="#this-is-an-accordion-item-2--title">Click here to go to Accordion Item 2</a>
- </section>
-
<hy-banner
text-title="Check upcoming conferences"
text-description="Take advantage of our curated list of high profile conferences near Helsinki and in the Nordics."
@@ -451,41 +437,9 @@
>
</hy-banner>
- <hy-accordion-container accordionId="example-accordion">
- <hy-accordion-item accordiontitle="This is an accordion item 1">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is an accordion item 2">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- <hy-accordion-item accordiontitle="This is an accordion item 3">
- <hy-paragraph-text>Accordion content</hy-paragraph-text>
- </hy-accordion-item>
- </hy-accordion-container>
<hy-baseline>
<hy-heading heading="h2" section="subsection">H2 With divider</hy-heading>
</hy-baseline>
- <hy-two-columns reversed>
- <div slot="main">
- THIS IS MAIN!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit neque nec dolor
- porttitor lacinia. Mauris porta mi eget nibh rutrum gravida eu id nisl. Ut eget semper augue, sit amet
- rutrum enim. Nullam finibus iaculis magna, nec vulputate tellus accumsan non. Ut iaculis neque pulvinar,
- blandit lacus id, mollis justo. Praesent non mi ipsum. Ut consequat nibh a urna venenatis lobortis. Donec
- tempor erat non nisl bibendum, aliquet blandit dui lobortis. Maecenas elit tellus, porta ac commodo ac,
- porttitor eget mauris. Pellentesque tempus vulputate egestas.
- </div>
- <div slot="side">
- THIS IS SIDE!!! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut blandit neque nec dolor
- porttitor lacinia. Mauris porta mi eget nibh rutrum gravida eu id nisl.
- </div>
- </hy-two-columns>
-
- <hy-key-figure-group
- data-items='[{"heading":"3500 h","description":"Opetusta annettiin Helsingin yliopistossa vuonna 2019"},
- {"heading":"87%","description":"Hakijoista valitsi Helsingin yliopiston ensisijaiseksi vaihtoehdoksi."},
- {"heading":"4/5","description":"Key Highlight description text updated"}]'
- >
- </hy-key-figure-group>
<a id="facebook_ads_example">This is the Facebook ad example I want to link to.</a>
</div>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 20966b54..c112c3da 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -118,6 +118,7 @@ export enum MenuType {
desktop = 'desktop',
sidenav = 'sidenav',
mobile = 'mobile',
+ tablet = 'tabled',
default = 'desktop',
}
--
GitLab