Skip to content

Commit

Permalink
Merge pull request hlxsites#1157 from hlxsites/1134-rebrand-blog-detail
Browse files Browse the repository at this point in the history 
1130 Updated for blog details page rebrand
  • Loading branch information
@sharanagoudapatil
sharanagoudapatil authored Jun 18, 2024
2 parents 8b4fe94 + abae4bd commit 946278f
Show file tree
Hide file tree
Showing 18 changed files with 460 additions and 355 deletions.
126 changes: 126 additions & 0 deletions blocks/article-info/article-info.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
.article-info-wrapper :is(.col-span-1) {
grid-column: span 1 / span 1
}

.article-info-wrapper :is(.col-span-2) {
grid-column: span 2 / span 2
}

.article-info-wrapper :is(.mx-auto) {
margin-left: auto;
margin-right: auto
}

.article-info-wrapper :is(.my-4) {
margin-top: 1rem;
margin-bottom: 1rem
}

.article-info-wrapper :is(.mr-4) {
margin-right: 1rem
}

.article-info-wrapper :is(.mr-7) {
margin-right: 1.75rem
}

.article-info-wrapper :is(.mt-4) {
margin-top: 1rem
}

.article-info-wrapper :is(.block) {
display: block
}

.article-info-wrapper :is(.flex) {
display: flex
}

.article-info-wrapper :is(.hidden) {
display: none
}

.article-info-wrapper :is(.h-16) {
height: 4rem
}

.article-info-wrapper :is(.w-16) {
width: 4rem
}

.article-info-wrapper :is(.w-full) {
width: 100%
}

.article-info-wrapper :is(.w-max) {
width: -moz-max-content;
width: max-content
}

.article-info-wrapper :is(.max-w-4xl) {
max-width: 56rem
}

.article-info-wrapper :is(.items-center) {
align-items: center
}

.article-info-wrapper :is(.justify-start) {
justify-content: flex-start
}

.article-info-wrapper :is(.justify-end) {
justify-content: flex-end
}

.article-info-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}

.article-info-wrapper :is(.rounded-full) {
border-radius: 9999px
}

.article-info-wrapper :is(.bg-danaherlightblue-50) {
--tw-bg-opacity: 1;
background-color: rgb(239 251 253 / var(--tw-bg-opacity))
}

.article-info-wrapper :is(.pl-1) {
padding-left: 0.25rem
}

.article-info-wrapper :is(.text-lg) {
font-size: 1.125rem;
line-height: 1.75rem
}

.article-info-wrapper :is(.text-sm) {
font-size: 0.875rem;
line-height: 1.25rem
}

.article-info-wrapper :is(.font-medium) {
font-weight: 500
}

.article-info-wrapper :is(.leading-6) {
line-height: 1.5rem
}

.article-info-wrapper :is(.text-danaherblack-500) {
--tw-text-opacity: 1;
color: rgb(51 51 51 / var(--tw-text-opacity))
}

@media (min-width: 1024px) {
.article-info-wrapper :is(.lg\:h-20) {
height: 5rem
}

.article-info-wrapper :is(.lg\:w-20) {
width: 5rem
}
}
75 changes: 75 additions & 0 deletions blocks/article-info/article-info.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import {
div, input, span, img,
} from '../../scripts/dom-builder.js';
import { getMetadata } from '../../scripts/lib-franklin.js';

export default function decorate(block) {
block.innerHTML = '';
const authorName = getMetadata('authorname');
const authorJobTitle = getMetadata('authortitle');
const publishDate = getMetadata('publishdate');
const readingTime = getMetadata('readingtime');
const authorImage = getMetadata('authorimage');
const expectedPublishFormat = new Date(publishDate);

block.append(
div(
{ class: 'articleinfo' },
div(
{ class: 'max-w-4xl mx-auto' },
div(
{ class: 'items-center flex justify-start my-4 w-full col-span-2' },
div(
{ class: 'space-y-1 text-lg leading-6' },
div({ class: 'text-danaherblack-500 font-medium' }, authorName),
div({ class: 'text-sm text-danaherblack-500 w-full' }, authorJobTitle),
),
),
div(
{ class: 'w-max items-center flex justify-end col-span-1 text-sm mr-4 my-4 text-danaherblack-500' },
`${expectedPublishFormat.getDate()} ${expectedPublishFormat.toLocaleString('default', { month: 'long' })}, ${expectedPublishFormat.getFullYear()}`,
input({ id: 'publishdate', class: 'hidden', value: publishDate }),
),
div(
{ class: 'items-center flex justify-start col-span-1 my-4' },
div({ class: 'reading-icon' }),
div(
{ class: 'text-sm text-danaherblack-500 pl-1' },
span({ id: 'timetoread' }, `${readingTime} Mins`),
),
),
),
),
);

if (authorImage) {
const items = block.querySelector('.items-center');
items.insertBefore(img({ class: 'h-16 w-16 rounded-full lg:h-20 lg:w-20 mr-7', src: authorImage, alt: authorName }), items.firstChild);
const imageEl = block.querySelector('.articleinfo')?.querySelector('.items-center')?.querySelector('img');
imageEl.remove();
block.querySelector('.articleinfo')?.firstChild?.prepend(imageEl);
}

block.querySelector('.reading-icon').innerHTML = `
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.01172 5.66667V9L11.5117 11.5M16.5117 9C16.5117 13.1421 13.1539 16.5 9.01172 16.5C4.86958 16.5 1.51172 13.1421 1.51172 9C1.51172 4.85786 4.86958 1.5 9.01172 1.5C13.1539 1.5 16.5117 4.85786 16.5117 9Z" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
`;

const toBeRemoved = ['social-media-wrapper', 'columns-wrapper', 'article-info-wrapper', 'tags-list-wrapper', 'related-articles-wrapper'];
const sectionEl = document.querySelector('main > div:nth-child(1)');
sectionEl.classList.remove('article-info-container');
const leftSideElements = div({ class: 'mt-4' });
Array.from(sectionEl.children).forEach((element) => {
if (!toBeRemoved.includes(element.classList[0])) {
leftSideElements.append(element);
}
});

const divEl = div(
{ class: 'article-info-container' },
sectionEl.querySelector('.article-info-wrapper'),
leftSideElements,
);
sectionEl.querySelector('.columns-wrapper')?.after(divEl);
}
157 changes: 0 additions & 157 deletions blocks/blog-hero/blog-hero.css
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,8 @@
.blog-hero-wrapper :is(.col-span-1) {
grid-column: span 1 / span 1
}

