Skip to content

Commit

Permalink
Countdown in hero #66 (#264)
Browse files Browse the repository at this point in the history 
* add countdown timer in hero block
* refactor gaps, UI improvements for all variants
* fix button padding for tablet
* better text wrapping
* fix hero container takes at least the height of the viewport, and in case of overflow content, the height expands
* update hero gradient
* add variant to right align background in hero
* refactor better class names for positioning
* fix hero background
* add play icon

---------

Co-authored-by: Syb Wartna <sybren.wartna@cognizant.com>
  • Loading branch information
@taimurCognizant @cogniSyb
taimurCognizant and cogniSyb committed Dec 12, 2023
1 parent b91788b commit 072db80
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 24 deletions.
98 changes: 80 additions & 18 deletions blocks/v2-hero/v2-hero.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,24 +26,27 @@
--scroll-dot-width: 9px;
--v2-hero-padding: 32px;

height: calc(100vh - var(--nav-height));
min-height: calc(100vh - var(--nav-height));
overflow: hidden;
position: relative;
background-color: var(--c-grey-1);
}

/* Reduce the Hero height by the inpage-navigation height */
.v2-inpage-navigation-wrapper + .v2-hero-container .v2-hero {
height: calc(100vh - (var(--nav-height) + var(--inpage-navigation-height) - 2px));
min-height: calc(100vh - (var(--nav-height) + var(--inpage-navigation-height) - 2px));
}

@supports (height: 1svh) {
.v2-hero {
height: calc(100svh - var(--nav-height));
min-height: calc(100svh - var(--nav-height));
}

.v2-inpage-navigation-wrapper + .v2-hero-container .v2-hero {
height: calc(100svh - (var(--nav-height) + var(--inpage-navigation-height) - 2px));
.v2-inpage-navigation-wrapper + .v2-hero-container .v2-hero,
.v2-inpage-navigation-wrapper + .v2-hero-container .v2-hero__content-wrapper {
min-height: calc(100svh - (var(--nav-height) + var(--inpage-navigation-height) - 2px));
}

}

.section.v2-hero-container {
Expand All @@ -58,15 +61,19 @@
width: 100%;
}

.v2-hero--background-right .v2-hero__image, .v2-hero--background-right .v2-hero__video {
object-position: center right;
}

.v2-hero__content-wrapper {
color: var(--c-main-black);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: calc(100svh - var(--nav-height));
padding: var(--v2-hero-padding);
padding-bottom: calc((var(--v2-hero-padding) * 2) + var(--scroll-icon-height));
background: linear-gradient(180deg, rgb(255 255 255 / 50%) 0%, rgb(255 255 255 / 0%) 100%);
background: linear-gradient(180deg, rgb(255 255 255 / 40%) 0%, rgb(255 255 255 / 0%) 100%);
}

.v2-hero--centered .v2-hero__content-wrapper {
Expand All @@ -75,18 +82,22 @@
text-align: center;
}

.v2-hero--left .v2-hero__content-wrapper {
.v2-hero--left-center .v2-hero__content-wrapper {
justify-content: center;
}

.v2-hero--bottom .v2-hero__content-wrapper {
.v2-hero--center-bottom .v2-hero__content-wrapper {
align-items: center;
justify-content: flex-end;
text-align: center;
}

.v2-hero--dark {
background-color: var(--c-grey-4);
}

.v2-hero--dark .v2-hero__content-wrapper {
background: linear-gradient(180deg, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 0%) 100%);
background: linear-gradient(180deg, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 0%) 100%);
color: var(--c-white);
}

Expand All @@ -95,11 +106,11 @@
}

.v2-hero__content > * {
max-width: 600px;
max-width: var(--text-block-max-width);
}

.v2-hero--centered .v2-hero__content > *,
.v2-hero--bottom .v2-hero__content > * {
.v2-hero--center-bottom .v2-hero__content > * {
margin-left: auto;
margin-right: auto;
}
Expand All @@ -109,18 +120,27 @@
font-size: 70px;
line-height: 85%;
letter-spacing: 5px;
margin-bottom: 0;
text-wrap: balance;
}

.v2-hero__title + p {
margin-top: 8px;
}

.v2-hero__title,
.v2-hero__content p {
margin: 10px 0 0;
margin: 0;
}

.v2-hero__buttons-wrapper {
display: inline-flex;
flex-flow: column wrap;
gap: 8px;
margin-top: 24px;
gap: 24px;
padding: 24px 0 0;
}

.v2-hero__buttons-wrapper .button {
width: max-content;
}

/* Scroll icon */
Expand All @@ -146,6 +166,48 @@
width: var(--scroll-dot-width);
}

/* START - Countdown */

.v2-hero__countdown {
display: flex;
gap: 32px;
padding: 24px 0;
}

.v2-hero--centered .v2-hero__countdown, .v2-hero--center-bottom .v2-hero__countdown {
justify-content: center;
}

.v2-hero__countdown-segment {
position: relative;
flex-basis: 50px;
text-align: center;
}

.v2-hero__countdown-segment + .v2-hero__countdown-segment::before {
content: ":";
position: absolute;
font: 400 var(--f-heading-3-5-font-size) / var(--f-heading-3-5-line-height) var(--ff-volvo-novum-medium);
top: 0;
left: -16px;
transform: translate(-50%, 0);
}

.v2-hero__countdown-number {
font: 400 var(--f-heading-3-5-font-size) / var(--f-heading-3-5-line-height) var(--ff-volvo-novum-medium);
letter-spacing: 0.25px;
font-feature-settings: 'tnum';
}

