From 459352d7dddc7de45c571b265f1c4a20ef4f0592 Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Mon, 11 Dec 2023 16:17:48 -0700 Subject: [PATCH 1/8] starter hero slides --- blocks/hero-slides/hero-slides.css | 133 +++++++++++++++++++++++++++++ blocks/hero-slides/hero-slides.js | 125 +++++++++++++++++++++++++++ 2 files changed, 258 insertions(+) create mode 100644 blocks/hero-slides/hero-slides.css create mode 100644 blocks/hero-slides/hero-slides.js diff --git a/blocks/hero-slides/hero-slides.css b/blocks/hero-slides/hero-slides.css new file mode 100644 index 00000000..37887160 --- /dev/null +++ b/blocks/hero-slides/hero-slides.css @@ -0,0 +1,133 @@ +.section.hero-slides-container { + padding: 0; +} + +.section > .hero-slides-wrapper { + max-width: unset; + margin: unset; +} + +.hero-slides { + width: 100%; + position: relative; + aspect-ratio: 600/686; +} + +@media (min-width: 600px) { + .hero-slides { + height: 580px; + } +} + +.hero-slides .slide { + display: flex; + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + flex-direction: column; + background-color: #394c5a; + opacity: 0; + transition: opacity 0.9s ease; +} + +.hero-slides .slide.active { + opacity: 1; + z-index: 2; +} + +@media (min-width: 600px) { + .hero-slides .slide { + flex-direction: row; + } +} + +.hero-slides .slide .image { + flex: 0 0 66%; + height: 100%; +} + +.hero-slides .slide .image img { + object-fit: cover; + object-position: top; + width: 100%; + height: 100%; +} + + +.hero-slides .slide .text { + color: var(--text-color-on-black-background); + align-self: center; + padding: 10px; + display: flex; + flex-direction: column; + justify-content: center; + height: 100%; + + /* font size is relative to screen width, but limited in min and max size. + the actual texts then use `em` to scale with this font size. + */ + font-size: clamp(11px, 1.5vw, 16px); +} + +@media (min-width: 600px) { + .hero-slides .slide .text { + height: 100%; + padding: 0 40px; + } +} + +.hero-slides .slide .text .price { + text-transform: uppercase; + color: var(--text-color-secondary-on-black-background); +} + +.hero-slides .slide .text .city { + margin: 0; + font-size: 1.5em; + line-height: 1.2; + font-weight: bold; +} + +@media screen and (min-width: 600px) { + .hero-slides .slide .text .city { + font-size: 2.5em; + line-height: 1; + } +} + +.hero-slides .slide .text .link { + text-transform: uppercase; + color: var(--text-color-secondary-on-black-background); +} + + +@media (min-width: 600px) { + .hero-slides .slideshow-buttons { + position: absolute; + bottom: 4rem; + right: 7%; + height: 20px; + display: flex; + justify-content: center; + gap: 0.7vw; + z-index: 3; + } + + .hero-slides .slideshow-buttons button { + height: 1.1vw; + aspect-ratio: 1/1; + padding: 0; + margin: 0; + border-radius: 50%; + border: none; + background-color: #bbb; + transition: background-color 0.3s ease; + } + + .hero-slides .slideshow-buttons button.active { + background-color: white; + } +} + diff --git a/blocks/hero-slides/hero-slides.js b/blocks/hero-slides/hero-slides.js new file mode 100644 index 00000000..d4ba1902 --- /dev/null +++ b/blocks/hero-slides/hero-slides.js @@ -0,0 +1,125 @@ +import { createOptimizedPicture, readBlockConfig } from '../../scripts/lib-franklin.js'; + +/** + * Slideshow with luxury listings. Supports swiping on touch screens. + * Also supports manually adding content into the block. + * @param block + */ +export default async function decorate(block) { + const config = readBlockConfig(block); + const listings = await fetchListings(config); + block.textContent = ''; + const { goToSlide } = setupSlideControls(block); + + const slideshowButtons = document.createElement('div'); + slideshowButtons.classList.add('slideshow-buttons'); + + listings.forEach((listing, index) => { + const slide = document.createElement('a'); + slide.classList.add('slide'); + slide.href = listing.path; + + const imageSizes = [ + // desktop + { media: '(min-width: 600px)', height: '600' }, + // tablet and mobile sizes: + { media: '(min-width: 400px)', height: '600' }, + { width: '400' }, + ]; + const picture = listing.picture || createOptimizedPicture( + listing.image, + listing.city, + index === 0, + imageSizes, + ); + slide.innerHTML = ` +
${picture.outerHTML}
+
+

${plainText(listing.city)}

+

${plainText(listing.price)}

+ LEARN MORE +
`; + block.append(slide); + + const button = document.createElement('button'); + button.ariaLabel = `go to listing in ${listing.city}`; + button.addEventListener('click', () => goToSlide(index)); + slideshowButtons.append(button); + + if (index === 0) { + slide.classList.add('active'); + button.classList.add('active'); + } + }); + + block.append(slideshowButtons); +} + +async function fetchListings(config) { + const resp = await fetch(`${window.hlx.codeBasePath}/listings.json}`); + // eslint-disable-next-line no-return-await + return (await resp.json()).data; +} + +function setupSlideControls(block) { + function goToSlide(index) { + block.querySelector('.slide.active').classList.remove('active'); + [...block.querySelectorAll('.slide')].at(index).classList.add('active'); + + block.querySelector('.slideshow-buttons .active')?.classList.remove('active'); + [...block.querySelectorAll('.slideshow-buttons button')].at(index).classList.add('active'); + + // automatically advance slides. Reset timer when user interacts with the slideshow + autoplaySlides(); + } + + let autoSlideInterval = null; + function autoplaySlides() { + clearInterval(autoSlideInterval); + autoSlideInterval = setInterval(() => advanceSlides(+1), 3000); + } + + function advanceSlides(diff) { + const allSlides = [...block.querySelectorAll('.slide')]; + const activeSlide = block.querySelector('.slide.active'); + const currentIndex = allSlides.indexOf(activeSlide); + + const newSlideIndex = (allSlides.length + currentIndex + diff) % allSlides.length; + goToSlide(newSlideIndex); + } + + /** detect swipe gestures on touch screens to advance slides */ + function gestureStart(event) { + const touchStartX = event.changedTouches[0].screenX; + + function gestureEnd(endEvent) { + const touchEndX = endEvent.changedTouches[0].screenX; + const delta = touchEndX - touchStartX; + if (delta < -5) { + advanceSlides(+1); + } else if (delta > 5) { + advanceSlides(-1); + } else { + // finger not moved enough, do nothing + } + } + + block.addEventListener('touchend', gestureEnd, { once: true }); + } + + block.addEventListener('touchstart', gestureStart, { passive: true }); + + autoplaySlides(); + return { goToSlide }; +} + +/** + * make text safe to use in innerHTML + * @param text any string + * @return {string} sanitized html string + */ +function plainText(text) { + const fragment = document.createElement('div'); + fragment.append(text); + return fragment.innerHTML; +} From c4e3e4422c9b27f5202a6410d6bca2b46197abce Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Tue, 9 Jan 2024 17:31:04 -0700 Subject: [PATCH 2/8] mocked listings --- blocks/hero-slides/hero-slides.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/blocks/hero-slides/hero-slides.js b/blocks/hero-slides/hero-slides.js index d4ba1902..08f4e090 100644 --- a/blocks/hero-slides/hero-slides.js +++ b/blocks/hero-slides/hero-slides.js @@ -17,7 +17,7 @@ export default async function decorate(block) { listings.forEach((listing, index) => { const slide = document.createElement('a'); slide.classList.add('slide'); - slide.href = listing.path; + slide.href = listing.PdpPath; const imageSizes = [ // desktop @@ -27,22 +27,22 @@ export default async function decorate(block) { { width: '400' }, ]; const picture = listing.picture || createOptimizedPicture( - listing.image, - listing.city, + config[listing.ListingId], + listing.City, index === 0, imageSizes, ); slide.innerHTML = `
${picture.outerHTML}
-

