diff --git a/src/components.d.ts b/src/components.d.ts
index ba226ddfca5158ab761e8fdf963478063a049924..e42969d12a7c361e4099ddf8770109e29bf900bb 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2017,6 +2017,7 @@ declare namespace LocalJSX {
logoLabelGroup?: string;
logoSizeGroup?: any;
logoUrlGroup?: string;
+ onUniversityMainMenuToggled?: (event: CustomEvent<any>) => void;
siteLabel?: string;
siteUrl?: string;
}
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index 2624eceae572d62e3d1a62726a1e39e8f9933e6a..5fbcb1d68c5b66d82f875e6aa0a4b4f50ea7b7d5 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -28,27 +28,62 @@
letter-spacing: -0.44px;
margin: 0 -4px;
padding: 0;
+ position: relative;
&:focus {
+ outline: none;
}
&:hover {
+ cursor: pointer;
+ span {
+ color: var(--grayscale-medium);
+ }
+ svg {
+ fill: var(--grayscale-medium);
+ }
}
- svg {
- @include breakpoint($wide) {
- height: 15.27px;
- width: 3px;
- }
- @include breakpoint($extrawide) {
- height: 14px;
- width: 3px;
+ .toggle__caret {
+ svg {
+ @include breakpoint($wide) {
+ height: 15.27px;
+ width: 3px;
+ }
+ @include breakpoint($extrawide) {
+ height: 14px;
+ width: 3px;
+ }
}
}
+
span {
@include breakpoint($wide) {
margin-left: 17px;
}
}
+
+ &.is-open {
+ &:after {
+ border-bottom: 3px solid white;
+ bottom: -10px;
+ content: ' ';
+ position: absolute;
+ width: 100%;
+ }
+
+ .toggle__close {
+ @include breakpoint($wide) {
+ height: 12px;
+ width: 12px;
+ }
+ }
+
+ span {
+ @include breakpoint($wide) {
+ margin-left: 10px;
+ }
+ }
+ }
}
.menu--main-group__dropdown {
@@ -68,7 +103,7 @@
top: 0;
visibility: visible;
width: 100%;
- z-index: 100;
+ z-index: 511;
.list {
display: flex;
@@ -76,6 +111,43 @@
justify-items: center;
position: relative;
}
+
+ .panel-toggle {
+ background-color: transparent;
+ border: none;
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ @include breakpoint($wide) {
+ padding: 26px 32px;
+ }
+
+ &__label {
+ @include font-size(16px, 20px);
+ @include font-weight($bold);
+ color: var(--grayscale-white);
+ display: flex;
+ font-family: var(--main-font-family);
+ letter-spacing: -0.5px;
+ text-transform: uppercase;
+
+ &__title {
+ padding-right: 12px;
+ }
+
+ &:hover {
+ cursor: pointer;
+ span {
+ color: var(--grayscale-medium);
+ }
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
+ }
+ }
+
.menu-main-link {
@include font-size(16px, 20px);
align-items: center;
@@ -83,6 +155,15 @@
flex-direction: row;
margin-bottom: 20px;
text-decoration: none;
+
+ &:hover {
+ span {
+ color: var(--grayscale-medium);
+ }
+ svg {
+ fill: var(--grayscale-medium);
+ }
+ }
}
.menu--main-group__label {
color: var(--grayscale-white);
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 22f8a35848d788f66ea72d0a71dc894188377d5b..66f1dd2416e9afdca420ca48cdff2689f9980e3e 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -4,10 +4,14 @@ export interface MainMenu {
menuLinkId: string;
}
-import {Component, Host, h, Element, Prop, State, Watch, Listen} from '@stencil/core';
+import {Component, Host, h, Element, Prop, State, Watch, Listen, Event, EventEmitter} from '@stencil/core';
import {ColorVariant, SiteLogoSize} from '../../../utils/utils';
import {DonateLink} from '../../site-header/site-header';
+let keys = {
+ enter: 'Enter',
+};
+
@Component({
tag: 'hy-menu-main-group',
styleUrl: 'hy-menu-main-group.scss',
@@ -25,6 +29,8 @@ export class HyMenuMainGroup {
@State() isMenuOpen: boolean = false;
private donateLink: DonateLink[];
+ @Event() universityMainMenuToggled: EventEmitter;
+
private _dataMainMenu: MainMenu[];
@Watch('dataMainMenu')
@@ -37,31 +43,88 @@ export class HyMenuMainGroup {
this.isMenuOpen = !this.isMenuOpen;
if (this.isMenuOpen) {
- let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
-
- if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
- console.log('do mobile stuff');
- } else {
- let mainMenuToggle = event.target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
- let mainMenuDropdown = event.target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
- let mainMenuList = event.target.shadowRoot.querySelector('.list') as HTMLElement;
- if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
- let rectHeader = hyTopHeader.getBoundingClientRect();
- let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
- mainMenuDropdown.style.top = `${rectHeader.height}px`;
-
- mainMenuList.style.left = `${rectMenuToggle.left}px`;
- }
- }
+ this.emitEvent();
+ this.adjustMainMenuPosition(event.target);
}
event.stopPropagation();
}
+ @Listen('keydown')
+ handleComponentKeyDown(event: KeyboardEvent) {
+ const key = event.code;
+ let target = event.target as HTMLButtonElement;
+
+ if (target && [keys.enter].includes(key)) {
+ this.isMenuOpen = !this.isMenuOpen;
+
+ if (this.isMenuOpen) {
+ this.emitEvent();
+ this.adjustMainMenuPosition(target);
+
+ event.preventDefault();
+ }
+ }
+ }
+
+ emitEvent() {
+ // Close other panels if they are open (lang menu, search, main menu, ..).
+ this.universityMainMenuToggled.emit();
+ }
+
+ adjustMainMenuPosition(target) {
+ let hyTopHeader = this.el.closest('.hy-site-header__content-top') as HTMLElement;
+
+ if (hyTopHeader && hyTopHeader.hasAttribute('is-mobile')) {
+ console.log('do mobile stuff');
+ } else {
+ let mainMenuToggle = target.shadowRoot.querySelector('.menu--main-group__toggle') as HTMLElement;
+ let mainMenuDropdown = target.shadowRoot.querySelector('.menu--main-group__dropdown') as HTMLElement;
+ let mainMenuList = target.shadowRoot.querySelector('.list') as HTMLElement;
+ if (mainMenuDropdown && mainMenuList && mainMenuToggle) {
+ let rectHeader = hyTopHeader.getBoundingClientRect();
+ let rectMenuToggle = mainMenuToggle.getBoundingClientRect();
+ mainMenuDropdown.style.top = `${rectHeader.height}px`;
+
+ mainMenuList.style.left = `${rectMenuToggle.left}px`;
+ }
+ }
+ }
+
componentWillRender() {
this.dataMainMenuWatcher(this.dataMainMenu);
}
+ handleMainMenuClose(event) {
+ this.isMenuOpen = false;
+ event.stopPropagation();
+ }
+
+ // Close the University main menu if user clicks anywhere outside the component.
+ @Listen('click', {target: 'window'})
+ handleOutsideMenuClick(event) {
+ this.isMenuOpen = false;
+ event.stopPropagation();
+ }
+
+ // CLose the University main menu if user opens the desktop menu panel.
+ @Listen('menuDesktopToggled', {target: 'document'})
+ desktopMenuToggled() {
+ this.isMenuOpen = false;
+ }
+
+ // CLose the University main menu if user opens the search panel
+ @Listen('searchPanelToggled', {target: 'document'})
+ searchPanelToggled() {
+ this.isMenuOpen = false;
+ }
+
+ // CLose the University main menu if user opens the language menu panel.
+ @Listen('menuLanguageToggled', {target: 'document'})
+ languageMenuToggled() {
+ this.isMenuOpen = false;
+ }
+
render() {
const white = 'var(--grayscale-white)';
const logoSizeGroup = this.isMobile ? SiteLogoSize.small : SiteLogoSize.small;
@@ -140,12 +203,11 @@ export class HyMenuMainGroup {
}}
//aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
>
- <hy-icon
- class={'menu--main-group__toggle__caret'}
- icon={'hy-icon-slim-hamburger-menu'}
- size={8}
- fill={white}
- />
+ {this.isMenuOpen ? (
+ <hy-icon class={'toggle__close'} icon={'hy-icon-remove'} size={8} fill={white} />
+ ) : (
+ <hy-icon class={'toggle__caret'} icon={'hy-icon-slim-hamburger-menu'} size={8} fill={white} />
+ )}
<span>University main menu</span>
</button>
<div
@@ -166,6 +228,18 @@ export class HyMenuMainGroup {
);
})}
</div>
+ <button
+ onClick={(e) => this.handleMainMenuClose(e)}
+ class={{
+ 'panel-toggle': true,
+ }}
+ aria-label="Close menu"
+ >
+ <span class="panel-toggle__label">
+ <span class="panel-toggle__label__title">Close</span>
+ <hy-icon icon={'hy-icon-remove'} size={20} fill={ColorVariant.white} />
+ </span>
+ </button>
</div>
</Host>
);
diff --git a/src/components/navigation/hy-menu-main-group/readme.md b/src/components/navigation/hy-menu-main-group/readme.md
index 6a5e71e743246734fa8f47a6b67ff8af2eff1d6b..dd21c99c3c616ba06e29a09dc2ee3519f0dab473 100644
--- a/src/components/navigation/hy-menu-main-group/readme.md
+++ b/src/components/navigation/hy-menu-main-group/readme.md
@@ -14,6 +14,12 @@
| `siteLabel` | `site-label` | | `string` | `undefined` |
| `siteUrl` | `site-url` | | `string` | `undefined` |
+## Events
+
+| Event | Description | Type |
+| --------------------------- | ----------- | ------------------ |
+| `universityMainMenuToggled` | | `CustomEvent<any>` |
+
## Dependencies
### Used by
diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index 2d5db36dff25d659425653bc244cba15b789182a..1ef48a5e47e842c6028a26631b6609b3a2be068c 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -35,36 +35,35 @@
}
.menu--language__toggle {
- @include font-size(14px, 24px);
align-items: center;
- background: var(--grayscale-white);
border: 0 none;
- color: var(--brand-main-nearly-black);
display: flex;
flex-flow: row;
font-family: var(--main-font-family);
- font-weight: 600;
- letter-spacing: -0.4px;
margin: 0 -4px;
padding: 0;
text-transform: uppercase;
- @include breakpoint($extrawide) {
- @include font-size(12px, 12px);
- font-weight: 400;
- letter-spacing: -0.6px;
+ &:focus {
+ outline: solid 2px var(--additional-yellow);
+ outline-offset: 2px;
}
- @include breakpoint($xlarge) {
- @include font-size(14px, 24px);
- letter-spacing: -0.5px;
+ &.is-open {
+ .menu--language__toggle__caret {
+ transform: rotate(180deg);
+ }
}
- &:focus {
- outline: solid 2px var(--additional-yellow);
- outline-offset: 2px;
+ > * {
+ padding: 0 4px;
}
+ span {
+ padding: 0;
+ }
+}
+.menu--language__toggle:not(.group) {
&:hover {
color: var(--brand-main);
cursor: pointer;
@@ -76,35 +75,43 @@
}
}
- &.is-group {
- background: var(--grayscale-black);
- border: 0 none;
- color: var(--grayscale-white);
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ background: var(--grayscale-white);
+ color: var(--brand-main-nearly-black);
+ letter-spacing: -0.4px;
+
+ @include breakpoint($extrawide) {
+ @include font-size(12px, 12px);
+ @include font-weight($regular);
+ letter-spacing: -0.6px;
+ }
+
+ @include breakpoint($xlarge) {
+ @include font-size(14px, 24px);
+ letter-spacing: -0.5px;
+ }
+}
- &:hover {
+.menu--language__toggle.group {
+ &:hover {
+ color: var(--grayscale-medium);
+ cursor: pointer;
+ span {
color: var(--grayscale-medium);
- cursor: pointer;
- span {
- color: var(--grayscale-medium);
- }
- svg {
- fill: var(--grayscale-medium);
- }
}
- }
-
- &.is-open {
- .menu--language__toggle__caret {
- transform: rotate(180deg);
+ svg {
+ fill: var(--grayscale-medium);
}
}
- > * {
- padding: 0 4px;
- }
- span {
- padding: 0;
- }
+ background: var(--grayscale-black);
+ //border: 0 none;
+ color: var(--grayscale-white);
+
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ letter-spacing: -0.5px;
}
.menu--language__dropdown {
@@ -143,7 +150,7 @@
}
}
-.menu--language__globe-icon svg {
+.menu--language__globe-icon:not(.group) svg {
@include breakpoint($wide) {
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 1acc32546143f410f8c6e0c5d4aa0cff9aa0aaf9..8223824f875c5537aefd7161ee837c29475d253b 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -56,6 +56,12 @@ export class MenuLanguage {
this.isMenuOpen = false;
}
+ // Close the language menu if user opens University main menu
+ @Listen('universityMainMenuToggled', {target: 'document'})
+ universityMainMenuPanelToggled() {
+ this.isMenuOpen = false;
+ }
+
@Listen('focus')
handleComponentFocus(event) {
// Close desktop menu panel if it's open.
@@ -67,24 +73,35 @@ export class MenuLanguage {
@Listen('click')
handleComponentClick(event) {
this.isMenuOpen = !this.isMenuOpen;
- const languageMenuSelector = event.target as HTMLElement;
if (this.isMenuOpen) {
// Close desktop menu panel if it's open.
this.menuLanguageToggled.emit();
- let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+ const languageMenuSelector = event.target as HTMLElement;
+ this.adjustPosition(languageMenuSelector, this.el);
+ }
+
+ event.stopPropagation();
+ }
+
+ adjustPosition(languageMenuSelector, target) {
+ const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
+ `.menu--language__dropdown`
+ )[0] as HTMLElement;
+ let headerHeight = '0';
+ let hyHeader = this.isGroup
+ ? (target.closest('.hy-site-header__content-top') as HTMLElement)
+ : (target.closest('.hy-site-header') as HTMLElement);
+
+ if (hyHeader) {
let rectHeader = hyHeader.getBoundingClientRect();
let rectLangMenu = languageMenuSelector.getBoundingClientRect();
- const headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;
- const languagePanel = languageMenuSelector.shadowRoot.querySelectorAll(
- `.menu--language__dropdown`
- )[0] as HTMLElement;
- languagePanel.style.top = headerHeight;
+ headerHeight = `${languageMenuSelector.offsetHeight + rectHeader.bottom + 8 - rectLangMenu.bottom}px`;
}
- event.stopPropagation();
+ languagePanel.style.top = headerHeight;
}
componentWillRender() {
@@ -96,6 +113,7 @@ export class MenuLanguage {
const black = 'var(--brand-main-nearly-black)';
const white = 'var(--grayscale-white)';
const svgColor = this.isGroup ? white : black;
+ const globeIconSize = this.isGroup ? 16 : 14;
return this.isMobile ? (
<Host class={'menu--language'}>
@@ -124,12 +142,17 @@ export class MenuLanguage {
class={{
'menu--language__toggle': true,
'is-open': this.isMenuOpen,
- 'is-group': this.isGroup,
+ group: this.isGroup,
}}
aria-label={this.isMenuOpen ? this._labels['close'] : this._labels['open']}
>
- <hy-icon class={'menu--language__globe-icon'} icon={'hy-icon-globe'} size={14} fill={svgColor} />
- <span>
+ <hy-icon
+ class={{'menu--language__globe-icon': true, group: this.isGroup}}
+ icon={'hy-icon-globe'}
+ size={globeIconSize}
+ fill={svgColor}
+ />
+ <span class={{group: this.isGroup}}>
{this._dataMenuLanguage.map((item) => {
if (item.isActive) {
return item.langCode;
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 405849de63b0784311cfeba394e6f4e386e50d99..1d41aa0bbc54de7dbb2f7a019a7654d8635468f5 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -271,6 +271,13 @@ export class HyDesktopMenuLinks {
this.closePanel(fadeOut);
}
+ // Close the desktop menu panel if user opens University main menu
+ @Listen('universityMainMenuToggled', {target: 'document'})
+ universityMainMenuPanelToggled() {
+ let fadeOut = true;
+ this.closePanel(fadeOut);
+ }
+
// Close the desktop menu panel if user opens search panel
@Listen('searchPanelToggled', {target: 'document'})
searchPanelToggled() {
diff --git a/src/components/site-header/site-header.scss b/src/components/site-header/site-header.scss
index b19990f751fa2d7cc2af63bd934e6b1f7bc1e2a6..a47d29312237e6c51cef9050500d07531169986b 100644
--- a/src/components/site-header/site-header.scss
+++ b/src/components/site-header/site-header.scss
@@ -74,6 +74,7 @@
flex-flow: row;
place-content: center space-between;
position: relative;
+ z-index: 100;
@include breakpoint($narrow) {
margin: 0 auto;
@@ -309,6 +310,8 @@
}
.hy-link__donate {
+ font-family: var(--main-font-family);
+
@include breakpoint($wide) {
padding: 0;
text-decoration: none;
@@ -324,19 +327,39 @@
}
&__label {
+ font-family: var(--main-font-family);
+ margin-left: 4px;
+ text-decoration: none;
+ }
+}
+
+.hy-link__donate:not(.group) {
+ svg {
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 13.64px;
+ }
+ @include breakpoint($extrawide) {
+ height: 12px;
+ width: 10.23px;
+ }
+ @include breakpoint($xlarge) {
+ height: 16px;
+ width: 13.64px;
+ }
+ }
+
+ .hy-link__donate__label {
@include breakpoint($wide) {
@include font-size(14px, 24px);
+ @include font-weight($semibold);
color: var(--brand-main-nearly-black);
- font-family: var(--main-font-family);
- font-weight: 600;
letter-spacing: -0.5px;
- margin-left: 4px;
- text-decoration: none;
}
@include breakpoint($extrawide) {
@include font-size(12px, 12px);
- font-weight: 400;
+ @include font-weight($regular);
letter-spacing: -0.6px;
}
@@ -344,36 +367,26 @@
@include font-size(14px, 24px);
letter-spacing: -0.5px;
}
-
- &.group {
- color: var(--grayscale-white);
- }
}
+}
- svg {
+.hy-link__donate.group {
+ .hy-link__donate__label {
@include breakpoint($wide) {
- height: 16px;
- width: 13.64px;
- }
- @include breakpoint($extrawide) {
- height: 12px;
- width: 10.23px;
- }
- @include breakpoint($xlarge) {
- height: 16px;
- width: 13.64px;
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ color: var(--grayscale-white);
+ letter-spacing: -0.5px;
}
}
- &.group {
- &:hover {
+ &:hover {
+ color: var(--grayscale-medium);
+ span {
color: var(--grayscale-medium);
- span {
- color: var(--grayscale-medium);
- }
- svg {
- fill: var(--grayscale-medium);
- }
+ }
+ svg {
+ fill: var(--grayscale-medium);
}
}
}
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index a4bf9ff3473b58043d02cb78508f9c1475aaf776..cf04fdf4b43d79fb7b07ea3867f4c820d6c68170 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -230,7 +230,7 @@ export class SiteHeader {
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
<div class="hy-site-header__content-top">
- <div class={'hy-site-header__logo-container group '}>
+ <div class={'hy-site-header__logo-container group '} role="navigation">
<hy-site-logo
is-group={true}
size={logoSizeGroup}
@@ -238,7 +238,7 @@ export class SiteHeader {
url={this.siteUrl}
label={this.siteLabel}
/>
- <hy-menu-main-group is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
+ <hy-menu-main-group tabindex="0" is-mobile={false} data-main-menu={this.dataMainMenuLinks} />
</div>
<div class={'menu--secondary menu--secondary--group'}>
@@ -251,7 +251,7 @@ export class SiteHeader {
/>
<hy-site-search
class={'menu--secondary__item group'}
- size={14}
+ size={16}
color={logoColorGroup}
is-group={true}
show-label={true}
@@ -262,7 +262,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+ <hy-icon icon={'hy-icon-heart-support'} size={16} fill={logoColorGroup} />
<span class={'hy-link__donate__label group'}>{i.label}</span>
</a>
);
@@ -320,7 +320,7 @@ export class SiteHeader {
<div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
{this.isGroup && (
<div class="hy-site-header__content-top">
- <div class={'hy-site-header__logo-container group '}>
+ <div class={'hy-site-header__logo-container group '} role="navigation">
<hy-site-logo
is-group={true}
size={logoSizeGroup}
@@ -341,7 +341,7 @@ export class SiteHeader {
/>
<hy-site-search
class={'menu--secondary__item group'}
- size={14}
+ size={16}
color={logoColorGroup}
show-label={true}
is-group={true}
@@ -352,7 +352,7 @@ export class SiteHeader {
{this.donateLink.map((i) => {
return (
<a class={'menu--secondary__item hy-link__donate group'} href={i.url}>
- <hy-icon icon={'hy-icon-heart-support'} size={14} fill={logoColorGroup} />
+ <hy-icon icon={'hy-icon-heart-support'} size={16} fill={logoColorGroup} />
<span class={'hy-link__donate__label group'}>{i.label}</span>
</a>
);
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index 8487920123a1eb5fc6871785d93d6c0b3f394af1..177a4028728de21aec8676b2169d67ffee18d7f5 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -5,6 +5,7 @@
display: flex;
padding: 12px;
flex-direction: row;
+ font-family: var(--main-font-family);
@include breakpoint($narrow) {
padding: 15px 5px;
@@ -28,13 +29,48 @@
}
&__label {
+ font-family: var(--main-font-family);
+ margin-left: 4px;
+ }
+}
+
+.button--search:not(.group) {
+ &:hover {
+ color: var(--brand-main);
+ cursor: pointer;
+
+ span {
+ color: var(--brand-main);
+ }
+ svg {
+ fill: var(--brand-main);
+ }
+ }
+
+ svg {
+ height: 20px;
+ width: 20px;
+
+ @include breakpoint($wide) {
+ height: 16px;
+ width: 16px;
+ }
+ @include breakpoint($extrawide) {
+ height: 12px;
+ width: 12px;
+ }
+ @include breakpoint($xlarge) {
+ height: 16px;
+ width: 16px;
+ }
+ }
+
+ .button--search__label {
@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;
visibility: hidden;
@include breakpoint($narrow) {
@@ -45,8 +81,8 @@
@include breakpoint($wide) {
@include font-size(14px, 24px);
+ @include font-weight($semibold);
display: block;
- font-weight: 600;
letter-spacing: -0.5px;
text-transform: none;
visibility: visible;
@@ -54,7 +90,7 @@
@include breakpoint($extrawide) {
@include font-size(12px, 12px);
- font-weight: 400;
+ @include font-weight($regular);
letter-spacing: -0.6px;
}
@@ -62,52 +98,30 @@
@include font-size(14px, 24px);
letter-spacing: -0.5px;
}
-
- &__group {
- color: var(--grayscale-white);
- }
- }
-
- svg {
- height: 20px;
- width: 20px;
-
- @include breakpoint($wide) {
- height: 16px;
- width: 16px;
- }
- @include breakpoint($extrawide) {
- height: 12px;
- width: 12px;
- }
- @include breakpoint($xlarge) {
- height: 16px;
- width: 16px;
- }
}
+}
+.button--search.group {
&:hover {
- color: var(--brand-main);
+ color: var(--grayscale-medium);
cursor: pointer;
span {
- color: var(--brand-main);
+ color: var(--grayscale-medium);
}
+
svg {
- fill: var(--brand-main);
+ fill: var(--grayscale-medium);
}
}
- &--group {
- &:hover {
- color: var(--grayscale-medium);
- span {
- color: var(--grayscale-medium);
- }
+ .button--search__label {
+ color: var(--grayscale-white);
- svg {
- fill: var(--grayscale-medium);
- }
+ @include breakpoint($wide) {
+ @include font-size(14px, 24px);
+ @include font-weight($semibold);
+ letter-spacing: -0.5px;
}
}
}
diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx
index a4df30221a16a4b5e2fa82985ff25ac92a36e27c..05a1f295cda39e66b5e9f8a83aa33034f12f19bf 100644
--- a/src/components/site-header/site-search/site-search.tsx
+++ b/src/components/site-header/site-search/site-search.tsx
@@ -93,6 +93,12 @@ export class SiteSearch {
this.closeSearchPanel();
}
+ // Close the search panel if user opens University main menu
+ @Listen('universityMainMenuToggled', {target: 'document'})
+ universityMainMenuPanelToggled() {
+ this.closeSearchPanel();
+ }
+
// CLose the search panel on Scroll down.
@Listen('headerScrollDown', {target: 'document'})
headerScrollDown() {
@@ -122,12 +128,7 @@ export class SiteSearch {
// Close desktop menu panel and lang menu panel if they are open.
this.searchPanelToggled.emit();
- let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
- const headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active')
- ? `${hyHeader.offsetHeight}px`
- : `${hyHeader.offsetTop + hyHeader.offsetHeight}px`;
- const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
- searchPanel.style.top = headerHeight;
+ this.adjustPosition(this.el);
// Remove hidden class from cludo suggestions
let cludoSayt = document.querySelectorAll('stencil-cludo-sayt')[0] as HTMLElement;
@@ -135,14 +136,6 @@ export class SiteSearch {
cludoSayt.classList.remove('hidden');
}
- // Add shadow backdrop
- let rect = searchPanel.getBoundingClientRect();
-
- let shadowTop = hyHeader.classList.contains('hy-site-header--sticky-active')
- ? hyHeader.offsetHeight + rect.height
- : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height;
- this.showBackdropShadow('open', shadowTop);
-
// Without setTimeout it will not focus the input because it hasn't rendered yet.
setTimeout(() => {
const searchInput = this.el.shadowRoot.querySelector('input#search') as HTMLElement;
@@ -154,6 +147,47 @@ export class SiteSearch {
event.stopPropagation();
}
+ adjustPosition(target) {
+ let headerHeight = '0';
+ let shadowTop = 0;
+ const searchPanel = target.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
+ let rect = searchPanel.getBoundingClientRect();
+
+ if (this.isGroup) {
+ let hyHeader = target.closest('.hy-site-header__content-top') as HTMLElement;
+ if (hyHeader) {
+ let rectHeader = hyHeader.getBoundingClientRect();
+ headerHeight = `${rectHeader.height}px`;
+
+ // Add shadow backdrop
+ //@todo For some reason rect (Search Panel) is {
+ // "x": 0,
+ // "y": 0,
+ // "width": 0,
+ // "height": 0,
+ // "top": 0,
+ // "right": 0,
+ // "bottom": 0,
+ // "left": 0
+ // }
+ shadowTop = hyHeader.offsetHeight + rect.height;
+ }
+ } else {
+ let hyHeader = target.closest('.hy-site-header') as HTMLElement;
+ headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active')
+ ? `${hyHeader.offsetHeight}px`
+ : `${hyHeader.offsetTop + hyHeader.offsetHeight}px`;
+
+ // Add shadow backdrop
+ shadowTop = hyHeader.classList.contains('hy-site-header--sticky-active')
+ ? hyHeader.offsetHeight + rect.height
+ : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height;
+ }
+
+ searchPanel.style.top = headerHeight;
+ this.showBackdropShadow('open', shadowTop);
+ }
+
showBackdropShadow(state = 'close', top = 0) {
let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
@@ -173,8 +207,6 @@ export class SiteSearch {
}
render() {
- const isGroupClass = this.isGroup ? 'group' : 'page';
- const buttonSearchLabelClass = ['button--search__label', `button--search__label__${isGroupClass}`].join(' ');
return (
<Host
class={{
@@ -187,13 +219,19 @@ export class SiteSearch {
aria-expanded={`${this.isSearchPanelOpen}`}
class={{
'button--search': true,
- 'button--search--group': this.isGroup,
+ group: this.isGroup,
'is-open--menu': this.isAlternative,
'is-open': this.isSearchPanelOpen,
}}
onClick={(e) => this.handleSearchPanelToggle(e)}
>
- {this.showLabel ? <span class={buttonSearchLabelClass}>{this._labels['label']}</span> : ''}
+ {this.showLabel ? (
+ <span class={{'button--search__label': true, 'button--search__label__group': this.isGroup}}>
+ {this._labels['label']}
+ </span>
+ ) : (
+ ''
+ )}
<hy-icon icon={'hy-icon-search'} size={this.size} fill={this.color} />
</button>
<div