.v2-hero__countdown-label {
font: 400 var(--f-caption-font-size) / var(--f-caption-line-height) var(--ff-volvo-novum);
letter-spacing: var(--f-caption-letter-spacing);
text-transform: capitalize;
}

/* END - Countdown */


@media (min-width: 744px) {
.v2-hero {
--v2-hero-padding: 50px;
Expand All @@ -158,7 +220,7 @@
.v2-hero__title {
font-size: 92px;
line-height: 100%;
letter-spacing: -1.15px;
letter-spacing: 6.5px;
}

.v2-hero__buttons-wrapper {
Expand All @@ -175,6 +237,6 @@
.v2-hero__title {
font-size: 100px;
line-height: 85%;
letter-spacing: 2px;
letter-spacing: 7px;
}
}
81 changes: 75 additions & 6 deletions blocks/v2-hero/v2-hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,49 @@ import {
createVideo,
} from '../../scripts/video-helper.js';
import {
createElement,
removeEmptyTags,
variantsClassesToBEM,
createElement, getTextLabel, removeEmptyTags, variantsClassesToBEM,
} from '../../scripts/common.js';

const variantClasses = ['centered', 'left', 'bottom', 'dark'];
const variantClasses = ['centered', 'left-center', 'center-bottom', 'dark', 'background-right'];
let intervalId = null;
const blockName = 'v2-hero';

export default async function decorate(block) {
const blockName = 'v2-hero';
function updateCountdownElement(block, elementId, value, label) {
const element = block.querySelector(`#${elementId}`);
element.textContent = value.toString().padStart(2, '0');
element.nextElementSibling.textContent = label;
}

function updateCountdown(eventTime, block) {
const now = new Date();
const diff = eventTime - now;

// Check if the event time has passed
if (diff <= 0) {
block.querySelector(`.${blockName}__countdown-wrapper`)?.remove();
clearInterval(intervalId);
return;
}

// Calculate time left
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

// Format labels
const dayLabel = days === 1 ? getTextLabel('day') : `${getTextLabel('day')}s`;
const hourLabel = hours === 1 ? getTextLabel('hour') : `${getTextLabel('hour')}s`;
const minuteLabel = minutes === 1 ? getTextLabel('minute') : `${getTextLabel('minute')}s`;
const secondLabel = seconds === 1 ? getTextLabel('second') : `${getTextLabel('second')}s`;

updateCountdownElement(block, 'days', days, dayLabel);
updateCountdownElement(block, 'hours', hours, hourLabel);
updateCountdownElement(block, 'minutes', minutes, minuteLabel);
updateCountdownElement(block, 'seconds', seconds, secondLabel);
}

export default async function decorate(block) {
// add Hero variant classnames
variantsClassesToBEM(block.classList, variantClasses, blockName);

Expand Down Expand Up @@ -45,6 +78,38 @@ export default async function decorate(block) {
const content = block.querySelector(':scope > div > div');
content.classList.add(`${blockName}__content`);

// Countdown timer
const blockSection = block.parentElement?.parentElement;
if (blockSection && blockSection.dataset?.countdownDate) {
const countDownWrapper = createElement('div', { classes: `${blockName}__countdown-wrapper` });
countDownWrapper.innerHTML = `<div class="${blockName}__countdown">
<div class="${blockName}__countdown-segment">
<div id="days" class="${blockName}__countdown-number">00</div>
<div class="${blockName}__countdown-label">Days</div>
</div>
<div class="${blockName}__countdown-segment">
<div id="hours" class="${blockName}__countdown-number">00</div>
<div class="${blockName}__countdown-label">Hours</div>
</div>
<div class="${blockName}__countdown-segment">
<div id="minutes" class="${blockName}__countdown-number">00</div>
<div class="${blockName}__countdown-label">Minutes</div>
</div>
<div class="${blockName}__countdown-segment">
<div id="seconds" class="${blockName}__countdown-number">00</div>
<div class="${blockName}__countdown-label">Seconds</div>
</div>
</div>`;
content.prepend(countDownWrapper);

const eventTimeIso = blockSection.dataset.countdownDate;
const eventTime = new Date(eventTimeIso);
updateCountdown(eventTime, block);
intervalId = setInterval(() => {
updateCountdown(eventTime, block);
}, 1000);
}

// convert all headings to h1
const headings = [...content.querySelectorAll('h1, h2, h3, h4, h5, h6')];
headings.forEach((heading) => {
Expand All @@ -58,6 +123,10 @@ export default async function decorate(block) {
}
});

// render all paragraph as H6 with the class
const paragraphs = [...content.querySelectorAll('p')];
paragraphs.forEach((paragraph) => paragraph.classList.add('h6'));

const buttonsWrapper = createElement('div', { classes: `${blockName}__buttons-wrapper` });
const ctaButtons = content.querySelectorAll('.button-container > a');
[...ctaButtons].forEach((b, i) => {
Expand Down
3 changes: 3 additions & 0 deletions icons/play.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions placeholder.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,22 @@
"Key": "vinformat-length",
"Text": "Please fill out this field"
},
{
"Key": "day",
"Text": "day"
},
{
"Key": "hour",
"Text": "hour"
},
{
"Key": "minute",
"Text": "minute"
},
{
"Key": "second",
"Text": "second"
},
{
"Key": "Close",
"Text": "Close"
Expand Down

0 comments on commit 072db80

Please sign in to comment.