Skip to content

Commit

Permalink
Merge pull request #694 from danskernesdigitalebibliotek/DDFFORM-852-…
Browse files Browse the repository at this point in the history 
…der-skal-vises-abningstidsikon-istedet-for-huskelisteikon-nar-man-er-pa-mobil

Show watch on small screens  / Refactor `header` CSS + Markup
  • Loading branch information
@kasperbirch1
kasperbirch1 committed Aug 20, 2024
2 parents 43ef5e8 + 13738f9 commit 00e2eaf
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 77 deletions.
69 changes: 42 additions & 27 deletions src/stories/Blocks/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,13 @@ export type HeaderProps = {
openDropdown: boolean;
};

export const Header = (props: HeaderProps) => {
const {
signedIn,
haveNotification,
username,
inputPlaceholder,
openDropdown,
} = props;
export const Header = ({
signedIn,
haveNotification,
username,
inputPlaceholder,
openDropdown,
}: HeaderProps) => {
const [isDropdownOpen, setIsDropdownOpen] = useState(openDropdown);

useEffect(() => {
Expand All @@ -43,7 +42,7 @@ export const Header = (props: HeaderProps) => {
hasImage
libraryName="Hjørring"
libraryPlace="Bibliotekerne"
altText="PromoTitle image of libary"
altText="PromoTitle image of library"
/>
</div>

Expand All @@ -56,7 +55,7 @@ export const Header = (props: HeaderProps) => {
<div className="header__menu-navigation-mobile">
<button
id="header-sidebar-nav__toggle"
className="header__menu-navigation-button header__button"
className="header__button header__button--right-border"
aria-controls="sidebarNav"
aria-expanded="false"
>
Expand All @@ -74,32 +73,48 @@ export const Header = (props: HeaderProps) => {
hasImage
libraryName="Lyngby-Taarbæk"
libraryPlace="Bibliotekerne"
altText="PromoTitle image of libary"
altText="PromoTitle image of library"
/>
</div>
</div>
<MenuItemList menuItems={menuItems} />
</div>
<div className="header__menu-profile header__button">
<a href="/" className="hide-linkstyle">
{signedIn && haveNotification && (
<div className="header__notification bg-signal-alert" />
)}
<ProfileIcon aria-label="go to user profile" />
{signedIn && (
<span className="text-small-caption">{username}</span>
)}
{!signedIn && <span className="text-small-caption">Login</span>}
<button className="header__button header__button--left-border btn-ui">
{signedIn && haveNotification && (
<div className="header__button-notification bg-signal-alert" />
)}
<ProfileIcon
className="header__button-icon"
aria-label="go to user profile"
/>
<span className="header__button-text">
{signedIn ? username : "Login"}
</span>
</button>
<div className="header__button-responsive-switch">
<a
href="/"
className="header__button header__button--left-border"
>
<WatchStaticIcon
className="header__button-icon"
aria-label="go to opening hours"
/>
<span className="header__button-text">Opening hours</span>
</a>
</div>
<div className="header__menu-bookmarked header__button">
<a href="/">
<HeartIcon aria-label="go to favorites list" />
<span className="text-small-caption">Liked</span>
<a
href="/"
className="header__button header__button--left-border"
>
<HeartIcon
className="header__button-icon"
aria-label="go to favorites list"
/>
<span className="header__button-text">Liked</span>
</a>
</div>
</nav>
<div>
<div className="header__menu-second">
<div className="header__menu-search">
<form className="header__menu-search-form">
<input
Expand Down
105 changes: 55 additions & 50 deletions src/stories/Blocks/header/header.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.header {
border: 1px solid $color__global-tertiary-1;
width: 100%;
display: grid;
grid-template-columns: 250px 1fr 105px;
background-color: $color__global-primary;
Expand Down Expand Up @@ -49,12 +48,6 @@
}
}

.header__menu-navigation-button {
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid $color__global-tertiary-1;
}
.header__menu-navigation-pagefold {
height: 100%;
width: 100%;
Expand All @@ -63,46 +56,76 @@
align-items: center;
}

.header__menu-profile,
.header__menu-bookmarked {
.header__button {
cursor: pointer;
position: relative;
height: 56px;
width: 56px;
display: flex;
justify-content: center;
align-items: center;
color: $color__text-primary-black;

@include media-query__small {
height: 70px;
width: 70px;
}
}

.header__button-notification {
position: absolute;
width: $s-sm;
height: $s-sm;
border-radius: 100%;
transform: translateX(10px) translateY(-12px);
}

.header__button--left-border {
border-left: 1px solid $color__global-tertiary-1;
}

a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.header__button--right-border {
border-right: 1px solid $color__global-tertiary-1;
}

.header__button-responsive-switch {
> *:first-child {
@include media-query__small {
display: none;
}
}

span {
position: absolute;
bottom: 0;
> *:last-child {
display: none;

@include media-query__small {
display: flex;
}
}
}

.header__button-text {
display: none;

@include media-query__small {
display: block;
@include typography($typo__small-caption);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
padding: 0 $s-xs;
text-align: center;
}

@include media-query__small {
span {
bottom: $s-xs;
}
}

.header__notification {
position: absolute;
width: $s-sm;
height: $s-sm;
border-radius: 100%;
transform: translateX(10px) translateY(-12px);
bottom: $s-xs;
}
}

.header__button-icon {
width: 24px;
height: 24px;
}

.header__menu-second {
height: 100%;
}
Expand Down Expand Up @@ -206,20 +229,6 @@
align-items: center;
}

.header__button {
height: 56px;
width: 56px;
display: flex;
justify-content: center;
align-items: center;
color: $color__text-primary-black;

@include media-query__small {
height: 70px;
width: 70px;
}
}

// has-burger-menu is added dynamically using JS, by calculating if there
// is enough space to show the desktop menu, and otherwise enabling the
// burger menu. @see header-state.js
Expand Down Expand Up @@ -248,7 +257,3 @@
display: flex;
}
}

#header-sidebar-nav__toggle {
cursor: pointer;
}

0 comments on commit 00e2eaf

Please sign in to comment.