${plainText(listing.city)}

-

${plainText(listing.price)}

- LEARN MORE +

${plainText(listing.City)}

+

${plainText(listing.ListPriceUS)}

+ LEARN MORE
`; block.append(slide); const button = document.createElement('button'); - button.ariaLabel = `go to listing in ${listing.city}`; + button.ariaLabel = `go to listing in ${listing.City}`; button.addEventListener('click', () => goToSlide(index)); slideshowButtons.append(button); @@ -56,7 +56,7 @@ export default async function decorate(block) { } async function fetchListings(config) { - const resp = await fetch(`${window.hlx.codeBasePath}/listings.json}`); + const resp = await fetch(`${window.hlx.codeBasePath}/drafts/rrusher/listings.json`); // eslint-disable-next-line no-return-await return (await resp.json()).data; } From a5070bcc2a2e81c9b720c50b20152facb8254cdb Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Fri, 12 Jan 2024 16:44:38 -0700 Subject: [PATCH 3/8] css layout --- blocks/hero-slides/hero-slides.css | 154 ++++++++++++++++++----------- blocks/hero-slides/hero-slides.js | 38 ++++--- icons/lux_mark_classic_blk.svg | 1 + 3 files changed, 123 insertions(+), 70 deletions(-) create mode 100644 icons/lux_mark_classic_blk.svg diff --git a/blocks/hero-slides/hero-slides.css b/blocks/hero-slides/hero-slides.css index 37887160..0b6e0b59 100644 --- a/blocks/hero-slides/hero-slides.css +++ b/blocks/hero-slides/hero-slides.css @@ -1,5 +1,6 @@ .section.hero-slides-container { padding: 0; + max-width: var(--wide-page-width); } .section > .hero-slides-wrapper { @@ -10,13 +11,16 @@ .hero-slides { width: 100%; position: relative; - aspect-ratio: 600/686; + height: 600px; } -@media (min-width: 600px) { - .hero-slides { - height: 580px; - } +.hero-slides.block.under-nav { + margin-top: calc(var(--nav-height) * -1); + background: linear-gradient(180deg, rgba(0 0 0 / 50%) 0, rgba(0 0 0 / 15%) 50px, transparent 100px, transparent 100%); +} + +.hero-slides.block.has-content.under-nav { + background: linear-gradient(180deg, rgba(0 0 0 / 50%) 0, rgba(0 0 0 / 15%) 100px, rgba(0 0 0 / 15%) 100%); } .hero-slides .slide { @@ -27,7 +31,6 @@ top: 0; left: 0; flex-direction: column; - background-color: #394c5a; opacity: 0; transition: opacity 0.9s ease; } @@ -37,97 +40,138 @@ z-index: 2; } -@media (min-width: 600px) { - .hero-slides .slide { - flex-direction: row; - } -} - .hero-slides .slide .image { - flex: 0 0 66%; height: 100%; + width: 100%; } .hero-slides .slide .image img { object-fit: cover; - object-position: top; width: 100%; height: 100%; } +.hero-slides .slide .row { + width: 100%; + height: 120px; + flex-flow: column wrap; + align-content: space-between; + justify-content: flex-start; + align-items: stretch; + padding-left: 0; + padding-right: 0; + display: flex; + position: absolute; + top: auto; + bottom: 0%; + left: 0%; + right: 0%; +} +.hero-slides .slide .row .logo { + width: 33.33%; + height: inherit; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.hero-slides .slide .row .logo img { + filter: invert(); + height: 100%; +} .hero-slides .slide .text { color: var(--text-color-on-black-background); align-self: center; - padding: 10px; + padding: 30px; display: flex; flex-direction: column; justify-content: center; height: 100%; - + background-color: black; + width: 66.67%; /* font size is relative to screen width, but limited in min and max size. the actual texts then use `em` to scale with this font size. */ font-size: clamp(11px, 1.5vw, 16px); } -@media (min-width: 600px) { - .hero-slides .slide .text { - height: 100%; - padding: 0 40px; - } +.hero-slides .slide .text * { + margin: 0; + font-size: var(--body-font-size-m); + line-height: var(--line-height-m); + color: var(--text-color-secondary-on-black-background); } .hero-slides .slide .text .price { - text-transform: uppercase; - color: var(--text-color-secondary-on-black-background); + font-weight: var(--font-weight-bold); } -.hero-slides .slide .text .city { - margin: 0; - font-size: 1.5em; - line-height: 1.2; - font-weight: bold; +.hero-slides .slide .text .link { + font-size: var(--body-font-size-s); } -@media screen and (min-width: 600px) { - .hero-slides .slide .text .city { - font-size: 2.5em; - line-height: 1; - } +.hero-slides .slideshow-buttons { + position: absolute; + bottom: 4rem; + right: 7%; + height: 20px; + display: flex; + justify-content: center; + gap: 1.5vw; + z-index: 3; +} +.hero-slides .slideshow-buttons div { + padding-top: 5px; + font-size: var(--body-font-size-xs); } -.hero-slides .slide .text .link { - text-transform: uppercase; - color: var(--text-color-secondary-on-black-background); +.hero-slides .slideshow-buttons img { + cursor: pointer; } +.hero-slides .slideshow-buttons .prev { + transform: rotateY(180deg); +} -@media (min-width: 600px) { - .hero-slides .slideshow-buttons { - position: absolute; - bottom: 4rem; - right: 7%; - height: 20px; - display: flex; +@media (min-width: 992px) { + .hero-slides .slide { + flex-direction: row; + } + + .hero-slides .slide .row { + width: 33.33%; + height: 340px; + flex: 0 auto; justify-content: center; - gap: 0.7vw; - z-index: 3; + display: flex; + position: absolute; + bottom: 0%; + left: auto; + right: 0%; + flex-direction: column; } - .hero-slides .slideshow-buttons button { - height: 1.1vw; - aspect-ratio: 1/1; + .hero-slides .slide .row .logo { + height: 200px; padding: 0; - margin: 0; - border-radius: 50%; - border: none; - background-color: #bbb; - transition: background-color 0.3s ease; + width: 100%; } - .hero-slides .slideshow-buttons button.active { - background-color: white; + .hero-slides .slide .row .logo img { + height: 60%; + } + + .hero-slides .slide .text { + height: 140px; + padding: 0 30px; + width: 100%; } } +@media screen and (min-width: 1200px) { + .hero.block.under-nav { + margin-top: -100px; + } +} diff --git a/blocks/hero-slides/hero-slides.js b/blocks/hero-slides/hero-slides.js index 08f4e090..bb4af555 100644 --- a/blocks/hero-slides/hero-slides.js +++ b/blocks/hero-slides/hero-slides.js @@ -9,15 +9,26 @@ export default async function decorate(block) { const config = readBlockConfig(block); const listings = await fetchListings(config); block.textContent = ''; - const { goToSlide } = setupSlideControls(block); + const { advanceSlides } = setupSlideControls(block); + const count = document.createElement('div'); + count.innerText = `1 of ${listings.length}`; const slideshowButtons = document.createElement('div'); slideshowButtons.classList.add('slideshow-buttons'); + const prevBtn = document.createElement('img'); + prevBtn.classList.add('prev'); + prevBtn.src = '/icons/chevron-right-white.svg'; + prevBtn.addEventListener('click', () => advanceSlides(1)); + const nextBtn = document.createElement('img'); + nextBtn.classList.add('next'); + nextBtn.src = '/icons/chevron-right-white.svg'; + nextBtn.addEventListener('click', () => advanceSlides(-1)); + + slideshowButtons.append(count, prevBtn, nextBtn); listings.forEach((listing, index) => { - const slide = document.createElement('a'); + const slide = document.createElement('div'); slide.classList.add('slide'); - slide.href = listing.PdpPath; const imageSizes = [ // desktop @@ -34,21 +45,20 @@ export default async function decorate(block) { ); slide.innerHTML = `
${picture.outerHTML}
+
+
-

