diff --git a/src/components.d.ts b/src/components.d.ts
index 61b2d9fb39f94d71d5738f5efa0ecfbc228ce563..4b9ad4b5725494ba56f801dbfa28a73ce73ab281 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 5d5098f1015692eabee06da8b1c1d5599fe22425..830797c20274cee0056b1729bfedf6a1cca8deb9 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 7d3c7e659dd343bdd86ef8895c77a4e57d69ad2c..17763127c5e51733e3630322ac415fcb2f34d926 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 5fd477f1f7f54aa2debc8965212b08dc09690e3a..4656338280035fd0215a51dac0121a2ed42c73ee 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 27e10b17344ec3cceeeec8559ff0a3ceb27dcb4f..52c6fd7f5b837ff007e477da3b36d04b050b1300 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 40a1578bb74e95074fecddcb671ef94e7f46b8e8..b7459214188111781ecd5652343c747d7267de57 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 ab14f50ce44b5de55b216a3db31200c9714fc16a..723ff6434f76c8d4725ea639948121489c9ee19f 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 a2b7a50d11fbee4b0a81fc36d9cac12bacdab689..0138078e25c99efae0ac807ba038eaa6efd6c574 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 68fddaf4d86306215c3e9a65fbec0d7eef2724b9..841305ec950f521d311c1c2a2f13eabb192cac0c 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 9a3781b755fb717f5452db3650b2364c85f59393..7c3ceb9ebe9dfe0a514947b5d084649019d92010 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 ff95e189027329541978a329a21baf2c42fd2607..e1f222937180515e8c485e4c06cf177f94778258 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 b2b4384ff4ae931964ad25232e1e66bccce3d40a..53542c52aaf83f04708bf97e1cbe531eae1935cd 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 8d21eee14b580d0dc11cc586b713d4e4b2899206..bac069b098ea532d2170f8180a54c5f241cc92dd 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 435be271a4af8f29fe263fe255bb7e5f8f68fb92..90f924f229009eee5290043a0f1021bd89fc20ca 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 5f4a86b4cee01156bef7bf0b8b82f776ba9603ea..4190ab9ae8610307cc5a874ea978223eaf1ecf30 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 1548b54b62c03f1eee793e9c1fe3a3d0ae6ca7d3..14ed05b7e96c20331d6a12eaf024edd5469835fd 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 a3b571872bf884839fa3d77915a2241a914d34b1..b02ad2a9fb8060d31ff65cb11e355c45b5632ccd 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 20966b54199159e16ce6cda1e755b87d46b5e944..c112c3da6cf3a2368813628e3f1b34bde3d93712 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',
}