Skip to content

Commit

Permalink
Merge pull request #498 from CuBoulder/issue/497
Browse files Browse the repository at this point in the history 
Article List Block - Style Adjustments & Summary Bug Fix
  • Loading branch information
@jcsparks
jcsparks authored Oct 10, 2023
2 parents 9abd264 + 32da42d commit ae206a8
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 175 deletions.
4 changes: 2 additions & 2 deletions boulder_base.libraries.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
10 changes: 5 additions & 5 deletions css/block/ucb-article-feature-block.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
0 css/ucb-article-grid-block.css → css/block/ucb-article-grid-block.css
View file
File renamed without changes.
49 changes: 31 additions & 18 deletions css/ucb-article-list-block.css → css/block/ucb-article-list-block.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

Expand All @@ -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{
Expand Down Expand Up @@ -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;
}
}
77 changes: 36 additions & 41 deletions js/ucb-article-feature-block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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;
Expand All @@ -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)
Expand Down Expand Up @@ -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){
Expand Down
70 changes: 33 additions & 37 deletions js/ucb-article-grid-block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand Down
Loading

0 comments on commit ae206a8

Please sign in to comment.