${plainText(listing.City)}

+

${plainText(listing.City)}, ${plainText(listing.StateOrProvince)}

${plainText(listing.ListPriceUS)}

LEARN MORE +
`; block.append(slide); - const button = document.createElement('button'); - button.ariaLabel = `go to listing in ${listing.City}`; - button.addEventListener('click', () => goToSlide(index)); - slideshowButtons.append(button); - if (index === 0) { slide.classList.add('active'); - button.classList.add('active'); } }); @@ -65,10 +75,8 @@ function setupSlideControls(block) { function goToSlide(index) { block.querySelector('.slide.active').classList.remove('active'); [...block.querySelectorAll('.slide')].at(index).classList.add('active'); - - block.querySelector('.slideshow-buttons .active')?.classList.remove('active'); - [...block.querySelectorAll('.slideshow-buttons button')].at(index).classList.add('active'); - + const paging = block.querySelector('.slideshow-buttons div'); + paging.innerText = paging.innerText.replace(/\d+/, index + 1); // automatically advance slides. Reset timer when user interacts with the slideshow autoplaySlides(); } @@ -110,7 +118,7 @@ function setupSlideControls(block) { block.addEventListener('touchstart', gestureStart, { passive: true }); autoplaySlides(); - return { goToSlide }; + return { advanceSlides }; } /** diff --git a/icons/lux_mark_classic_blk.svg b/icons/lux_mark_classic_blk.svg new file mode 100644 index 00000000..058d3a5e --- /dev/null +++ b/icons/lux_mark_classic_blk.svg @@ -0,0 +1 @@ + \ No newline at end of file From 089882702b16cd4630a8d9c76dceba79e360444e Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Fri, 12 Jan 2024 16:47:42 -0700 Subject: [PATCH 4/8] hide paging --- blocks/hero-slides/hero-slides.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/blocks/hero-slides/hero-slides.css b/blocks/hero-slides/hero-slides.css index 0b6e0b59..dc799970 100644 --- a/blocks/hero-slides/hero-slides.css +++ b/blocks/hero-slides/hero-slides.css @@ -123,8 +123,7 @@ z-index: 3; } .hero-slides .slideshow-buttons div { - padding-top: 5px; - font-size: var(--body-font-size-xs); + display: none; } .hero-slides .slideshow-buttons img { @@ -174,4 +173,10 @@ .hero.block.under-nav { margin-top: -100px; } + + .hero-slides .slideshow-buttons div { + display: block; + padding-top: 5px; + font-size: var(--body-font-size-xs); + } } From 2508974f02092f6564e692fd2c90218dfffb4af9 Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Tue, 16 Jan 2024 08:37:47 -0700 Subject: [PATCH 5/8] rearrange functions --- blocks/hero-slides/hero-slides.js | 132 +++++++++++++++--------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/blocks/hero-slides/hero-slides.js b/blocks/hero-slides/hero-slides.js index bb4af555..ecfdc9a0 100644 --- a/blocks/hero-slides/hero-slides.js +++ b/blocks/hero-slides/hero-slides.js @@ -1,69 +1,4 @@ -import { createOptimizedPicture, readBlockConfig } from '../../scripts/lib-franklin.js'; - -/** - * Slideshow with luxury listings. Supports swiping on touch screens. - * Also supports manually adding content into the block. - * @param block - */ -export default async function decorate(block) { - const config = readBlockConfig(block); - const listings = await fetchListings(config); - block.textContent = ''; - const { advanceSlides } = setupSlideControls(block); - - const count = document.createElement('div'); - count.innerText = `1 of ${listings.length}`; - const slideshowButtons = document.createElement('div'); - slideshowButtons.classList.add('slideshow-buttons'); - const prevBtn = document.createElement('img'); - prevBtn.classList.add('prev'); - prevBtn.src = '/icons/chevron-right-white.svg'; - prevBtn.addEventListener('click', () => advanceSlides(1)); - const nextBtn = document.createElement('img'); - nextBtn.classList.add('next'); - nextBtn.src = '/icons/chevron-right-white.svg'; - nextBtn.addEventListener('click', () => advanceSlides(-1)); - - slideshowButtons.append(count, prevBtn, nextBtn); - - listings.forEach((listing, index) => { - const slide = document.createElement('div'); - slide.classList.add('slide'); - - const imageSizes = [ - // desktop - { media: '(min-width: 600px)', height: '600' }, - // tablet and mobile sizes: - { media: '(min-width: 400px)', height: '600' }, - { width: '400' }, - ]; - const picture = listing.picture || createOptimizedPicture( - config[listing.ListingId], - listing.City, - index === 0, - imageSizes, - ); - slide.innerHTML = ` -
${picture.outerHTML}
-
- -
-

