Skip to content
Snippets Groups Projects
Commit 77c29541 authored by Sebastian Hämäläinen's avatar Sebastian Hämäläinen Committed by Tuukka Turu
Browse files

NXSTAGE-939: Breadcrumbs improvements

parent 993debf1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/hy-breadcrumbs/hy-breadcrumbs.scss
+ 126
− 102
View file @ 77c29541
......@@ -5,6 +5,7 @@
// Default variant
.hy-breadcrumbs {
display: inline-block;
position: relative;
width: auto;
&.is-condensed {
......@@ -23,18 +24,14 @@
font-family: var(--main-font-family);
list-style-type: none;
margin: 0;
min-height: 72px;
overflow: hidden;
padding: 0;
padding: 20px 0 16px;
@include breakpoint($narrow) {
min-height: 76px;
}
@include breakpoint($wide) {
min-height: 86px;
padding: 24px 0 20px;
}
@include breakpoint($extrawide) {
min-height: 94px;
padding: 32px 0 24px;
}
}
......@@ -45,47 +42,24 @@
flex: 0 0 auto;
a {
color: var(--brand-main-light);
align-items: center;
color: var(--link-blue);
display: flex;
flex-direction: row;
align-items: center;
margin-right: 20px;
height: 44px;
padding-left: 6px;
padding-right: 6px;
position: relative;
text-decoration: none;
@include breakpoint($narrow) {
margin-right: 28px;
}
@include breakpoint($wide) {
margin-right: 30px;
}
.breadcrumb-item-caret {
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
@include breakpoint($narrow) {
right: -18px;
}
@include breakpoint($wide) {
right: -19px;
}
&:hover {
cursor: default;
}
}
}
a.default {
@include font-size(14px, 20px);
@include font-size(14px, 18px);
@include font-weight($semibold);
letter-spacing: -0.5px;
@include breakpoint($narrow) {
@include font-size(16px, 24px);
@include breakpoint($extrawide) {
@include font-size(16px, 20px);
}
}
......@@ -107,6 +81,8 @@
.breadcrumb-item.home {
hy-icon.default {
margin-bottom: 4px;
svg {
fill: var(--brand-main-light);
stroke: var(--brand-main-light);
......@@ -123,47 +99,25 @@
.breadcrumb-item.main {
min-width: 0;
a {
display: flex;
}
}
.breadcrumb-item__more {
display: none;
flex-direction: row;
align-items: center;
position: relative;
margin-right: 20px;
@include breakpoint($narrow) {
margin-right: 25px;
}
@include breakpoint($wide) {
margin-right: 30px;
}
&.visible {
display: flex;
}
.breadcrumb-item-caret {
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
@include breakpoint($narrow) {
right: -18px;
}
&:hover {
cursor: default;
}
&__drop {
position: absolute;
right: 5.5px;
top: 50%;
transform: translateY(-50%);
}
}
}
......@@ -174,60 +128,110 @@
}
.breadcrumb-item-dropdown-button {
align-items: center;
background-color: transparent;
border: 0;
display: flex;
flex-direction: row;
color: var(--brand-main-light);
height: 44px;
margin: 0;
padding-left: 6px;
padding-right: 6px;
cursor: pointer;
border: 1.5px solid var(--brand-main-light);
font-size: 1.5rem;
line-height: 10px;
border-radius: 3px;
background-color: var(--grayscale-white);
box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.3);
padding: 0 25px 9px 10px;
position: relative;
hy-icon {
svg {
fill: var(--brand-main-light);
margin: 0 0 -3px 10px;
transform: rotate(90deg);
.breadcrumb-item-dropdown-button__content {
align-items: center;
background-color: var(--grayscale-white);
border-radius: 3px;
border: 2px solid var(--brand-main-light);
color: var(--brand-main-light);
display: flex;
height: 20px;
padding: 0 6px;
pointer-events: none;
> span {
position: relative;
width: 20px;
height: 10px;
&:after {
background-color: var(--grayscale-black);
border-radius: 50%;
box-shadow: 0 0 0 1px var(--grayscale-black), -6px 0 0 1px var(--grayscale-black),
6px 0 0 1px var(--grayscale-black);
content: '';
height: 2px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 2px;
}
}
hy-icon {
svg {
fill: var(--brand-main-light);
margin-left: 3px;
transform: rotate(90deg);
}
}
}
}
.breadcrumb-item-dropdown-button.is-open {
background-color: var(--brand-main-light);
color: var(--grayscale-white);
&.is-open {
.breadcrumb-item-dropdown-button__content {
background-color: var(--brand-main-light);
color: var(--grayscale-white);
> span {
&:after {
background-color: var(--grayscale-white);
box-shadow: 0 0 0 1px var(--grayscale-white), -6px 0 0 1px var(--grayscale-white),
6px 0 0 1px var(--grayscale-white);
width: 2px;
}
}
}
svg {
fill: var(--grayscale-white);
margin: 0 0 -3px 10px;
transform: rotate(270deg);
hy-icon svg {
fill: var(--grayscale-white);
transform: rotate(270deg);
}
}
}
.breadcrumb-hidden-items {
display: none;
list-style: none;
visibility: hidden;
&__is-open {
background: var(--grayscale-white);
box-shadow: 0 0 10px 0 rgba(14, 104, 139, 0.2);
display: block;
margin-top: -9px;
padding: 32px 16px 6px 16px;
left: 0;
padding: 16px 0 20px;
position: absolute;
right: 0;
top: calc(100% - 11px);
visibility: visible;
z-index: 5;
@include breakpoint($narrow) {
padding: 32px 64px 6px 32px;
left: 12px;
right: auto;
}
a {
a.default {
display: flex;
height: 44px;
margin: 0;
padding-bottom: 26px;
width: 100%;
padding: 0 16px;
@include breakpoint($narrow) {
padding: 0 64px 0 32px;
}
}
}
}
......@@ -250,15 +254,12 @@
font-family: var(--main-font-family);
text-decoration: none;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: auto;
}
.intermediate {
display: flex;
text-overflow: initial;
}
.intermediate.hidden {
......@@ -270,7 +271,7 @@
.breadcrumb-item.intermediate,
.breadcrumb-item.home {
a {
min-height: 44px;
// min-height: 44px;
}
}
.breadcrumb-item.breadcrumb-item__current {
......@@ -297,9 +298,24 @@
visibility: visible;
a.large {
@include font-size(26px, 26px);
@include font-size(20px, 26px);
color: var(--grayscale-black);
font-weight: 700;
letter-spacing: -0.6px;
@include breakpoint($narrow) {
@include font-size(26px, 26px);
letter-spacing: -0.8px;
font-weight: 700;
}
}
.breadcrumb-item__divider {
@include font-size(20px, 26px);
@include breakpoint($narrow) {
@include font-size(26px, 26px);
}
}
.breadcrumb-item-caret {
......@@ -326,8 +342,16 @@
.breadcrumb-item.home {
svg {
fill: var(--grayscale-black);
height: 18px;
margin-bottom: 4px;
stroke: var(--grayscale-black);
stroke-width: 30;
width: 18px;
@include breakpoint($narrow) {
height: 24px;
margin-bottom: 2px;
width: 24px;
}
}
}
}
......
src/components/hy-breadcrumbs/hy-breadcrumbs.tsx
+ 36
− 31
View file @ 77c29541
......@@ -42,7 +42,11 @@ export class HyBreadcrumbs {
// Set breadcumbs width + paddings.
breadcrumbsWidth = this.el.offsetWidth + 64;
if (breadcrumbsWidth >= document.body.scrollWidth) {
const layoutContentElement = document.getElementsByClassName('layout-content')[0] as HTMLElement;
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
if (breadcrumbsWidth >= layoutContentElement.offsetWidth) {
moreButton.setAttribute('aria-hidden', 'false');
this.adjustBreadcrumbsMenuVisibility();
}
}
......@@ -85,24 +89,23 @@ export class HyBreadcrumbs {
return (
<li class="breadcrumb-item home">
<a href={url} class={homeItemClass}>
<hy-icon icon={'hy-icon-home'} class={`${this.variant}`} size={20} />
<hy-icon icon={'hy-icon-caret-right'} class={'breadcrumb-item-caret'} size={10} />
<hy-icon icon={'hy-icon-home'} class={`${this.variant}`} size={16} />
</a>
<span class="breadcrumb-item__divider">/</span>
</li>
);
}
BreadcrumbItem(label, url, className = '', withCaret = true) {
const breadcrumbClass = ['breadcrumb-item', className].join(' ');
const caretClass = ['breadcrumb-item-caret', this.variant].join(' ');
if (url) {
if (withCaret) {
return (
<li class={breadcrumbClass}>
<a href={url} class={`${this.variant}`}>
{label}
<hy-icon icon={'hy-icon-caret-right'} class={caretClass} size={10} />
</a>
<span class="breadcrumb-item__divider">/</span>
</li>
);
} else {
......@@ -118,7 +121,7 @@ export class HyBreadcrumbs {
return (
<li class={`${breadcrumbClass} breadcrumb-item__current`}>
<a aria-current="page" href={url} class={`${this.variant}`}>
{label}
{label.length > 20 ? `${label.substring(0, 19)}...` : label}
</a>
</li>
);
......@@ -130,7 +133,7 @@ export class HyBreadcrumbs {
return <li class={breadcrumbClass}>{label}</li>;
}
DropdownMenuItem() {
DropdownMenuItem(items) {
return (
<li class="breadcrumb-item__more">
<button
......@@ -140,15 +143,22 @@ export class HyBreadcrumbs {
id="more"
key="more"
class="breadcrumb-item-dropdown-button"
aria-label="Open breadcrumb navigation"
>
...
<hy-icon
icon={'hy-icon-caret-right'}
class={'breadcrumb-item-caret__drop breadcrumb-item__more__icon'}
size={10}
/>
<span class="breadcrumb-item-dropdown-button__content">
{/* Span is for ... */}
<span></span>
<hy-icon
icon={'hy-icon-caret-right'}
class={'breadcrumb-item-caret__drop breadcrumb-item__more__icon'}
size={10}
/>
</span>
</button>
<hy-icon icon={'hy-icon-caret-right'} class={'breadcrumb-item-caret'} size={10} />
<ol class="breadcrumb-hidden-items" aria-hidden="true">
{items}
</ol>
<span class="breadcrumb-item__divider">/</span>
</li>
);
}
......@@ -209,20 +219,14 @@ export class HyBreadcrumbs {
if (moreMenu) {
if (this.menuOpen) {
moreMenu.classList.remove('breadcrumb-hidden-items__is-open');
moreMenu.setAttribute('aria-hidden', 'true');
moreButton.classList.remove('is-open');
moreButton.setAttribute('aria-expanded', 'false');
} else {
moreMenu.classList.add('breadcrumb-hidden-items__is-open');
moreButton.classList.add('is-open');
moreMenu.setAttribute('aria-hidden', 'false');
moreButton.setAttribute('aria-expanded', 'true');
if (document.body.scrollWidth < 480) {
(moreMenu as HTMLElement).style.left = '16px';
} else {
var rect = (moreButton as HTMLElement).getBoundingClientRect();
(moreMenu as HTMLElement).style.left = (rect.left - 64).toString().concat('px');
this.adjustHiddenMenuWidth();
}
}
this.menuOpen = !this.menuOpen;
}
......@@ -239,10 +243,14 @@ export class HyBreadcrumbs {
if (!event) return;
const breadcrumbsElement = document.querySelectorAll('.hy-breadcrumbs')[0];
const moreButton = document.querySelectorAll('.breadcrumb-item-dropdown-button')[0];
if (breadcrumbsElement) {
if (breadcrumbsWidth + 64 >= document.body.scrollWidth) {
this.adjustBreadcrumbsMenuVisibility(true);
moreButton.setAttribute('aria-hidden', 'false');
this.adjustBreadcrumbsMenuVisibility();
} else {
moreButton.setAttribute('aria-hidden', 'true');
this.adjustBreadcrumbsMenuVisibility(false);
}
}
......@@ -265,7 +273,6 @@ export class HyBreadcrumbs {
if (index == 0) {
itemsBreadcrumbs.push(this.HomeItem(x.url));
} else {
//itemsBreadcrumbs.push(this.BreadcrumbTextItem(x.text, 'main'));
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, '', 'main'));
}
}
......@@ -275,12 +282,8 @@ export class HyBreadcrumbs {
this._dataItems.map((x, index) => {
let breadcrumbEl = this.BreadcrumbItem(x.text, x.url, '', false);
if (isMenuNeeded && index > 1 && index < TOTAL_ITEMS - 1) {
itemsToShowInMenu.push(<div>{breadcrumbEl}</div>);
if (index === 2) {
itemsBreadcrumbs.push(this.DropdownMenuItem());
}
if (isMenuNeeded && index > 0 && index < TOTAL_ITEMS - 1) {
itemsToShowInMenu.push(<li>{breadcrumbEl}</li>);
itemsBreadcrumbs.push(this.BreadcrumbItem(x.text, x.url, 'intermediate'));
return;
} else {
......@@ -293,12 +296,14 @@ export class HyBreadcrumbs {
});
}
// Add items to show in breadcrumb popup in correct DOM position.
itemsBreadcrumbs.splice(1, 0, this.DropdownMenuItem(itemsToShowInMenu));
const breadcrumbsClass = ['hy-breadcrumbs', this.variant, this.headerstyle].join(' ');
return (
<nav aria-label="Breadcrumb" role="navigation" aria-labelledby="system-breadcrumb" class={breadcrumbsClass}>
<ol class="breadcrumb-container">{itemsBreadcrumbs}</ol>
{itemsToShowInMenu && <ol class="breadcrumb-hidden-items">{itemsToShowInMenu}</ol>}
</nav>
);
}
......
src/components/icon/Home.tsx
+ 2
− 6
View file @ 77c29541
......@@ -2,12 +2,8 @@ import {h} from '@stencil/core';
function SvgHome(props) {
return (
<svg viewBox="0 0 1000 1000" {...props} stroke="black" stroke-width="1">
<path
d="M345.3,998.7c-30.3,0-55.4-25.2-55.4-55.6c0-30.4,25.1-55.6,55.4-55.6h479.9l0-509.9L500,114.2L174.8,377.6
v565.5c0,30.4-25.1,55.6-55.4,55.6c-30.3,0-55.4-25.2-55.4-55.6l0-567.6c0-31.5,14.6-61.9,38.7-81.9L434.1,25
c37.7-30.4,93-30.4,130.7,0l332.5,268.6c25.1,19.9,38.7,49.3,38.7,81.9v568.7c0,29.4-25.1,54.6-55.4,54.6L345.3,998.7z"
/>
<svg viewBox="0 0 56 65" {...props} stroke="black" stroke-width="1">
<path d="M29.3106262,0.81816473 L55.3106262,23.6051927 C55.7484916,23.9889485 56,24.5457471 56,25.1313539 L56,62.3034274 C56,63.4192907 55.1045695,64.3238767 54,64.3238767 L2,64.3238767 C0.8954305,64.3238767 0,63.4192907 0,62.3034274 L0,25.1313539 C0,24.5457471 0.251508395,23.9889485 0.6893738,23.6051927 L26.6893738,0.81816473 C27.4413507,0.159114007 28.5586493,0.159114007 29.3106262,0.81816473 Z M28,10.3657587 L8,27.8911356 L8,56.2420796 L48,56.2420796 L48,27.8951765 L28,10.3657587 Z"></path>
</svg>
);
}
......
src/global/_colors.scss
+ 1
− 1
View file @ 77c29541
......@@ -4,7 +4,7 @@
--brand-main-active: #005379;
--brand-main-dark: #003146;
--brand-main-nearly-black: #000222;
--link-blue: #0479a5;
--link-blue: #0479a4;
--link-disabled: #767676;
--grayscale-white: #fff;
--grayscale-slightly-gray: #fefefe;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment