From 7220f7419dce3156fed8e6113d1f70bfd7c20b78 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 23 Oct 2023 14:44:39 +0200 Subject: [PATCH 01/16] blogheader - desktop, no search yet [ Blog Header] Implement and style Blog Header #9 --- blocks/blogheader/blogheader.css | 58 ++++++++++++++++++++++++++++++++ blocks/blogheader/blogheader.js | 24 +++++++++++++ scripts/scripts.js | 14 ++++++-- 3 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 blocks/blogheader/blogheader.css create mode 100644 blocks/blogheader/blogheader.js diff --git a/blocks/blogheader/blogheader.css b/blocks/blogheader/blogheader.css new file mode 100644 index 00000000..2c8cda43 --- /dev/null +++ b/blocks/blogheader/blogheader.css @@ -0,0 +1,58 @@ +main.has-sidebar > div.blogheader-container { + background-color: var(--text-color); + grid-column: 2 / span 2; + color: var(--background-color); + padding: 0; +} + +nav#blogheader { + background-color: var(--text-color); + padding: 0; + margin: 0; +} + +/* Style for the container div */ +nav#blogheader > div { + display: flex; + justify-content: space-between; + align-items: center; +} + +/* Style for the list as a table */ +nav#blogheader ul { + display: table; + table-layout: fixed; + list-style-type: none; + padding: 0; + margin: 0; + width: 55rem; +} + +nav#blogheader li a { + font-size: 1.4rem; + text-decoration: none; + transition: none; + background: inherit; + color: inherit; + font-family: GilroyRegular; + font-weight: 400; +} + +/* Style for the list items as table cells */ +nav#blogheader li { + display: table-cell; + border-right: 1px solid white; + color: white; + text-align: center; + padding: 1.5rem 0; +} + +nav#blogheader li.active { + background-color: black; +} + +/* Style for the paragraph */ +nav#blogheader p { + margin: 0; + padding: 0; +} diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js new file mode 100644 index 00000000..f464cbac --- /dev/null +++ b/blocks/blogheader/blogheader.js @@ -0,0 +1,24 @@ +import { getMetadata, decorateIcons } from '../../scripts/aem.js'; + +export default async function decorate(block) { + + + const blogHeaderMeta = getMetadata('blogheader'); + const blogHeaderPath = blogHeaderMeta ? new URL(blogHeaderMeta).pathname : '/blogs/blog-nav'; + + const blogHeaderResp = await fetch(`${blogHeaderPath}.plain.html`); + + if (blogHeaderResp.ok) { + const blogHeaderHtml = await blogHeaderResp.text(); + + const blogHeader = document.createElement('nav'); + blogHeader.id = 'blogheader'; + blogHeader.innerHTML = blogHeaderHtml; + + blogHeader.querySelector(`li > a[href^="${window.location.pathname}"`)?.parentNode?.classList.add('active'); + + decorateIcons(blogHeader); + block.append(blogHeader); + } + } + \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index 92f5678c..05c32141 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -32,6 +32,12 @@ function buildHeroBlock(main) { } } +function buildBlogHeader(main) { + const section = document.createElement('div'); + section.append(buildBlock('blogheader', { elems: []})); + main.prepend(section); +} + /** * load fonts.css and set a session storage flag */ @@ -52,6 +58,7 @@ async function loadFonts() { function buildAutoBlocks(main) { try { // buildHeroBlock(main); + buildBlogHeader(main); } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); @@ -67,10 +74,13 @@ function detectSidebar(main) { const numSections = main.children.length - 1; main.style = `grid-template-rows: repeat(${numSections}, auto);`; + // sidebar offset is 2 by default and at a minimum to allow the blogheader to span the inner 2 columns + // without pushing the sidebar below the page contents. + let offset = 2; if (sidebarOffset && Number.parseInt(sidebar.getAttribute('data-start-sidebar-at-section'), 10)) { - const offset = Number.parseInt(sidebar.getAttribute('data-start-sidebar-at-section'), 10); - sidebar.style.gridRow = `${offset} / infinite`; + offset = Math.max(offset, Number.parseInt(sidebar.getAttribute('data-start-sidebar-at-section'), 10)); } + sidebar.style.gridRow = `${offset} / infinite`; sidebar.querySelectorAll('h3').forEach((header) => { const headerContent = header.textContent; From 54425a2161cd84f10c964ea102ad30280980a204 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 23 Oct 2023 14:55:58 +0200 Subject: [PATCH 02/16] eslint fixes --- blocks/blogheader/blogheader.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index f464cbac..fd835dc9 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -1,24 +1,22 @@ import { getMetadata, decorateIcons } from '../../scripts/aem.js'; export default async function decorate(block) { - - const blogHeaderMeta = getMetadata('blogheader'); const blogHeaderPath = blogHeaderMeta ? new URL(blogHeaderMeta).pathname : '/blogs/blog-nav'; const blogHeaderResp = await fetch(`${blogHeaderPath}.plain.html`); if (blogHeaderResp.ok) { - const blogHeaderHtml = await blogHeaderResp.text(); - - const blogHeader = document.createElement('nav'); - blogHeader.id = 'blogheader'; - blogHeader.innerHTML = blogHeaderHtml; - - blogHeader.querySelector(`li > a[href^="${window.location.pathname}"`)?.parentNode?.classList.add('active'); + const blogHeaderHtml = await blogHeaderResp.text(); + + const blogHeader = document.createElement('nav'); + blogHeader.id = 'blogheader'; + blogHeader.innerHTML = blogHeaderHtml; + + blogHeader.querySelector(`li > a[href^="${window.location.pathname}"`)?.parentNode?.classList.add('active'); - decorateIcons(blogHeader); - block.append(blogHeader); + decorateIcons(blogHeader); + block.append(blogHeader); } - } +} \ No newline at end of file From ee0f99127e9dd83c5ca2c5da1bd8c658e144f1a5 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 23 Oct 2023 15:04:47 +0200 Subject: [PATCH 03/16] eslint --- blocks/blogheader/blogheader.js | 33 ++++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index fd835dc9..24d44d3f 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -1,22 +1,25 @@ -import { getMetadata, decorateIcons } from '../../scripts/aem.js'; +import { getMetadata, decorateIcons } from "../../scripts/aem.js"; export default async function decorate(block) { - const blogHeaderMeta = getMetadata('blogheader'); - const blogHeaderPath = blogHeaderMeta ? new URL(blogHeaderMeta).pathname : '/blogs/blog-nav'; - - const blogHeaderResp = await fetch(`${blogHeaderPath}.plain.html`); + const blogHeaderMeta = getMetadata("blogheader"); + const blogHeaderPath = blogHeaderMeta + ? new URL(blogHeaderMeta).pathname + : "/blogs/blog-nav"; - if (blogHeaderResp.ok) { - const blogHeaderHtml = await blogHeaderResp.text(); + const blogHeaderResp = await fetch(`${blogHeaderPath}.plain.html`); - const blogHeader = document.createElement('nav'); - blogHeader.id = 'blogheader'; - blogHeader.innerHTML = blogHeaderHtml; + if (blogHeaderResp.ok) { + const blogHeaderHtml = await blogHeaderResp.text(); - blogHeader.querySelector(`li > a[href^="${window.location.pathname}"`)?.parentNode?.classList.add('active'); + const blogHeader = document.createElement("nav"); + blogHeader.id = "blogheader"; + blogHeader.innerHTML = blogHeaderHtml; - decorateIcons(blogHeader); - block.append(blogHeader); - } + blogHeader + .querySelector(`li > a[href^="${window.location.pathname}"`) + ?.parentNode?.classList.add("active"); + + decorateIcons(blogHeader); + block.append(blogHeader); + } } - \ No newline at end of file From d0917e02c9e2393d9788a622b01b93a26a41112d Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 23 Oct 2023 16:09:37 +0200 Subject: [PATCH 04/16] fixes after merge from main --- blocks/blogheader/blogheader.css | 1 - blocks/blogheader/blogheader.js | 12 ++++++------ scripts/scripts.js | 10 ++++++++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/blocks/blogheader/blogheader.css b/blocks/blogheader/blogheader.css index 2c8cda43..9ee06453 100644 --- a/blocks/blogheader/blogheader.css +++ b/blocks/blogheader/blogheader.css @@ -1,5 +1,4 @@ main.has-sidebar > div.blogheader-container { - background-color: var(--text-color); grid-column: 2 / span 2; color: var(--background-color); padding: 0; diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index 24d44d3f..18f88a48 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -1,7 +1,7 @@ -import { getMetadata, decorateIcons } from "../../scripts/aem.js"; +import { getMetadata, decorateIcons } from '../../scripts/aem.js'; export default async function decorate(block) { - const blogHeaderMeta = getMetadata("blogheader"); + const blogHeaderMeta = getMetadata('blogheader'); const blogHeaderPath = blogHeaderMeta ? new URL(blogHeaderMeta).pathname : "/blogs/blog-nav"; @@ -11,13 +11,13 @@ export default async function decorate(block) { if (blogHeaderResp.ok) { const blogHeaderHtml = await blogHeaderResp.text(); - const blogHeader = document.createElement("nav"); - blogHeader.id = "blogheader"; + const blogHeader = document.createElement('nav'); + blogHeader.id = 'blogheader'; blogHeader.innerHTML = blogHeaderHtml; blogHeader - .querySelector(`li > a[href^="${window.location.pathname}"`) - ?.parentNode?.classList.add("active"); + .querySelector(`li > a[href^='${window.location.pathname}'`) + ?.parentNode?.classList.add('active'); decorateIcons(blogHeader); block.append(blogHeader); diff --git a/scripts/scripts.js b/scripts/scripts.js index 83029ac4..4333d6c2 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -110,6 +110,12 @@ export function formatDate(date) { }); } +function buildBlogHeader(main) { + const section = document.createElement('div'); + section.append(buildBlock('blogheader', { elems: []})); + main.prepend(section); +} + /** * Builds an article header and prepends to main in a new section. * @param main @@ -154,7 +160,7 @@ function isArticlePage() { // eslint-disable-next-line no-unused-vars function buildAutoBlocks(main) { try { - // buildHeroBlock(main); + buildBlogHeader(main); if (isArticlePage()) { buildArticleHeader(main); } @@ -171,7 +177,7 @@ function detectSidebar(main) { const sidebarOffset = Number.parseInt( sidebar.getAttribute('data-start-sidebar-at-section') || '2', 10, - ); + ) + 1; const numSections = main.children.length - 1; main.style = `grid-template-rows: repeat(${numSections}, auto);`; From e433f5a52ec3905104af62bb2519b910c1ea60b6 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 23 Oct 2023 16:17:38 +0200 Subject: [PATCH 05/16] eslint --- blocks/blogheader/blogheader.js | 2 +- scripts/scripts.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index 18f88a48..9d599ac9 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -4,7 +4,7 @@ export default async function decorate(block) { const blogHeaderMeta = getMetadata('blogheader'); const blogHeaderPath = blogHeaderMeta ? new URL(blogHeaderMeta).pathname - : "/blogs/blog-nav"; + : '/blogs/blog-nav'; const blogHeaderResp = await fetch(`${blogHeaderPath}.plain.html`); diff --git a/scripts/scripts.js b/scripts/scripts.js index 4333d6c2..3ac8761a 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -112,7 +112,7 @@ export function formatDate(date) { function buildBlogHeader(main) { const section = document.createElement('div'); - section.append(buildBlock('blogheader', { elems: []})); + section.append(buildBlock('blogheader', { elems: [] })); main.prepend(section); } @@ -289,4 +289,4 @@ async function loadPage() { loadDelayed(); } -loadPage(); \ No newline at end of file +loadPage(); From 5ee736126c8e80b1efecbca88e01b3acf6c8277f Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 23 Oct 2023 16:19:53 +0200 Subject: [PATCH 06/16] eslint --- blocks/blogheader/blogheader.css | 1 - 1 file changed, 1 deletion(-) diff --git a/blocks/blogheader/blogheader.css b/blocks/blogheader/blogheader.css index 9ee06453..5d3bf907 100644 --- a/blocks/blogheader/blogheader.css +++ b/blocks/blogheader/blogheader.css @@ -33,7 +33,6 @@ nav#blogheader li a { transition: none; background: inherit; color: inherit; - font-family: GilroyRegular; font-weight: 400; } From 09daab64ce81c9f9b0da2a08ab6f09204571f5ed Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Wed, 25 Oct 2023 13:42:31 +0200 Subject: [PATCH 07/16] fix article header position relative to blog header add blog search and minimal styling (leaving the real thing for [ Blog Header ] Search functionality #11) --- blocks/blogheader/blogheader.js | 13 ++++++--- blocks/blogsearch/blogsearch.css | 45 +++++++++++++++++++++++++++++++ blocks/blogsearch/blogsearch.js | 18 +++++++++++++ icons/blog-search-icon.webp | Bin 0 -> 196 bytes icons/blogsearch.svg | 6 +++++ scripts/scripts.js | 2 +- 6 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 blocks/blogsearch/blogsearch.css create mode 100644 blocks/blogsearch/blogsearch.js create mode 100644 icons/blog-search-icon.webp create mode 100644 icons/blogsearch.svg diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index 9d599ac9..ffc746c0 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -1,12 +1,14 @@ -import { getMetadata, decorateIcons } from '../../scripts/aem.js'; +import { getMetadata, decorateIcons, buildBlock, loadBlock, decorateBlock } from '../../scripts/aem.js'; +import { getLocaleInfo } from '../../scripts/scripts.js'; export default async function decorate(block) { const blogHeaderMeta = getMetadata('blogheader'); + const localeInfo = getLocaleInfo(); const blogHeaderPath = blogHeaderMeta ? new URL(blogHeaderMeta).pathname - : '/blogs/blog-nav'; + : 'blog-nav'; - const blogHeaderResp = await fetch(`${blogHeaderPath}.plain.html`); + const blogHeaderResp = await fetch(`${localeInfo['urlPrefix']}/blogs/fragments/${blogHeaderPath}.plain.html`); if (blogHeaderResp.ok) { const blogHeaderHtml = await blogHeaderResp.text(); @@ -20,6 +22,11 @@ export default async function decorate(block) { ?.parentNode?.classList.add('active'); decorateIcons(blogHeader); + let searchBlock = buildBlock('blogsearch', { elems: [] }); + blogHeader.querySelector('div').append(searchBlock); + decorateBlock(searchBlock); + loadBlock(searchBlock); + block.append(blogHeader); } } diff --git a/blocks/blogsearch/blogsearch.css b/blocks/blogsearch/blogsearch.css new file mode 100644 index 00000000..ddaef9f3 --- /dev/null +++ b/blocks/blogsearch/blogsearch.css @@ -0,0 +1,45 @@ +.blogsearch { + width: 6rem; +} + +.blogsearch > form { + display: block; + padding-right: 10px; + height: 2.5rem; +} + +.blogsearch form > div { + position: relative; + height: 100%; +} + +.blogsearch form div i.search-icon { + background-image: url(/icons/blog-search-icon.webp); + width: 1.5rem; + height: 1.5rem; + left: 1.3rem; + top: 0.7rem; + background-repeat: no-repeat; + display: block; + position: absolute; +} + +.blogsearch form div input { + background-color: rgba(255,255,255,0.1); + background-image: none; + border-radius: 12px 12px 12px 12px; + box-shadow: 0 2px 1px rgba(0,0,0,0.6) inset, 0 1px 0 rgba(255,255,255,0.2); + padding: 0; + margin: 0; + position: relative; + border-color: #293e40; + padding-left: 3rem; + color: #fff; + outline: 0; + height: 100%; + width: 100%; + display: inline-block; + line-height: inherit; + font-size: inherit; + font-family: inherit; +} \ No newline at end of file diff --git a/blocks/blogsearch/blogsearch.js b/blocks/blogsearch/blogsearch.js new file mode 100644 index 00000000..2aa2243f --- /dev/null +++ b/blocks/blogsearch/blogsearch.js @@ -0,0 +1,18 @@ +import { div, form, input, span, i } from '../../scripts/dom-helpers.js'; + +export default async function decorate(block) { +console.log("1"); + console.log(block.innerHtml); + block.innerHtml = ''; + block.textContent=''; + console.log("2"); + console.log(block.innerHtml); + console.log("decorating blogsearch"); + block.append( + form({}, + div({}, + i({class: 'search-icon'}) , + input({ + type: 'text' + })))); +} \ No newline at end of file diff --git a/icons/blog-search-icon.webp b/icons/blog-search-icon.webp new file mode 100644 index 0000000000000000000000000000000000000000..388adb7d1ad321510edfb4e52123a24802e0288f GIT binary patch literal 196 zcmWIYbaUIoz`zjh>J$(bU=hIuWD5W>KLZ0F1B0VafQL4a$H;H+Ur^8~P{s4?#Cmg~ z2~DDN6j-}$jIES@$vZFG{gPROYwrB~nZE0MRx$uhQOE-731DKF%cvy)G>MrZKy?X& zAe)Vkf>c9YLk0uGzi&zVAGq#4rNMP3)h8!p|0nPGU+0(mo3?DNe)-PJMbl=+z4mX+ u!7(chH!PM|Ge4k?JuPpSo8ElOpXPS=KbBsw`F1CNYNL@#>!Rrr2N(cRa6|$C literal 0 HcmV?d00001 diff --git a/icons/blogsearch.svg b/icons/blogsearch.svg new file mode 100644 index 00000000..8c09cf3e --- /dev/null +++ b/icons/blogsearch.svg @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index b8175153..06e45753 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -170,10 +170,10 @@ function isArticlePage() { // eslint-disable-next-line no-unused-vars function buildAutoBlocks(main) { try { - buildBlogHeader(main); if (isArticlePage()) { buildArticleHeader(main); } + buildBlogHeader(main); } catch (error) { // eslint-disable-next-line no-console console.error('Auto Blocking failed', error); From ce8114212f5b3265ccb7ff911cade9e5fd9b7d45 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Wed, 25 Oct 2023 13:48:41 +0200 Subject: [PATCH 08/16] linting --- blocks/blogheader/blogheader.js | 8 +++++--- blocks/blogsearch/blogsearch.js | 34 +++++++++++++++++---------------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index ffc746c0..79b9e2d9 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -1,4 +1,6 @@ -import { getMetadata, decorateIcons, buildBlock, loadBlock, decorateBlock } from '../../scripts/aem.js'; +import { + getMetadata, decorateIcons, buildBlock, loadBlock, decorateBlock, +} from '../../scripts/aem.js'; import { getLocaleInfo } from '../../scripts/scripts.js'; export default async function decorate(block) { @@ -8,7 +10,7 @@ export default async function decorate(block) { ? new URL(blogHeaderMeta).pathname : 'blog-nav'; - const blogHeaderResp = await fetch(`${localeInfo['urlPrefix']}/blogs/fragments/${blogHeaderPath}.plain.html`); + const blogHeaderResp = await fetch(`${localeInfo.urlPrefix}/blogs/fragments/${blogHeaderPath}.plain.html`); if (blogHeaderResp.ok) { const blogHeaderHtml = await blogHeaderResp.text(); @@ -22,7 +24,7 @@ export default async function decorate(block) { ?.parentNode?.classList.add('active'); decorateIcons(blogHeader); - let searchBlock = buildBlock('blogsearch', { elems: [] }); + const searchBlock = buildBlock('blogsearch', { elems: [] }); blogHeader.querySelector('div').append(searchBlock); decorateBlock(searchBlock); loadBlock(searchBlock); diff --git a/blocks/blogsearch/blogsearch.js b/blocks/blogsearch/blogsearch.js index 2aa2243f..66a8a9f2 100644 --- a/blocks/blogsearch/blogsearch.js +++ b/blocks/blogsearch/blogsearch.js @@ -1,18 +1,20 @@ -import { div, form, input, span, i } from '../../scripts/dom-helpers.js'; +import { + div, form, input, i, +} from '../../scripts/dom-helpers.js'; export default async function decorate(block) { -console.log("1"); - console.log(block.innerHtml); - block.innerHtml = ''; - block.textContent=''; - console.log("2"); - console.log(block.innerHtml); - console.log("decorating blogsearch"); - block.append( - form({}, - div({}, - i({class: 'search-icon'}) , - input({ - type: 'text' - })))); -} \ No newline at end of file + console.log('1'); + console.log(block.innerHtml); + block.innerHtml = ''; + block.textContent = ''; + console.log('2'); + console.log(block.innerHtml); + console.log('decorating blogsearch'); + block.append( + form({}, + div({}, + i({ class: 'search-icon' }), + input({ + type: 'text', + })))); +} From d06e60ab612c61f37050f6a02a219da2e533e0b2 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Wed, 25 Oct 2023 13:56:12 +0200 Subject: [PATCH 09/16] stylelint --- blocks/blogsearch/blogsearch.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/blocks/blogsearch/blogsearch.css b/blocks/blogsearch/blogsearch.css index ddaef9f3..71a1b840 100644 --- a/blocks/blogsearch/blogsearch.css +++ b/blocks/blogsearch/blogsearch.css @@ -14,7 +14,7 @@ } .blogsearch form div i.search-icon { - background-image: url(/icons/blog-search-icon.webp); + background-image: url("/icons/blog-search-icon.webp"); width: 1.5rem; height: 1.5rem; left: 1.3rem; @@ -25,10 +25,10 @@ } .blogsearch form div input { - background-color: rgba(255,255,255,0.1); + background-color: rgb(255 255 255 / 10%); background-image: none; - border-radius: 12px 12px 12px 12px; - box-shadow: 0 2px 1px rgba(0,0,0,0.6) inset, 0 1px 0 rgba(255,255,255,0.2); + border-radius: 12px; + box-shadow: 0 2px 1px rgb(0 0 0 / 60%) inset, 0 1px 0 rgb(255 255 255 / 20%); padding: 0; margin: 0; position: relative; From c7f464a51d39a40b03e56513e76044ef4e03b5b7 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Wed, 25 Oct 2023 13:58:32 +0200 Subject: [PATCH 10/16] more style --- blocks/blogsearch/blogsearch.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/blocks/blogsearch/blogsearch.js b/blocks/blogsearch/blogsearch.js index 66a8a9f2..ad2d183f 100644 --- a/blocks/blogsearch/blogsearch.js +++ b/blocks/blogsearch/blogsearch.js @@ -3,13 +3,8 @@ import { } from '../../scripts/dom-helpers.js'; export default async function decorate(block) { - console.log('1'); - console.log(block.innerHtml); block.innerHtml = ''; block.textContent = ''; - console.log('2'); - console.log(block.innerHtml); - console.log('decorating blogsearch'); block.append( form({}, div({}, From 5c2f180e2a648153837d55c6b22c56c74c54ff42 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 30 Oct 2023 17:30:20 +0100 Subject: [PATCH 11/16] mobile blogheader --- blocks/blogheader/blogheader.css | 96 ++++++++++++++++++++++++++++++-- blocks/blogheader/blogheader.js | 28 +++++++++- 2 files changed, 118 insertions(+), 6 deletions(-) diff --git a/blocks/blogheader/blogheader.css b/blocks/blogheader/blogheader.css index 5d3bf907..4e7083dc 100644 --- a/blocks/blogheader/blogheader.css +++ b/blocks/blogheader/blogheader.css @@ -5,26 +5,26 @@ main.has-sidebar > div.blogheader-container { } nav#blogheader { - background-color: var(--text-color); + --number-of-menu-items: 4; + padding: 0; margin: 0; } -/* Style for the container div */ nav#blogheader > div { display: flex; justify-content: space-between; align-items: center; } -/* Style for the list as a table */ nav#blogheader ul { display: table; table-layout: fixed; list-style-type: none; padding: 0; margin: 0; - width: 55rem; + width: 100%; + background-color: var(--text-color); } nav#blogheader li a { @@ -36,13 +36,21 @@ nav#blogheader li a { font-weight: 400; } -/* Style for the list items as table cells */ nav#blogheader li { display: table-cell; border-right: 1px solid white; color: white; text-align: center; padding: 1.5rem 0; + width: calc(55rem / var(--number-of-menu-items)); +} + +nav#blogheader li.blogsearch-menu-container { + border: none; + text-align: right; + width: auto; + display: flex; + justify-content: flex-end; } nav#blogheader li.active { @@ -54,3 +62,81 @@ nav#blogheader p { margin: 0; padding: 0; } + +@media (min-width: 900px) { + div.blogheader-hamburger { + display: none; + visibility: hidden; + width: 0; + } +} + +@media (max-width: 899px ) { + nav#blogheader { + position: relative; + } + + nav#blogheader div.blogheader-sections { + display: block; + } + + nav#blogheader ul { + visibility: hidden; + display: none; + } + + #blogheader > div.blogheader-sections > ul > li.blogsearch-menu-container.blogsearch-wrapper { + padding: 1.2rem; + } + + nav#blogheader li { + display: table-row; + width: 100%; + } + + nav#blogheader li a { + padding: 0.8rem 0; + display: table-cell; + font-size: 1.6rem; + border-bottom: 0.1rem solid #f7f7f7; + } +} + +.blogheader-hamburger { + display: block; + width: 7rem; + height: 2.5rem; + float: right; + border-radius: 0.5rem; + background: #293e40; + position: relative; + right: 0; + color: white; + margin-bottom: 0.8rem; + padding-left: 0.4rem; +} + +.blogheader-hamburger button { + margin: 0; + text-align: left; + padding: 0; + background-color: inherit; +} + +.blogheader-hamburger button::after { + right: 10px; + margin: auto; + position: absolute; + top: 0.6rem; + opacity: 1; + cursor: pointer; + content: ""; + display: inline-block; + width: 8px; + height: 8px; + border-bottom: 2px solid #fff; + border-right: 2px solid #fff; + transform: rotate(45deg); + transition: all 500ms; + transform-origin: center center; +} \ No newline at end of file diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index 79b9e2d9..515aa670 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -2,6 +2,18 @@ import { getMetadata, decorateIcons, buildBlock, loadBlock, decorateBlock, } from '../../scripts/aem.js'; import { getLocaleInfo } from '../../scripts/scripts.js'; +import { li } from '../../scripts/dom-helpers.js'; + +const isDesktop = window.matchMedia('(min-width: 900px)'); + +function toggleMenu(nav, desktop) { + const expanded = nav.getAttribute('aria-expanded') === 'true'; + const expand = !expanded || desktop.matches; + + nav.setAttribute('aria-expanded', !!expand); + nav.style.visibility = expand ? 'visible' : 'hidden'; + nav.style.display = expand ? 'table' : 'none'; +} export default async function decorate(block) { const blogHeaderMeta = getMetadata('blogheader'); @@ -18,6 +30,7 @@ export default async function decorate(block) { const blogHeader = document.createElement('nav'); blogHeader.id = 'blogheader'; blogHeader.innerHTML = blogHeaderHtml; + blogHeader.querySelector('nav > div').classList.add('blogheader-sections'); blogHeader .querySelector(`li > a[href^='${window.location.pathname}'`) @@ -25,10 +38,23 @@ export default async function decorate(block) { decorateIcons(blogHeader); const searchBlock = buildBlock('blogsearch', { elems: [] }); - blogHeader.querySelector('div').append(searchBlock); + const searchLi = li({ class: 'blogsearch-menu-container' }); + searchLi.appendChild(searchBlock); + const navSections = blogHeader.querySelector('ul'); + navSections.appendChild(searchLi); decorateBlock(searchBlock); loadBlock(searchBlock); + const hamburger = document.createElement('div'); + hamburger.classList.add('blogheader-hamburger'); + hamburger.innerHTML = ``; + hamburger.addEventListener('click', () => toggleMenu(navSections, isDesktop)); + + blogHeader.prepend(hamburger); + isDesktop.addEventListener('change', () => toggleMenu(navSections, isDesktop)); + block.append(blogHeader); } } From 92054e4fcdba8ff89f304af438ec190b516bf21c Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 30 Oct 2023 17:46:48 +0100 Subject: [PATCH 12/16] change to 5 sections, position mobile menu on top of contents --- blocks/blogheader/blogheader.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/blocks/blogheader/blogheader.css b/blocks/blogheader/blogheader.css index 4e7083dc..5f987aab 100644 --- a/blocks/blogheader/blogheader.css +++ b/blocks/blogheader/blogheader.css @@ -5,7 +5,7 @@ main.has-sidebar > div.blogheader-container { } nav#blogheader { - --number-of-menu-items: 4; + --number-of-menu-items: 5; padding: 0; margin: 0; @@ -41,7 +41,7 @@ nav#blogheader li { border-right: 1px solid white; color: white; text-align: center; - padding: 1.5rem 0; + padding: 1.5rem; width: calc(55rem / var(--number-of-menu-items)); } @@ -72,11 +72,19 @@ nav#blogheader p { } @media (max-width: 899px ) { + div.blogheader-wrapper div.blogheader { + position: relative; + } + nav#blogheader { position: relative; + width: 100%; } nav#blogheader div.blogheader-sections { + position: absolute; + z-index: 100; + top: 3.2rem; display: block; } From 6b2d0ccf6bb185b0907a99f69f7c80c9f9c50ae4 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Mon, 30 Oct 2023 17:59:34 +0100 Subject: [PATCH 13/16] l10n for "Menu" button --- blocks/blogheader/blogheader.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index 515aa670..5f205027 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -1,5 +1,5 @@ import { - getMetadata, decorateIcons, buildBlock, loadBlock, decorateBlock, + getMetadata, decorateIcons, buildBlock, loadBlock, decorateBlock, fetchPlaceholders, } from '../../scripts/aem.js'; import { getLocaleInfo } from '../../scripts/scripts.js'; import { li } from '../../scripts/dom-helpers.js'; @@ -25,6 +25,7 @@ export default async function decorate(block) { const blogHeaderResp = await fetch(`${localeInfo.urlPrefix}/blogs/fragments/${blogHeaderPath}.plain.html`); if (blogHeaderResp.ok) { + const placeholdersPromise = fetchPlaceholders(getLocaleInfo().placeholdersPrefix); const blogHeaderHtml = await blogHeaderResp.text(); const blogHeader = document.createElement('nav'); @@ -47,8 +48,10 @@ export default async function decorate(block) { const hamburger = document.createElement('div'); hamburger.classList.add('blogheader-hamburger'); + + const placeholders = await placeholdersPromise; hamburger.innerHTML = ``; hamburger.addEventListener('click', () => toggleMenu(navSections, isDesktop)); From a6318cbda83e1eb8b542303eda1cc48ddc372386 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Tue, 31 Oct 2023 11:57:59 +0100 Subject: [PATCH 14/16] adjust switch point, font styling and margin below blogheader --- blocks/blogheader/blogheader.css | 14 +++++++++----- blocks/blogheader/blogheader.js | 2 +- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/blocks/blogheader/blogheader.css b/blocks/blogheader/blogheader.css index 5f987aab..0ea1e197 100644 --- a/blocks/blogheader/blogheader.css +++ b/blocks/blogheader/blogheader.css @@ -23,17 +23,21 @@ nav#blogheader ul { list-style-type: none; padding: 0; margin: 0; + margin-bottom: 3rem; width: 100%; background-color: var(--text-color); } nav#blogheader li a { - font-size: 1.4rem; + font-size: 1.6rem; + font-family: var(--ff-gilroy-semibold); + font-weight: 400; text-decoration: none; transition: none; background: inherit; color: inherit; - font-weight: 400; + line-height: 1.714; + -webkit-font-smoothing: antialiased; } nav#blogheader li { @@ -41,7 +45,7 @@ nav#blogheader li { border-right: 1px solid white; color: white; text-align: center; - padding: 1.5rem; + padding: 1.5rem 1.2rem; width: calc(55rem / var(--number-of-menu-items)); } @@ -63,7 +67,7 @@ nav#blogheader p { padding: 0; } -@media (min-width: 900px) { +@media (min-width: 768px) { div.blogheader-hamburger { display: none; visibility: hidden; @@ -71,7 +75,7 @@ nav#blogheader p { } } -@media (max-width: 899px ) { +@media (max-width: 767px ) { div.blogheader-wrapper div.blogheader { position: relative; } diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index 5f205027..8096c732 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -4,7 +4,7 @@ import { import { getLocaleInfo } from '../../scripts/scripts.js'; import { li } from '../../scripts/dom-helpers.js'; -const isDesktop = window.matchMedia('(min-width: 900px)'); +const isDesktop = window.matchMedia('(min-width: 768px)'); function toggleMenu(nav, desktop) { const expanded = nav.getAttribute('aria-expanded') === 'true'; From 405b471b87db26a750c96a6ac9e6583252174125 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Tue, 31 Oct 2023 13:31:04 +0100 Subject: [PATCH 15/16] make dom construction more readable, align button text and aria label --- blocks/blogheader/blogheader.js | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index 8096c732..fbc23768 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -2,7 +2,7 @@ import { getMetadata, decorateIcons, buildBlock, loadBlock, decorateBlock, fetchPlaceholders, } from '../../scripts/aem.js'; import { getLocaleInfo } from '../../scripts/scripts.js'; -import { li } from '../../scripts/dom-helpers.js'; +import { li, div, button } from '../../scripts/dom-helpers.js'; const isDesktop = window.matchMedia('(min-width: 768px)'); @@ -43,19 +43,26 @@ export default async function decorate(block) { searchLi.appendChild(searchBlock); const navSections = blogHeader.querySelector('ul'); navSections.appendChild(searchLi); + navSections.setAttribute('aria-expanded', 'true'); decorateBlock(searchBlock); loadBlock(searchBlock); - const hamburger = document.createElement('div'); - hamburger.classList.add('blogheader-hamburger'); - const placeholders = await placeholdersPromise; - hamburger.innerHTML = ``; - hamburger.addEventListener('click', () => toggleMenu(navSections, isDesktop)); - blogHeader.prepend(hamburger); + const menuText = placeholders.mobileMenu || 'Menu'; + blogHeader.prepend( + div({ + class: 'blogheader-hamburger', + }, + button({ + type: 'button', + 'aria-controls': 'nav', + 'aria-label': menuText, + onclick: () => toggleMenu(navSections, isDesktop), + }, menuText), + ), + ); + isDesktop.addEventListener('change', () => toggleMenu(navSections, isDesktop)); block.append(blogHeader); From ea5b7afb357b30b911b681adf704631d9bba4715 Mon Sep 17 00:00:00 2001 From: Ben Peter Date: Tue, 31 Oct 2023 14:38:05 +0100 Subject: [PATCH 16/16] make number of menu sections dynamically determined from content --- blocks/blogheader/blogheader.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blocks/blogheader/blogheader.js b/blocks/blogheader/blogheader.js index fbc23768..2c8e1e82 100644 --- a/blocks/blogheader/blogheader.js +++ b/blocks/blogheader/blogheader.js @@ -37,6 +37,9 @@ export default async function decorate(block) { .querySelector(`li > a[href^='${window.location.pathname}'`) ?.parentNode?.classList.add('active'); + const numberOfSections = blogHeader.querySelectorAll('li').length; + blogHeader.style.setProperty('--number-of-menu-items', numberOfSections); + decorateIcons(blogHeader); const searchBlock = buildBlock('blogsearch', { elems: [] }); const searchLi = li({ class: 'blogsearch-menu-container' });