From cdf2e5011abb9a7d9457aa7b14c46a6a0371d474 Mon Sep 17 00:00:00 2001 From: Pat Date: Mon, 2 Oct 2023 16:15:35 -0600 Subject: [PATCH 1/7] wip: fixes body content to summary for thumbnail render --- js/ucb-article-list-block.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/ucb-article-list-block.js b/js/ucb-article-list-block.js index cb2507e8..d51234e0 100644 --- a/js/ucb-article-list-block.js +++ b/js/ucb-article-list-block.js @@ -103,6 +103,8 @@ class ArticleListBlockElement extends HTMLElement { // If there's no categories or tags that are in the exclusions, proceed if (doesIncludeCat.length == 0 && doesIncludeTag.length == 0) { + console.log('item', item) + // okay to render let bodyAndImageId = item.relationships.field_ucb_article_content.data.length ? item.relationships.field_ucb_article_content.data[0].id : ""; let body = item.attributes.field_ucb_article_summary ? item.attributes.field_ucb_article_summary : ""; @@ -161,6 +163,7 @@ class ArticleListBlockElement extends HTMLElement { image: imageSrc, date, body, + id: bodyAndImageId } // Adds the article object to the final array of articles chosen finalArticles.push(article) @@ -464,6 +467,7 @@ class ArticleListBlockElement extends HTMLElement { var articleImgSrc = article.image; var articleTitle = article.title; var articleSumm = article.body; + var articleId = article.id; // Create and Append Elements var article = document.createElement('article'); @@ -501,6 +505,8 @@ class ArticleListBlockElement extends HTMLElement { var articleSummary = document.createElement('p'); articleSummary.innerText = articleSumm; articleSummary.classList = 'ucb-article-card-summary' + articleSummary.id = `body-${articleId}` + var readMore = document.createElement('a'); readMore.href = articleLink; From d5fc7779b2abba601eb9401ab39d53696d08fe54 Mon Sep 17 00:00:00 2001 From: Pat Date: Wed, 4 Oct 2023 15:11:07 -0600 Subject: [PATCH 2/7] wip: style adjustments to more btn, teaser view --- css/ucb-article-list-block.css | 18 +++++------------- js/ucb-article-list-block.js | 6 ++---- 2 files changed, 7 insertions(+), 17 deletions(-) diff --git a/css/ucb-article-list-block.css b/css/ucb-article-list-block.css index 0027e527..0faa2a63 100644 --- a/css/ucb-article-list-block.css +++ b/css/ucb-article-list-block.css @@ -1,25 +1,17 @@ .ucb-article-list-block-button-container{ - text-align: center; + text-align: right; } .ucb-article-list-block-button{ - display: inline-block; - padding: 5px 10px; - font-weight: bold; - font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif; - margin-bottom: 5px; - background-clip: padding-box; - color: #0277BD !important; - border: 1px solid #0277BD; - border-radius: 0px; - background-color: transparent; + font-weight: normal; + margin: 0; } -.ucb-article-list-block-button:hover{ +/* .ucb-article-list-block-button:hover{ transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; background-color: #0277BD; color: white !important; -} +} */ .ucb-article-card{ margin-bottom: 20px; diff --git a/js/ucb-article-list-block.js b/js/ucb-article-list-block.js index d51234e0..8c0b6699 100644 --- a/js/ucb-article-list-block.js +++ b/js/ucb-article-list-block.js @@ -103,8 +103,6 @@ class ArticleListBlockElement extends HTMLElement { // If there's no categories or tags that are in the exclusions, proceed if (doesIncludeCat.length == 0 && doesIncludeTag.length == 0) { - console.log('item', item) - // okay to render let bodyAndImageId = item.relationships.field_ucb_article_content.data.length ? item.relationships.field_ucb_article_content.data[0].id : ""; let body = item.attributes.field_ucb_article_summary ? item.attributes.field_ucb_article_summary : ""; @@ -473,7 +471,7 @@ class ArticleListBlockElement extends HTMLElement { var article = document.createElement('article'); article.classList = 'ucb-article-card row'; var imgDiv = document.createElement('div'); - imgDiv.classList = 'col-sm-12 col-md-2 ucb-article-card-img'; + imgDiv.classList = 'ucb-article-card-img'; var imgLink = document.createElement('a'); imgLink.href = articleLink; @@ -487,7 +485,7 @@ class ArticleListBlockElement extends HTMLElement { article.appendChild(imgDiv); var articleBody = document.createElement('div'); - articleBody.classList = 'col-sm-12 col-md-10 ucb-article-card-data'; + articleBody.classList = 'col px-2 ucb-article-card-data'; var headerLink = document.createElement('a'); headerLink.href = articleLink; From 602123b9459919a29cc9c512d04dac5560a644a0 Mon Sep 17 00:00:00 2001 From: Pat Date: Thu, 5 Oct 2023 13:15:10 -0600 Subject: [PATCH 3/7] wip: async getArticleBody refactor, also allows for multiple instances of the same article occuring multiple times on a page, which may be an issue using Article blocks --- js/ucb-article-list-block.js | 116 +++++++++++++++++------------------ 1 file changed, 56 insertions(+), 60 deletions(-) diff --git a/js/ucb-article-list-block.js b/js/ucb-article-list-block.js index 8c0b6699..590ceca5 100644 --- a/js/ucb-article-list-block.js +++ b/js/ucb-article-list-block.js @@ -20,7 +20,7 @@ class ArticleListBlockElement extends HTMLElement { }); } - build(data, count, display, excludeCatArray, excludeTagArray, finalArticles = []){ + async build(data, count, display, excludeCatArray, excludeTagArray, finalArticles = []){ // More than 10 articles? This sets up the next call if there's more articles to be retrieved but not enough post-filters let NEXTJSONURL = ""; if(data.links.next) { @@ -66,8 +66,8 @@ class ArticleListBlockElement extends HTMLElement { } // Iterate over each Article - data.data.map(item=>{ - let thisArticleCats = []; + await Promise.all(data.data.map(async (item) => { + let thisArticleCats = []; let thisArticleTags = []; // // loop through and grab all of the categories if (item.relationships.field_ucb_article_categories) { @@ -110,34 +110,8 @@ class ArticleListBlockElement extends HTMLElement { let imageSrc = ""; if (!body.length && bodyAndImageId != "") { - this.getArticleParagraph(bodyAndImageId) - .then((response) => response.json()) - .then((data) => { - // Remove any html tags within the article - let htmlStrip = data.data.attributes.field_article_text.processed.replace( - /<\/?[^>]+(>|$)/g, - "" - ) - // Remove any line breaks if media is embedded in the body - let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); - // take only the first 100 words ~ 500 chars - let trimmedString = lineBreakStrip.substr(0, 250); - // if in the middle of the string, take the whole word - if(trimmedString.length > 100){ - trimmedString = trimmedString.substr( - 0, - Math.min( - trimmedString.length, - trimmedString.lastIndexOf(" ") - ) - ) - body = `${trimmedString}...`; - } - // set the contentBody of Article Summary card to the minified body instead - body = `${trimmedString}`; - document.getElementById(`body-${bodyAndImageId}`).innerText = body; - }) - } + body = await this.getArticleParagraph(bodyAndImageId); + } // if no thumbnail, show no image if (!item.relationships.field_ucb_article_thumbnail.data) { @@ -166,7 +140,7 @@ class ArticleListBlockElement extends HTMLElement { // Adds the article object to the final array of articles chosen finalArticles.push(article) } - }) + })); // Case for not enough articles selected and extra articles available if(finalArticles.length < count && NEXTJSONURL){ fetch(NEXTJSONURL).then(this.handleError) @@ -197,40 +171,62 @@ class ArticleListBlockElement extends HTMLElement { } } } - + // Responsible for fetching & processing the body of the Article if no summary provided async getArticleParagraph(id) { - if(id) { - const response = await fetch( - `/jsonapi/paragraph/article_content/${id}` + if (!id) { + return ""; + } + + const response = await fetch(`/jsonapi/paragraph/article_content/${id}`); + if (!response.ok) { + throw new Error('Failed to fetch article paragraph'); + } + + const data = await response.json(); + + let htmlStrip = data.data.attributes.field_article_text.processed.replace( + /<\/?[^>]+(>|$)/g, + "" + ); + let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); + let trimmedString = lineBreakStrip.substr(0, 250); + + if (trimmedString.length > 100) { + trimmedString = trimmedString.substr( + 0, + Math.min( + trimmedString.length, + trimmedString.lastIndexOf(" ") + ) ); - return response; - } else { - return ""; - } + } + + return trimmedString + "..."; } + // Responsible for calling the render function of the appropriate display renderDisplay(display, articleArray){ - switch (display) { - case 'feature-wide': - this.renderFeatureWide(articleArray) - break; - case 'feature-large': - this.renderFeatureFull(articleArray) - break; - case 'teaser': - this.renderTeaser(articleArray) - break; - case 'title-thumbnail': - this.renderTitleThumb(articleArray) - break; - case 'title-only': - this.renderTitleOnly(articleArray) - break; - default: - this.renderTeaser(articleArray) - break; - } + switch (display) { + case 'feature-wide': + this.renderFeatureWide(articleArray) + break; + case 'feature-large': + this.renderFeatureFull(articleArray) + break; + case 'teaser': + this.renderTeaser(articleArray) + break; + case 'title-thumbnail': + this.renderTitleThumb(articleArray) + break; + case 'title-only': + this.renderTitleOnly(articleArray) + break; + default: + this.renderTeaser(articleArray) + break; + } } From 7e883812698d84952644ac502266efa9e9f3f35d Mon Sep 17 00:00:00 2001 From: Pat Date: Thu, 5 Oct 2023 13:55:05 -0600 Subject: [PATCH 4/7] wip: Fixes border sizing, img padding & sizes on desktop --- css/ucb-article-list-block.css | 14 ++++++++++---- js/ucb-article-list-block.js | 5 +++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/css/ucb-article-list-block.css b/css/ucb-article-list-block.css index 0faa2a63..2898891a 100644 --- a/css/ucb-article-list-block.css +++ b/css/ucb-article-list-block.css @@ -15,7 +15,7 @@ .ucb-article-card{ margin-bottom: 20px; - border-bottom: solid rgba(128, 128, 128, 0.333); + border-bottom: solid 1px rgba(128, 128, 128, 0.333); padding-bottom: 20px; } @@ -24,9 +24,15 @@ } .ucb-article-card-img{ - width: 110px; - height: 110px; - padding: 0 10px 10px 0; + width: 100px; + height: 100px; + padding: 0px; +} + +.ucb-article-card-img.title-thumbnail-img{ + width: 65px; + height: 65px; + padding: 0px; } .ucb-article-card-img-wide{ diff --git a/js/ucb-article-list-block.js b/js/ucb-article-list-block.js index 590ceca5..ca0eff16 100644 --- a/js/ucb-article-list-block.js +++ b/js/ucb-article-list-block.js @@ -51,6 +51,7 @@ class ArticleListBlockElement extends HTMLElement { }); // finds the focial point version of the thumbnail altFilterData.map((item)=>{ + console.log(item.links) // checks if consumer is working, else default to standard image instead of focal image if(item.links.focal_image_square != undefined){ altObj[item.id] = item.links.focal_image_square.href @@ -382,7 +383,7 @@ class ArticleListBlockElement extends HTMLElement { var article = document.createElement('article'); article.classList = 'ucb-article-card row'; var imgDiv = document.createElement('div'); - imgDiv.classList = 'col-sm-12 col-md-2 ucb-article-card-img'; + imgDiv.classList = 'ucb-article-card-img title-thumbnail-img'; var imgLink = document.createElement('a'); imgLink.href = articleLink; @@ -396,7 +397,7 @@ class ArticleListBlockElement extends HTMLElement { article.appendChild(imgDiv); var articleBody = document.createElement('div'); - articleBody.classList = 'col-sm-12 col-md-10 ucb-article-card-data'; + articleBody.classList = 'col px-2 ucb-article-card-data'; var headerLink = document.createElement('a'); headerLink.href = articleLink; From bc31e0f198fc940c03a60bfc6dd53d9ca23d3da4 Mon Sep 17 00:00:00 2001 From: Pat Date: Thu, 5 Oct 2023 14:57:22 -0600 Subject: [PATCH 5/7] Mobile image sizing, remove old logic for replacing summary body --- css/ucb-article-list-block.css | 16 +++++++++++++++- js/ucb-article-list-block.js | 8 ++------ 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/css/ucb-article-list-block.css b/css/ucb-article-list-block.css index 2898891a..92d2dcc4 100644 --- a/css/ucb-article-list-block.css +++ b/css/ucb-article-list-block.css @@ -69,4 +69,18 @@ font-weight: normal; margin: 0; line-height: 1.3; -} \ No newline at end of file +} + +@media only screen and (max-width: 600px) { + .ucb-article-card-img{ + width: 50px; + height: 50px; + padding: 0px; + } + + .ucb-article-card-img.title-thumbnail-img{ + width: 50px; + height: 50px; + padding: 0px; + } + } \ No newline at end of file diff --git a/js/ucb-article-list-block.js b/js/ucb-article-list-block.js index ca0eff16..bd67f446 100644 --- a/js/ucb-article-list-block.js +++ b/js/ucb-article-list-block.js @@ -136,7 +136,6 @@ class ArticleListBlockElement extends HTMLElement { image: imageSrc, date, body, - id: bodyAndImageId } // Adds the article object to the final array of articles chosen finalArticles.push(article) @@ -397,7 +396,7 @@ class ArticleListBlockElement extends HTMLElement { article.appendChild(imgDiv); var articleBody = document.createElement('div'); - articleBody.classList = 'col px-2 ucb-article-card-data'; + articleBody.classList = 'col px-3 ucb-article-card-data'; var headerLink = document.createElement('a'); headerLink.href = articleLink; @@ -462,7 +461,6 @@ class ArticleListBlockElement extends HTMLElement { var articleImgSrc = article.image; var articleTitle = article.title; var articleSumm = article.body; - var articleId = article.id; // Create and Append Elements var article = document.createElement('article'); @@ -482,7 +480,7 @@ class ArticleListBlockElement extends HTMLElement { article.appendChild(imgDiv); var articleBody = document.createElement('div'); - articleBody.classList = 'col px-2 ucb-article-card-data'; + articleBody.classList = 'col px-3 ucb-article-card-data'; var headerLink = document.createElement('a'); headerLink.href = articleLink; @@ -500,8 +498,6 @@ class ArticleListBlockElement extends HTMLElement { var articleSummary = document.createElement('p'); articleSummary.innerText = articleSumm; articleSummary.classList = 'ucb-article-card-summary' - articleSummary.id = `body-${articleId}` - var readMore = document.createElement('a'); readMore.href = articleLink; From 1152119fb1890d0b6796f186dd977906241b9e58 Mon Sep 17 00:00:00 2001 From: Pat Date: Fri, 6 Oct 2023 10:58:46 -0600 Subject: [PATCH 6/7] wip: Fixes summary generation for other article blocks --- js/ucb-article-feature-block.js | 77 +++++++++++++++------------------ js/ucb-article-grid-block.js | 70 ++++++++++++++---------------- 2 files changed, 69 insertions(+), 78 deletions(-) diff --git a/js/ucb-article-feature-block.js b/js/ucb-article-feature-block.js index d8173407..99e35a2f 100644 --- a/js/ucb-article-feature-block.js +++ b/js/ucb-article-feature-block.js @@ -22,7 +22,7 @@ class ArticleFeatureBlockElement extends HTMLElement { } // This is the article list filtering function that assembles the article javascript object array from the JSON response. Handles exclusions of categories and tags. - build(data, display, count, imgSize, excludeCatArray, excludeTagArray, finalArticles = []){ + async build(data, display, count, imgSize, excludeCatArray, excludeTagArray, finalArticles = []){ // More than 10 articles? This sets up the next call if there's more articles to be retrieved but not enough post-filters let NEXTJSONURL = ""; if(data.links.next) { @@ -70,7 +70,7 @@ class ArticleFeatureBlockElement extends HTMLElement { }) } // Iterate over each Article - data.data.map(item=>{ + await Promise.all (data.data.map(async(item)=>{ // Article must have a thumbnail if(item.relationships.field_ucb_article_thumbnail.data){ let thisArticleCats = []; @@ -118,33 +118,7 @@ class ArticleFeatureBlockElement extends HTMLElement { let imageSrcWide = ""; if (!body.length && bodyAndImageId != "") { - this.getArticleParagraph(bodyAndImageId) - .then((response) => response.json()) - .then((data) => { - // Remove any html tags within the article - let htmlStrip = data.data.attributes.field_article_text.processed.replace( - /<\/?[^>]+(>|$)/g, - "" - ) - // Remove any line breaks if media is embedded in the body - let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); - // take only the first 100 words ~ 500 chars - let trimmedString = lineBreakStrip.substr(0, 250); - // if in the middle of the string, take the whole word - if(trimmedString.length > 100){ - trimmedString = trimmedString.substr( - 0, - Math.min( - trimmedString.length, - trimmedString.lastIndexOf(" ") - ) - ) - body = `${trimmedString}...`; - } - // set the contentBody of Article Summary card to the minified body instead - body = `${trimmedString}`; - document.getElementById(`body-${bodyAndImageId}`).innerText = body; - }) + body = await this.getArticleParagraph(bodyAndImageId); } //Use the idObj as a memo to add the corresponding image url let thumbId = item.relationships.field_ucb_article_thumbnail.data.id; @@ -170,7 +144,7 @@ class ArticleFeatureBlockElement extends HTMLElement { finalArticles.push(article) } } - }) + })); // Case for not enough articles selected and extra articles available if(finalArticles.length < count && NEXTJSONURL){ fetch(NEXTJSONURL).then(this.handleError) @@ -201,17 +175,38 @@ class ArticleFeatureBlockElement extends HTMLElement { } } } - // Gets the body if no summary - async getArticleParagraph(id) { - if(id) { - const response = await fetch( - `/jsonapi/paragraph/article_content/${id}` - ); - return response; - } else { - return ""; - } - } + // Responsible for fetching & processing the body of the Article if no summary provided + async getArticleParagraph(id) { + if (!id) { + return ""; + } + + const response = await fetch(`/jsonapi/paragraph/article_content/${id}`); + if (!response.ok) { + throw new Error('Failed to fetch article paragraph'); + } + + const data = await response.json(); + + let htmlStrip = data.data.attributes.field_article_text.processed.replace( + /<\/?[^>]+(>|$)/g, + "" + ); + let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); + let trimmedString = lineBreakStrip.substr(0, 250); + + if (trimmedString.length > 100) { + trimmedString = trimmedString.substr( + 0, + Math.min( + trimmedString.length, + trimmedString.lastIndexOf(" ") + ) + ); + } + + return trimmedString + "..."; + } // Responsible for calling the render function of the appropriate display renderDisplay(articleArray, display, imgSize){ diff --git a/js/ucb-article-grid-block.js b/js/ucb-article-grid-block.js index 4fd3d203..64fdd688 100644 --- a/js/ucb-article-grid-block.js +++ b/js/ucb-article-grid-block.js @@ -20,7 +20,7 @@ class ArticleGridBlockElement extends HTMLElement { }); } - build(data, count, includeSummary, excludeCatArray, excludeTagArray, finalArticles = []){ + async build(data, count, includeSummary, excludeCatArray, excludeTagArray, finalArticles = []){ // More than 10 articles? This sets up the next call if there's more articles to be retrieved but not enough post-filters let NEXTJSONURL = ""; if(data.links.next) { @@ -65,7 +65,7 @@ class ArticleGridBlockElement extends HTMLElement { }) } // Iterate over each Article - data.data.map(item=>{ + await Promise.all(data.data.map(async (item)=>{ // Article must have a thumbnail if(item.relationships.field_ucb_article_thumbnail.data){ let thisArticleCats = []; @@ -112,33 +112,7 @@ class ArticleGridBlockElement extends HTMLElement { let imageSrc = ""; if (!body.length && bodyAndImageId != "") { - this.getArticleParagraph(bodyAndImageId) - .then((response) => response.json()) - .then((data) => { - // Remove any html tags within the article - let htmlStrip = data.data.attributes.field_article_text.processed.replace( - /<\/?[^>]+(>|$)/g, - "" - ) - // Remove any line breaks if media is embedded in the body - let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); - // take only the first 100 words ~ 500 chars - let trimmedString = lineBreakStrip.substr(0, 250); - // if in the middle of the string, take the whole word - if(trimmedString.length > 100){ - trimmedString = trimmedString.substr( - 0, - Math.min( - trimmedString.length, - trimmedString.lastIndexOf(" ") - ) - ) - body = `${trimmedString}...`; - } - // set the contentBody of Article Summary card to the minified body instead - body = `${trimmedString}`; - document.getElementById(`body-${bodyAndImageId}`).innerText = body; - }) + body = await this.getArticleParagraph(bodyAndImageId); } // if no thumbnail, show no image @@ -168,7 +142,7 @@ class ArticleGridBlockElement extends HTMLElement { finalArticles.push(article) } } - }) + })); // Case for not enough articles selected and extra articles available if(finalArticles.length < count && NEXTJSONURL){ fetch(NEXTJSONURL).then(this.handleError) @@ -200,15 +174,37 @@ class ArticleGridBlockElement extends HTMLElement { } } + // Responsible for fetching & processing the body of the Article if no summary provided async getArticleParagraph(id) { - if(id) { - const response = await fetch( - `/jsonapi/paragraph/article_content/${id}` + if (!id) { + return ""; + } + + const response = await fetch(`/jsonapi/paragraph/article_content/${id}`); + if (!response.ok) { + throw new Error('Failed to fetch article paragraph'); + } + + const data = await response.json(); + + let htmlStrip = data.data.attributes.field_article_text.processed.replace( + /<\/?[^>]+(>|$)/g, + "" ); - return response; - } else { - return ""; - } + let lineBreakStrip = htmlStrip.replace(/(\r\n|\n|\r)/gm, ""); + let trimmedString = lineBreakStrip.substr(0, 250); + + if (trimmedString.length > 100) { + trimmedString = trimmedString.substr( + 0, + Math.min( + trimmedString.length, + trimmedString.lastIndexOf(" ") + ) + ); + } + + return trimmedString + "..."; } // Responsible for calling the render function of the appropriate display From 32da42df48aca25448fc82e94a5cf4a7194555a4 Mon Sep 17 00:00:00 2001 From: Pat Date: Fri, 6 Oct 2023 13:51:39 -0600 Subject: [PATCH 7/7] Uniform borders on all article cards, adjusts other layouts effected by css changes, relocates css --- boulder_base.libraries.yml | 4 ++-- css/block/ucb-article-feature-block.css | 10 +++++----- css/{ => block}/ucb-article-grid-block.css | 0 css/{ => block}/ucb-article-list-block.css | 1 + js/ucb-article-list-block.js | 23 +++++++++++++--------- 5 files changed, 22 insertions(+), 16 deletions(-) rename css/{ => block}/ucb-article-grid-block.css (100%) rename css/{ => block}/ucb-article-list-block.css (98%) diff --git a/boulder_base.libraries.yml b/boulder_base.libraries.yml index 9f2f5c23..c473b0f0 100644 --- a/boulder_base.libraries.yml +++ b/boulder_base.libraries.yml @@ -305,14 +305,14 @@ ucb-article-grid-block: js/ucb-article-grid-block.js: {} css: theme: - css/ucb-article-grid-block.css: {} + css/block/ucb-article-grid-block.css: {} ucb-article-list-block: version: 1.x js: js/ucb-article-list-block.js: {} css: theme: - css/ucb-article-list-block.css: {} + css/block/ucb-article-list-block.css: {} ucb-content-sequence: version: 1.x js: diff --git a/css/block/ucb-article-feature-block.css b/css/block/ucb-article-feature-block.css index 8a89e23d..d5d4aa9d 100644 --- a/css/block/ucb-article-feature-block.css +++ b/css/block/ucb-article-feature-block.css @@ -48,16 +48,16 @@ .ucb-article-card{ margin-bottom: 10px; - border-bottom: solid rgba(128, 128, 128, 0.333); + border-bottom: solid 1px rgba(128, 128, 128, 0.333); padding-bottom: 10px; } .ucb-stacked-secondary-container{ margin-top: 10px; padding-top: 20px; - border-top: solid rgba(128, 128, 128, 0.333); + border-top: solid 1px rgba(128, 128, 128, 0.333); margin-bottom: 10px; - border-bottom: solid rgba(128, 128, 128, 0.333); + border-bottom: solid 1px rgba(128, 128, 128, 0.333); padding-bottom: 10px; margin-left: 10px; margin-right: 30px; @@ -100,12 +100,12 @@ @media screen and (max-width: 767px) { .ucb-stacked-secondary-container > .ucb-article-card{ margin-bottom: 10px; - border-bottom: solid rgba(128, 128, 128, 0.333); + border-bottom: solid 1px rgba(128, 128, 128, 0.333); padding-bottom: 10px; padding-top: 10px; } .ucb-stacked-secondary-container > .ucb-article-card:first-child { - border-top: solid rgba(128, 128, 128, 0.333); + border-top: solid 1px rgba(128, 128, 128, 0.333); padding-top: 10px; } diff --git a/css/ucb-article-grid-block.css b/css/block/ucb-article-grid-block.css similarity index 100% rename from css/ucb-article-grid-block.css rename to css/block/ucb-article-grid-block.css diff --git a/css/ucb-article-list-block.css b/css/block/ucb-article-list-block.css similarity index 98% rename from css/ucb-article-list-block.css rename to css/block/ucb-article-list-block.css index 92d2dcc4..a02fe0e2 100644 --- a/css/ucb-article-list-block.css +++ b/css/block/ucb-article-list-block.css @@ -39,6 +39,7 @@ height: 500px !important; object-fit: cover !important; margin-bottom: 20px; + width: 100%; } .ucb-article-card-img-full{ diff --git a/js/ucb-article-list-block.js b/js/ucb-article-list-block.js index bd67f446..3bb62edf 100644 --- a/js/ucb-article-list-block.js +++ b/js/ucb-article-list-block.js @@ -39,6 +39,7 @@ class ArticleListBlockElement extends HTMLElement { // Below objects are needed to match images with their corresponding articles. There are two endpoints => data.data (article) and data.included (incl. media), both needed to associate a media library image with its respective article let idObj = {}; let altObj = {}; + let wideObj = {}; // Remove any blanks from our articles before map if (data.included) { // removes all other included data besides images in our included media @@ -51,10 +52,11 @@ class ArticleListBlockElement extends HTMLElement { }); // finds the focial point version of the thumbnail altFilterData.map((item)=>{ - console.log(item.links) // checks if consumer is working, else default to standard image instead of focal image if(item.links.focal_image_square != undefined){ altObj[item.id] = item.links.focal_image_square.href + // This is used if a user selects the "Wide" image style + wideObj[item.id] = item.links.focal_image_wide.href } else { altObj[item.id] = item.attributes.uri.url } @@ -109,6 +111,7 @@ class ArticleListBlockElement extends HTMLElement { let body = item.attributes.field_ucb_article_summary ? item.attributes.field_ucb_article_summary : ""; body = body.trim(); let imageSrc = ""; + let imageSrcWide = ""; if (!body.length && bodyAndImageId != "") { body = await this.getArticleParagraph(bodyAndImageId); @@ -121,6 +124,7 @@ class ArticleListBlockElement extends HTMLElement { //Use the idObj as a memo to add the corresponding image url let thumbId = item.relationships.field_ucb_article_thumbnail.data.id; imageSrc = altObj[idObj[thumbId]]; + imageSrcWide = wideObj[idObj[thumbId]] } //Date - make human readable @@ -134,6 +138,7 @@ class ArticleListBlockElement extends HTMLElement { title, link, image: imageSrc, + imageWide: imageSrcWide, date, body, } @@ -233,7 +238,7 @@ class ArticleListBlockElement extends HTMLElement { // renderX functions are responsible for taking the final array of Articles and displaying them appropriately renderFeatureFull(articleArray){ var container = document.createElement('div') - container.classList = 'ucb-article-list-block container' + container.classList = 'ucb-article-list-block' articleArray.forEach(article=>{ // Article Data @@ -245,7 +250,7 @@ class ArticleListBlockElement extends HTMLElement { // Create and Append Elements var article = document.createElement('article'); - article.classList = 'ucb-article-card row'; + article.classList = 'ucb-article-card'; if(articleImgSrc){ @@ -254,7 +259,7 @@ class ArticleListBlockElement extends HTMLElement { imgLink.href = articleLink; var articleImg = document.createElement('img') - articleImg.classList = 'ucb-article-card-img-full' + articleImg.classList = 'col-sm-12 ucb-article-card-img-full' articleImg.src = articleImgSrc; imgLink.appendChild(articleImg); @@ -264,7 +269,7 @@ class ArticleListBlockElement extends HTMLElement { } var articleBody = document.createElement('div'); - articleBody.classList = 'col-sm-12 col-md-10 ucb-article-card-data'; + articleBody.classList = 'col-sm-12 ucb-article-card-data'; var headerLink = document.createElement('a'); headerLink.href = articleLink; @@ -302,19 +307,19 @@ class ArticleListBlockElement extends HTMLElement { } renderFeatureWide(articleArray){ var container = document.createElement('div') - container.classList = 'ucb-article-list-block container' + container.classList = 'ucb-article-list-block' articleArray.forEach(article=>{ // Article Data var articleDate = article.date; var articleLink = article.link; - var articleImgSrc = article.image; + var articleImgSrc = article.imageWide; var articleTitle = article.title; var articleSumm = article.body; // Create and Append Elements var article = document.createElement('article'); - article.classList = 'ucb-article-card row'; + article.classList = 'ucb-article-card'; if(articleImgSrc){ var imgDiv = document.createElement('div'); @@ -332,7 +337,7 @@ class ArticleListBlockElement extends HTMLElement { } var articleBody = document.createElement('div'); - articleBody.classList = 'col-sm-12 col-md-10 ucb-article-card-data'; + articleBody.classList = 'col-sm-12 ucb-article-card-data'; var headerLink = document.createElement('a'); headerLink.href = articleLink;