Merge pull request #498 from CuBoulder/issue/497

Article List Block - Style Adjustments & Summary Bug Fix
CuBoulder · Oct 10, 2023 · c35652d · c35652d
2 parents 9abd264 + 32da42d
commit c35652d
Show file tree

Hide file tree

Showing 8 changed files with 212 additions and 175 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,37 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- ### Article List Block - Style Adjustments & Summary Bug Fix
+  ## Article Block Bug Fix
+   - Fixes bug with article summaries not displaying if they are derived from the body content, in lieu of the `Summary` field. This bug was present across `Article List Block`, `Article Grid Block`, `Article Feature Block` and has been corrected.
+
+  --------
+
+  ## Style Adjustments
+  Adjusts the following styles of the `Article List Block`:
+
+  ### All `Article List Block` Styles
+   - Thumbnail images set to 50px on mobile.
+   - Article borders set to 1px.
+   -  `Link URL` is no longer a button-style link and is now a right-aligned basic link on the `Article List Block` specifically.
+
+  ### Teaser Display
+
+  - Sets thumbnails to 100px, 50px on mobile.
+  - Adjusts layout to not force image above article card summary and details on single and multi column widths.
+
+  ### Feature with Wide Photo
+  - Uses the `Focal Image Wide` thumbnail for the images in `Article List Blocks` rendered in `Feature with Wide Photo` style. This image style was not previously available via JSON API when the block was initially created.
+
+  ### Thumbnail & Title Displays
+
+  - Thumbnail image 65px, 50px on mobile.
+  - Equalizes padding above and below each article card, removing padding from images.
+
+  --------
+  Resolves #497 
+---
+
 - ### favicon fix
   Closes #494.
   Quick fix to the favicon path

diff --git 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
@@ -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 → css/block/ucb-article-grid-block.css b/css/ucb-article-grid-block.css → css/block/ucb-article-grid-block.css
diff --git a/css/ucb-article-list-block.css → css/block/ucb-article-list-block.css b/css/ucb-article-list-block.css → css/block/ucb-article-list-block.css
@@ -1,29 +1,21 @@
 .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;
-    border-bottom: solid rgba(128, 128, 128, 0.333);
+    border-bottom: solid 1px rgba(128, 128, 128, 0.333);
     padding-bottom: 20px;
 }
 
@@ -32,15 +24,22 @@
 }
 
 .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{
     height: 500px !important;
     object-fit: cover !important;
     margin-bottom: 20px;
+    width: 100%;
 }
 
 .ucb-article-card-img-full{
@@ -71,4 +70,18 @@
     font-weight: normal;
     margin: 0;
     line-height: 1.3;
-}
+}
+
+@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;
+    }
+ }
diff --git 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
@@ -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