Article css issues (#269)

headwirecom · Sep 28, 2023 · 24a2a00 · 24a2a00
1 parent 6af6470
commit 24a2a00
Show file tree

Hide file tree

Showing 13 changed files with 356 additions and 190 deletions.
diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
@@ -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;
 }
 

diff --git a/blocks/default-article/default-article.css b/blocks/default-article/default-article.css
@@ -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;

diff --git a/blocks/default-article/default-article.js b/blocks/default-article/default-article.js
@@ -2,6 +2,7 @@ import {
   addPhotoCredit,
   addPortraitClass,
   assignSlot,
+  createAndInsertTrendingBannerBlock,
   generateArticleBlocker,
   normalizeAuthorURL,
   parseFragment,
@@ -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">
@@ -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) {

diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css
@@ -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;
@@ -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);
 }
@@ -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;
+}
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -1,3 +1,4 @@
+import { getMetadata } from '../../scripts/lib-franklin.js';
 import { createTag } from '../../scripts/scripts.js';
 import leaderboard from './leaderboard.js';
 
@@ -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;

diff --git a/blocks/long-form/long-form.css b/blocks/long-form/long-form.css
@@ -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;
 
@@ -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;
@@ -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;
     }

diff --git a/blocks/long-form/long-form.js b/blocks/long-form/long-form.js
@@ -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);
 

diff --git a/blocks/loop/loop.css b/blocks/loop/loop.css
@@ -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
@@ -475,4 +360,4 @@
     width: 100%;
     max-width: 100%;
   }
-}
+}