.blog-hero-wrapper :is(.col-span-2) {
grid-column: span 2 / span 2
}

.blog-hero-wrapper :is(.mx-auto) {
margin-left: auto;
margin-right: auto
}

.blog-hero-wrapper :is(.my-2) {
margin-top: 0.5rem;
margin-bottom: 0.5rem
}

.blog-hero-wrapper :is(.my-4) {
margin-top: 1rem;
margin-bottom: 1rem
}

.blog-hero-wrapper :is(.mb-2) {
margin-bottom: 0.5rem
}

.blog-hero-wrapper :is(.ml-2) {
margin-left: 0.5rem
}

.blog-hero-wrapper :is(.ml-4) {
margin-left: 1rem
}

.blog-hero-wrapper :is(.mr-4) {
margin-right: 1rem
}

.blog-hero-wrapper :is(.mr-7) {
margin-right: 1.75rem
}

.blog-hero-wrapper :is(.mt-4) {
margin-top: 1rem
}

.blog-hero-wrapper :is(.mt-8) {
margin-top: 2rem
}
Expand All @@ -53,70 +11,6 @@
display: block
}

.blog-hero-wrapper :is(.flex) {
display: flex
}

.blog-hero-wrapper :is(.grid) {
display: grid
}

.blog-hero-wrapper :is(.hidden) {
display: none
}

.blog-hero-wrapper :is(.h-16) {
height: 4rem
}

.blog-hero-wrapper :is(.w-16) {
width: 4rem
}

.blog-hero-wrapper :is(.w-full) {
width: 100%
}

.blog-hero-wrapper :is(.w-max) {
width: -moz-max-content;
width: max-content
}

.blog-hero-wrapper :is(.max-w-7xl) {
max-width: 80rem
}

.blog-hero-wrapper :is(.grid-cols-2) {
grid-template-columns: repeat(2, minmax(0, 1fr))
}

.blog-hero-wrapper :is(.items-center) {
align-items: center
}

.blog-hero-wrapper :is(.justify-start) {
justify-content: flex-start
}

.blog-hero-wrapper :is(.justify-end) {
justify-content: flex-end
}

.blog-hero-wrapper :is(.gap-x-20) {
-moz-column-gap: 5rem;
column-gap: 5rem
}

.blog-hero-wrapper :is(.space-y-1 > :not([hidden]) ~ :not([hidden])) {
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}

.blog-hero-wrapper :is(.rounded-full) {
border-radius: 9999px
}

.blog-hero-wrapper :is(.bg-danaherlightblue-50) {
--tw-bg-opacity: 1;
background-color: rgb(239 251 253 / var(--tw-bg-opacity))
Expand All @@ -127,52 +21,15 @@
padding-right: 0.5rem
}

.blog-hero-wrapper :is(.pl-1) {
padding-left: 0.25rem
}

.blog-hero-wrapper :is(.text-lg) {
font-size: 1.125rem;
line-height: 1.75rem
}

.blog-hero-wrapper :is(.text-sm) {
font-size: 0.875rem;
line-height: 1.25rem
}

.blog-hero-wrapper :is(.text-xl) {
font-size: 1.25rem;
line-height: 1.75rem
}

.blog-hero-wrapper :is(.font-medium) {
font-weight: 500
}

.blog-hero-wrapper :is(.leading-6) {
line-height: 1.5rem
}

.blog-hero-wrapper :is(.leading-8) {
line-height: 2rem
}

.blog-hero-wrapper :is(.text-danaherblack-500) {
--tw-text-opacity: 1;
color: rgb(51 51 51 / var(--tw-text-opacity))
}

.blog-hero-wrapper :is(.text-danahergray-500) {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity))
}

.blog-hero-wrapper :is(.text-danaherpurple-800) {
--tw-text-opacity: 1;
color: rgb(64 0 165 / var(--tw-text-opacity))
}

.blog-hero-wrapper :is(.text-gray-500) {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity))
Expand All @@ -181,18 +38,4 @@
.blog-hero-wrapper :is(.text-gray-900) {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity))
}

@media (min-width: 1024px) {
.blog-hero-wrapper :is(.lg\:h-20) {
height: 5rem
}

.blog-hero-wrapper :is(.lg\:w-20) {
width: 5rem
}

.blog-hero-wrapper :is(.lg\:grid-cols-4) {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
}
Loading

0 comments on commit 946278f

Please sign in to comment.