${plainText(listing.City)}, ${plainText(listing.StateOrProvince)}

-

${plainText(listing.ListPriceUS)}

- LEARN MORE -
-
`; - block.append(slide); - - if (index === 0) { - slide.classList.add('active'); - } - }); - - block.append(slideshowButtons); -} +import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; async function fetchListings(config) { const resp = await fetch(`${window.hlx.codeBasePath}/drafts/rrusher/listings.json`); @@ -131,3 +66,68 @@ function plainText(text) { fragment.append(text); return fragment.innerHTML; } + +/** + * Slideshow with luxury listings. Supports swiping on touch screens. + * Also supports manually adding content into the block. + * @param block + */ +export default async function decorate(block) { + const config = readBlockConfig(block); + const listings = await fetchListings(config); + block.textContent = ''; + const { advanceSlides } = setupSlideControls(block); + + const count = document.createElement('div'); + count.innerText = `1 of ${listings.length}`; + const slideshowButtons = document.createElement('div'); + slideshowButtons.classList.add('slideshow-buttons'); + const prevBtn = document.createElement('img'); + prevBtn.classList.add('prev'); + prevBtn.src = '/icons/chevron-right-white.svg'; + prevBtn.addEventListener('click', () => advanceSlides(1)); + const nextBtn = document.createElement('img'); + nextBtn.classList.add('next'); + nextBtn.src = '/icons/chevron-right-white.svg'; + nextBtn.addEventListener('click', () => advanceSlides(-1)); + + slideshowButtons.append(count, prevBtn, nextBtn); + + listings.forEach((listing, index) => { + const slide = document.createElement('div'); + slide.classList.add('slide'); + + const imageSizes = [ + // desktop + { media: '(min-width: 600px)', height: '600' }, + // tablet and mobile sizes: + { media: '(min-width: 400px)', height: '600' }, + { width: '400' }, + ]; + const picture = listing.picture || createOptimizedPicture( + config[listing.ListingId], + listing.City, + index === 0, + imageSizes, + ); + slide.innerHTML = ` +
${picture.outerHTML}
+
+ +
+

