Visual bugfixes for calendar view (#171)

* cherrypick changes for calendar view * Reorder header code to solve for null data * resolve one more console error
hlxsites · Sep 12, 2024 · 1005f03 · 1005f03
1 parent 6c5020c
commit 1005f03
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/blocks/gmo-program-details/gmo-program-details.css b/blocks/gmo-program-details/gmo-program-details.css
@@ -454,6 +454,7 @@ body {
                 max-width: 100%; /* Adjusts the width to leave space for the group count */
                 display: inline-block; /* Ensures the element respects the max-width */
                 vertical-align: middle; /* Aligns it properly with other inline elements */
+                min-width: 52px; /* Ensure at least 5 characters show */
             }
             & .group-count {
                 position: absolute;
@@ -596,8 +597,8 @@ body {
                     background-color: #9D64E1;
                 }
             }
-            &#group5 {
-                background-color: #168a4a;
+            &.color5 {
+                background-color: #95dfb696;
                 border: 1px solid #24a25d;
                 & .group-header {
                     background-color: #137941;

diff --git a/blocks/gmo-program-details/gmo-program-details.js b/blocks/gmo-program-details/gmo-program-details.js
@@ -44,14 +44,15 @@ export default async function decorate(block) {
     // Wait for program data to render the actual header
     const programData = await executeQuery(programQueryString);
     const program = programData.data.programList.items[0];
-    const header = buildHeader(program, queryVars).outerHTML;
-
-    // Update the header with the actual data
-    block.querySelector('.placeholder-header').outerHTML = header;
 
     let imageObject = {imageUrl : '', imageAltText: '', assetCount: 0};
     let totalassets = 0;
-    if (program) {
+    let header = block.querySelector('.placeholder-header');
+
+    if (!(program === undefined)) {
+        const programHeader = buildHeader(program, queryVars).outerHTML;
+        // Update the header with the actual data
+        header.outerHTML = programHeader;
         try {
             imageObject = await searchAsset(program.programName, program.campaignName);
             if (imageObject) {
@@ -62,17 +63,17 @@ export default async function decorate(block) {
             console.error("Failed to load campaign image:", error);
         }
         decorateIcons(block);
-    }
-    else
-    {   //programName and campaignName is null
+    } else {
+        //programName and campaignName is null
+        header.textContent = 'Unable to retrieve program information.';
         block.innerHTML = `
         <div class="back-button">
             <span class="icon icon-back"></span>
             <span class="back-label">Back</span>
         </div>
         <div class="main-body-wrapper">
-            ${header}
-            <div class="no-data-msg">No data available.</div>
+            ${header.outerHTML}
+            <div class="no-data-msg">No program data available.</div>
         </div>
         `;
         try {
@@ -352,7 +353,7 @@ function insertImageIntoCampaignImg(block, imageObject) {
     imgElement.loading = 'lazy';
     imgElement.src = imageObject.imageUrl;
     imgElement.alt = imageObject.imageAltText;
-    campaignImgDiv.appendChild(imgElement);
+    if (campaignImgDiv) campaignImgDiv.appendChild(imgElement);
 }
 
 function switchTab(tab) {
@@ -929,8 +930,7 @@ async function buildCalendar(dataObj, block, type, mappingArray, period) {
         });
 
         contentWrapper.appendChild(groupEl);
-        groupIndex +=1;
-
+        groupIndex = (groupIndex === 5) ? 1 : groupIndex + 1;
     };
 
     calendarEl.appendChild(contentWrapper);