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

Article css issues #269

Merged
merged 11 commits into from
Sep 28, 2023
4 changes: 2 additions & 2 deletions blocks/carousel/carousel.css
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
background-color: #ed3e49;
}

.carousel-wrapper .carousel.block .carousel-title-wrapper .carousel-title.courses::before {
.carousel-wrapper .carousel.block[class*='courses'] .carousel-title-wrapper .carousel-title::before {
background-color: #105259;
}

.carousel-wrapper .carousel.block .carousel-title-wrapper .carousel-title.loop::before {
.carousel-wrapper .carousel.block[class*='loop'] .carousel-title-wrapper .carousel-title::before {
background-color: #e8b94d;
}

Expand Down
6 changes: 6 additions & 0 deletions blocks/default-article/default-article.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@
padding: 20px;
}

@media (min-width: 1025px) {
.default-article-wrapper .default-article.block .container {
margin-top: 40px;
}
}

.default-article-wrapper .default-article.block .container .gd-plus-icon {
border-right: 2px solid #f6f6f6;
margin-right: 10px;
Expand Down
8 changes: 8 additions & 0 deletions blocks/default-article/default-article.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
addPhotoCredit,
addPortraitClass,
assignSlot,
createAndInsertTrendingBannerBlock,
generateArticleBlocker,
normalizeAuthorURL,
parseFragment,
Expand Down Expand Up @@ -29,6 +30,7 @@ export default async function decorate(block) {

// HTML template in JS to avoid extra waterfall for LCP blocks
const HTML_TEMPLATE = `
<slot name="loop-trending-banner"></slot>
<div class="container">
<div class="container-article">
<article class="article-content">
Expand Down Expand Up @@ -76,6 +78,12 @@ export default async function decorate(block) {
assignSlot(block, 'heading', 'h1');
assignSlot(block, 'image', 'picture');

if (getMetadata('hlx:long-form-path').includes('/the-loop/')) {
await createAndInsertTrendingBannerBlock(block, 'loop-trending-banner');
} else {
template.querySelector('slot[name="loop-trending-banner"]').remove();
}

const picture = block.querySelector('picture');
// Picture is optional
if (picture) {
Expand Down
22 changes: 20 additions & 2 deletions blocks/embed/embed.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ main .embed {
position: relative;
}

main .embed.block:has(iframe) {
max-width: 100%;
}

main .embed-wrapper .embed.block {
padding: 0 !important;
}

main .embed > div {
display: flex;
justify-content: center;
Expand Down Expand Up @@ -75,14 +83,19 @@ main .embed .embed-placeholder-play button::before {
left: 7px;
}

main .embed.block:has(div > iframe, iframe) {
max-width: 100%;
main article.article-content .embed.block:has(iframe) {
max-width: 800px;
}

main article.article-content .embed.block:has(div > iframe, iframe) {
max-width: 800px;
}

main .open-article.block article.article-content .embed.block:has(iframe) {
max-width: none;
margin: 0;
}

main .embed.block[data-embed-link^="https://view.ceros.com/golf-digest/"] {
max-width: var(--layout-width);
}
Expand All @@ -95,3 +108,8 @@ main .embed.block[data-embed-link^="https://view.ceros.com/golf-digest/"] .embed
main .embed.block iframe[src^="https://view.ceros.com/golf-digest/"] {
padding: 0 15px;
}

main .long-form-wrapper .long-form.block .embed.block[data-embed-link^="https://view.ceros.com/golf-digest/"] .embed-placeholder picture,
main .long-form-wrapper .long-form.block .embed.block iframe[src^="https://view.ceros.com/golf-digest/"] {
padding: 0;
}
3 changes: 2 additions & 1 deletion blocks/header/header.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { getMetadata } from '../../scripts/lib-franklin.js';
import { createTag } from '../../scripts/scripts.js';
import leaderboard from './leaderboard.js';

Expand Down Expand Up @@ -721,7 +722,7 @@ function getChannelPathPart(url) {

function isActiveMenuURL(url) {
const channelPath = getChannelPathPart(url);
return (window.location.pathname.lastIndexOf(channelPath) > -1);
return (getMetadata('hlx:long-form-path').lastIndexOf(channelPath) > -1);
}

let activeItem = null;
Expand Down
53 changes: 39 additions & 14 deletions blocks/long-form/long-form.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.long-form-wrapper .long-form.block .center-seperator {
width: max-content;
margin: auto;
}

.long-form-wrapper .long-form.block .container {
margin: 0 auto;

Expand Down Expand Up @@ -117,19 +122,6 @@
margin: 20px 0;
}

.long-form-wrapper .long-form.block .article-body > div > div > div > * {
display: block;
line-height: 30px;
margin: 0 auto 20px;
padding: 0 20px;
max-width: var(--article-width);
}

.long-form-wrapper .long-form.block .article-body > div > div > div > div:has(iframe:not([src*="players.brightcove.net"])) {
max-width: none;
padding: 0;
}

.long-form-wrapper .long-form.block .article-body h2 {
font-family: var(--font-tungsten);
font-size: 37px;
Expand All @@ -144,14 +136,47 @@
text-align: center;
}

.long-form-wrapper .long-form.block .article-body div > h2,
.long-form-wrapper .long-form.block .article-body div > h3,
.long-form-wrapper .long-form.block .article-body div > h4,
.long-form-wrapper .long-form.block .article-body div > h5,
.long-form-wrapper .long-form.block .article-body div > h6,
.long-form-wrapper .long-form.block .article-body div > b,
.long-form-wrapper .long-form.block .article-body div > i,
.long-form-wrapper .long-form.block .article-body div > em,
.long-form-wrapper .long-form.block .article-body div > blockquote,
.long-form-wrapper .long-form.block .article-body div > strong,
.long-form-wrapper .long-form.block .article-body div > p {
display: block;
line-height: 30px;
margin: 0 auto 20px;
padding: 0 20px;
max-width: var(--article-width);
}

.long-form-wrapper .long-form.block .article-body > div > div > div > div:has(iframe:not([src*="players.brightcove.net"])) {
max-width: none;
padding: 0;
}

.long-form-wrapper .long-form.block .article-body div > h2 {
margin-top: 0;
margin-bottom: 20px;
padding: 0 20px;
}

@media (min-width: 1025px) {
.long-form-wrapper .long-form.block .article-body > div > div > div > * {
.long-form-wrapper .long-form.block .article-body div > h2,
.long-form-wrapper .long-form.block .article-body div > h3,
.long-form-wrapper .long-form.block .article-body div > h4,
.long-form-wrapper .long-form.block .article-body div > h5,
.long-form-wrapper .long-form.block .article-body div > h6,
.long-form-wrapper .long-form.block .article-body div > b,
.long-form-wrapper .long-form.block .article-body div > i,
.long-form-wrapper .long-form.block .article-body div > em,
.long-form-wrapper .long-form.block .article-body div > blockquote,
.long-form-wrapper .long-form.block .article-body div > strong,
.long-form-wrapper .long-form.block .article-body div > p {
padding: 0 15px 0 35px;
margin-bottom: 60px;
}
Expand Down
6 changes: 6 additions & 0 deletions blocks/long-form/long-form.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,12 @@ export default async function decorate(block) {

replaceLinksWithEmbed(block);

block.querySelectorAll('p').forEach((p) => {
if (p.textContent.includes('• • •')) {
p.classList.add('center-seperator');
}
});

// Render template
render(template, block, ARTICLE_TEMPLATES.LongForm);

Expand Down
117 changes: 1 addition & 116 deletions blocks/loop/loop.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,121 +17,6 @@
}
}

/*
*
* Trending Styling
*
*/

.loop-container .loop-wrapper .loop.block .trending-wrapper {
width: 100%;
display: flex;
position: relative;
overflow-x: auto;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-heading {
position: absolute;
top: 0;
left: 0;
margin: 10px;
padding: 9px 15px;
width: 132px;
height: 28px;
z-index: 1;
background-color: #e8b94d;
display: flex;
justify-content: space-between;
align-items: center;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-heading span {
font-size: 10px;
letter-spacing: 1px;
font-family: var(--font-gotham);
text-transform: uppercase;
font-weight: 500;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content {
list-style: none;
display: flex;
gap: 2px;
padding: 0;
margin: 0 auto;
position: relative;
background-color: white;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-item {
width: 220px;
height: 220px;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-item .trending-link {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
cursor: pointer;
position: relative;
overflow: hidden;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-text-wrapper {
width: 100%;
padding: 15px;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-text-wrapper .trending-title {
margin: 0;
font-weight: 400;
color: #fff;
font-size: 14px;
font-family: var(--font-gotham);
line-height: 130%;
position: relative;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-image-wrapper {
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
position: absolute;
background: linear-gradient(180deg, transparent 30%, #000);
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-image-wrapper picture {
width: 100%;
height: 100%;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-image-wrapper picture img {
width: 100%;
height: 100%;
object-fit: cover;
}

@media (max-width: 768px) {
.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-content .trending-item {
width: 180px;
height: 180px;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-heading {
width: 93px;
height: 22px;
padding: 7px 12px;
}

.loop-container .loop-wrapper .loop.block .trending-wrapper .trending-heading span {
font-size: 8px;
}
}

/*
*
* Header Styling
Expand Down Expand Up @@ -475,4 +360,4 @@
width: 100%;
max-width: 100%;
}
}
}
Loading