${plainText(listing.City)}, ${plainText(listing.StateOrProvince)}

+

${plainText(listing.ListPriceUS)}

+ LEARN MORE +
+
`; + block.append(slide); + + if (index === 0) { + slide.classList.add('active'); + } + }); + + block.append(slideshowButtons); +} From 970fd603df017f29de5a5de00ced79553ce69838 Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Tue, 16 Jan 2024 08:45:07 -0700 Subject: [PATCH 6/8] disable linting on specific functions --- blocks/hero-slides/hero-slides.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/blocks/hero-slides/hero-slides.js b/blocks/hero-slides/hero-slides.js index ecfdc9a0..ff46460c 100644 --- a/blocks/hero-slides/hero-slides.js +++ b/blocks/hero-slides/hero-slides.js @@ -1,5 +1,6 @@ import { createOptimizedPicture, readBlockConfig } from '../../scripts/aem.js'; +// eslint-disable-next-line no-unused-vars async function fetchListings(config) { const resp = await fetch(`${window.hlx.codeBasePath}/drafts/rrusher/listings.json`); // eslint-disable-next-line no-return-await @@ -13,12 +14,14 @@ function setupSlideControls(block) { const paging = block.querySelector('.slideshow-buttons div'); paging.innerText = paging.innerText.replace(/\d+/, index + 1); // automatically advance slides. Reset timer when user interacts with the slideshow + // eslint-disable-next-line no-use-before-define autoplaySlides(); } let autoSlideInterval = null; function autoplaySlides() { clearInterval(autoSlideInterval); + // eslint-disable-next-line no-use-before-define autoSlideInterval = setInterval(() => advanceSlides(+1), 3000); } @@ -74,7 +77,7 @@ function plainText(text) { */ export default async function decorate(block) { const config = readBlockConfig(block); - const listings = await fetchListings(config); + const listings = await fetchListings(config); block.textContent = ''; const { advanceSlides } = setupSlideControls(block); From 2a87b9a94f71a12c7e471a86dfc707fd756e96c4 Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Tue, 16 Jan 2024 08:50:16 -0700 Subject: [PATCH 7/8] css linting --- blocks/hero-slides/hero-slides.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/blocks/hero-slides/hero-slides.css b/blocks/hero-slides/hero-slides.css index dc799970..fece4c15 100644 --- a/blocks/hero-slides/hero-slides.css +++ b/blocks/hero-slides/hero-slides.css @@ -45,6 +45,14 @@ width: 100%; } +.hero-slides .slideshow-buttons div { + display: none; +} + +.hero-slides .slideshow-buttons img { + cursor: pointer; +} + .hero-slides .slide .image img { object-fit: cover; width: 100%; @@ -67,6 +75,7 @@ left: 0%; right: 0%; } + .hero-slides .slide .row .logo { width: 33.33%; height: inherit; @@ -91,6 +100,7 @@ height: 100%; background-color: black; width: 66.67%; + /* font size is relative to screen width, but limited in min and max size. the actual texts then use `em` to scale with this font size. */ @@ -122,13 +132,6 @@ gap: 1.5vw; z-index: 3; } -.hero-slides .slideshow-buttons div { - display: none; -} - -.hero-slides .slideshow-buttons img { - cursor: pointer; -} .hero-slides .slideshow-buttons .prev { transform: rotateY(180deg); From dae2de87d8661c30ac1b2a3a23eef1235630d61e Mon Sep 17 00:00:00 2001 From: Rob Rusher Date: Wed, 17 Jan 2024 16:36:32 -0700 Subject: [PATCH 8/8] style updates --- blocks/header/luxury-collection-template.css | 4 ++++ blocks/hero-slides/hero-slides.css | 7 +++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/blocks/header/luxury-collection-template.css b/blocks/header/luxury-collection-template.css index f84932a2..59e9a2db 100644 --- a/blocks/header/luxury-collection-template.css +++ b/blocks/header/luxury-collection-template.css @@ -3,6 +3,10 @@ color: initial; } +.light-nav.luxury-collection header * { + background: transparent; +} + .luxury-collection .header.block nav .nav-sections { background-color: var(--primary-color); } diff --git a/blocks/hero-slides/hero-slides.css b/blocks/hero-slides/hero-slides.css index fece4c15..21405236 100644 --- a/blocks/hero-slides/hero-slides.css +++ b/blocks/hero-slides/hero-slides.css @@ -74,6 +74,7 @@ bottom: 0%; left: 0%; right: 0%; + background: transparent; } .hero-slides .slide .row .logo { @@ -83,15 +84,17 @@ justify-content: center; align-items: center; padding: 20px; + background: transparent; } .hero-slides .slide .row .logo img { filter: invert(); height: 100%; + background: transparent; } .hero-slides .slide .text { - color: var(--text-color-on-black-background); + color: var(--white); align-self: center; padding: 30px; display: flex; @@ -111,7 +114,7 @@ margin: 0; font-size: var(--body-font-size-m); line-height: var(--line-height-m); - color: var(--text-color-secondary-on-black-background); + color: var(--white); } .hero-slides .slide .text .price {