Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: app template #2

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
40 changes: 24 additions & 16 deletions blocks/columns/columns.css
Original file line number Diff line number Diff line change
@@ -1,25 +1,33 @@
.columns > div {
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
}

.columns img {
width: 100%;
width: 100%;
}

@media (min-width: 900px) {
.columns > div {
display: flex;
align-items: center;
flex-direction: unset;
}
.columns > div > div {
order: 1;
}

.columns > div > .columns-img-col {
order: 0;
}

.columns > div > .columns-img-col img {
display: block;
}

.columns > div > div {
flex: 1;
margin-left: 32px;
}
@media (min-width: 600px) {
.columns > div {
align-items: center;
flex-direction: unset;
gap: 32px;
}

.columns > div > div:first-of-type {
margin-left: unset;
}
.columns > div > div {
flex: 1;
order: unset;
}
}
14 changes: 14 additions & 0 deletions blocks/columns/columns.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
export default function decorate(block) {
const cols = [...block.firstElementChild.children];
block.classList.add(`columns-${cols.length}-cols`);

// setup image columns
[...block.children].forEach((row) => {
[...row.children].forEach((col) => {
const pic = col.querySelector('picture');
if (pic) {
const picWrapper = pic.closest('div');
if (picWrapper && picWrapper.children.length === 1) {
// picture is only content in column
picWrapper.classList.add('columns-img-col');
}
}
});
});
}
186 changes: 186 additions & 0 deletions blocks/header/header.css
Original file line number Diff line number Diff line change
Expand Up @@ -314,3 +314,189 @@ header .header-markets {
header .header-topbar .icon svg {
height: 100%;
}

/* APP HEADER */
header.app-header nav {
display: grid;
grid-template:
'hamburger brand tools' var(--app-nav-height)
'sections sections sections' 0 / 28px 1fr auto;
gap: 8px;
top: 0;
width: 100%;
height: var(--app-nav-height);
z-index: 2;
}

header.app-header nav[aria-expanded='true'] {
grid-template:
'brand hamburger' var(--app-nav-height)
'sections sections' 1fr
'tools tools' auto / 1fr 28px;
gap: 0 16px;
overflow-y: auto;
width: 60vw;
min-height: 100vh;
z-index: 3;
}

@media (min-width: 900px) {
header.app-header nav,
header.app-header nav[aria-expanded='true'] {
display: flex;
justify-content: space-between;
height: 100px;
padding: 20px;
background-color: transparent;
}
}

/* hamburger */
header.app-header nav .nav-hamburger {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
}

header.app-header nav[aria-expanded='false'] .nav-hamburger-icon,
header.app-header nav[aria-expanded='false'] .nav-hamburger-icon::after,
header.app-header nav[aria-expanded='false'] .nav-hamburger-icon::before {
top: 0;
width: 22px;
height: 3.5px;
border-radius: 1px;
}

header.app-header nav[aria-expanded='false'] .nav-hamburger-icon::after,
header.app-header nav[aria-expanded='false'] .nav-hamburger-icon::before {
top: -8px;
}

header.app-header nav[aria-expanded='false'] .nav-hamburger-icon::after {
top: 8px;
}

header.app-header nav[aria-expanded='true'] .nav-hamburger-icon {
transform: translate(-3px, 7px);
}

header.app-header nav[aria-expanded='true'] .nav-hamburger-icon::after,
header.app-header nav[aria-expanded='true'] .nav-hamburger-icon::before {
width: 24px;
height: 3.5px;
border-radius: 1px;
top: 0;
left: 0;
}

@media (min-width: 900px) {
header.app-header nav .nav-hamburger {
display: none;
visibility: hidden;
}
}

/* brand */
header.app-header nav[aria-expanded='true'] .nav-brand {
display: relative;
}

header.app-header nav[aria-expanded='true'] .nav-brand::after {
content: '';
display: block;
position: absolute;
width: 45%;
height: 2px;
margin-top: 16px;
background-color: #d6d6d6;
}

header.app-header nav .nav-brand p {
margin: 0;
line-height: 0;
}

header.app-header nav .nav-brand .icon-wknd-logo-dk {
width: unset;
margin-top: 0;
margin-bottom: 0;
}

header.app-header nav .nav-brand svg {
height: 22px;
width: auto;
}

@media (min-width: 900px) {
header.app-header nav .nav-brand svg {
height: 36px;
}
}

/* sections */
header.app-header nav[aria-expanded='true'] .nav-sections {
padding: 60px 0;
}

header.app-header nav[aria-expanded='true'] .nav-sections ul {
display: flex;
flex-direction: column;
gap: 30px;
margin: 0;
}

header.app-header nav .nav-sections li {
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}

@media (min-width: 900px) {
header.app-header nav .nav-sections {
display: unset;
}

header.app-header nav .nav-sections ul {
display: flex;
gap: 20px;
justify-content: center;
}

header.app-header nav .nav-sections li {
padding: 0;
font-size: 14px;
letter-spacing: .28px;
}
}

/* tools */
header.app-header nav .nav-tools {
height: unset;
}

header.app-header nav[aria-expanded='true'] .nav-tools {
margin-bottom: 15%;
}

header.app-header nav .nav-tools a:hover {
text-decoration: none;
}

header.app-header nav .nav-tools p {
margin: 0;
line-height: 1;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}

@media (min-width: 900px) {
header.app-header nav .nav-tools p {
font-size: 14px;
letter-spacing: .28px;
}
}
16 changes: 12 additions & 4 deletions blocks/header/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,18 @@ export default async function decorate(block) {
document.body.style.overflowY = expanded ? '' : 'hidden';
nav.setAttribute('aria-expanded', expanded ? 'false' : 'true');
});
const topBar = document.createElement('div');
topBar.classList.add('header-topbar');
block.prepend(topBar);
topBar.innerHTML = '<div>Sign In</div><div class="header-markets"><span class="icon icon-flag-us"></span>EN-US<span class="header-chevron-down"></span></div>';

if (navPath === '/nav') {
block.parentElement.classList.add('has-topbar');
const topBar = document.createElement('div');
topBar.classList.add('header-topbar');
block.prepend(topBar);
topBar.innerHTML = `<div>Sign In</div>
<div class="header-markets">
<span class="icon icon-flag-us"></span>EN-US<span class="header-chevron-down"></span>
</div>`;
}

nav.prepend(hamburger);
nav.setAttribute('aria-expanded', 'false');
decorateIcons(block);
Expand Down
Loading