sfc-utils 1.4.11 → 1.4.12

package/components/topper2.mjs

@@ -12,12 +12,16 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     Topper_Style, Title, Title_Style, Deck, Image, Image_Alt, Video_Mp4, Image_Caption, Image_Credits,
     HeaderDek_Vertical_Position, HeaderDek_Vertical_Offset, HeaderDek_Horizontal_Offset,
     HeaderDek_Horizontal_Position, Inverted_Colors, Inverted_Layout, Inverted_Text_Color,
-    Topper_Background_Color
+    Topper_Background_Color, Small_Visual_Max_Width
   } = settings
 
+  // During server-side rendering, access to ":root" is unavailable. This is okay; we just need
+  // to make sure that the site does not crash during SSR
+  let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
+
   // Handle mods here, in case the project modifies the title
-  if (mods){
-    if (mods.Title){
+  if (mods) {
+    if (mods.Title) {
       Title = mods.Title
     }
   }
@@ -154,7 +158,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     let charSearch = ","
     if (listStr.toString().indexOf(";") !== -1){
       charSearch = ";"
-    } 
+    }
     return listStr.toString().split(charSearch).map((d) => parseInt(d));
   }
 
@@ -240,6 +244,11 @@ const Topper2 = ({ settings, wcmData, mods }) => {
           />
         )
       case "small-visual":
+        // If there is a "Small_Visual_Max_Width" column, set the custom max width
+        if (Small_Visual_Max_Width) {
+          r.style.setProperty('--small-visual-max-width', Small_Visual_Max_Width)
+        }
+
         return (
           <TopperImage
             wcm={Image}
@@ -469,8 +478,6 @@ const Topper2 = ({ settings, wcmData, mods }) => {
 
   /** Calculate offsets for header-deck container based on the spreadsheet, for full-screen toppers only **/
   const calculatefullScreenOffsets = () => {
-    let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
-
     let verticalOffset = convertStringToNumber(HeaderDek_Vertical_Offset, (HeaderDek_Vertical_Position === "bottom"));
     let horizontalOffset = convertStringToNumber(HeaderDek_Horizontal_Offset, (HeaderDek_Horizontal_Position === "right"));
 
@@ -498,8 +505,6 @@ const Topper2 = ({ settings, wcmData, mods }) => {
 
   /** Sets the background and text color in topper for side-by-side and side-by-side-portrait topper styles **/
   const setBackgroundAndTextColor = () => {
-    let r = (typeof window != "undefined") ? document.querySelector(':root') : null;
-
     if (r && Topper_Background_Color) {
       r.style.setProperty('--container-background-color', Topper_Background_Color)
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.11",
+  "version": "1.4.12",
   "author": "ewagstaff <evanjwagstaff@gmail.com>",
   "dependencies": {
     "archieml": "^0.4.2",

package/styles/modules/topper2.module.less

@@ -76,11 +76,16 @@
 
 .imageSmallVisual {
   position: relative;
-  max-width: 150px;
+  max-width: var(--small-visual-max-width);
+  height: auto;
+  width: 100%;
   margin: @s24 auto 0 auto;
 
   @media @mobile {
     margin-left: @s16;
+    margin-right: @s16;
+    width: auto;
+    height: auto;
   }
 }
 

package/styles/modules/topperimage.module.less

@@ -5,6 +5,7 @@
   --img-bottom-padding-ratio: "56.25%";
   --img-height-viewport: "56.25vw";
   --img-bottom-padding-fraction: 0.5625;
+  --small-visual-max-width: 150px;
 }
 
 .c-force-aspect-ratio {
@@ -70,8 +71,16 @@
 }
 
 .c-container-small-visual {
-  height: calc(var(--img-bottom-padding-fraction)*150px);
-  width: 150px;
+  height: calc(var(--img-bottom-padding-fraction)*var(--small-visual-max-width));
+  max-width: var(--small-visual-max-width);
+  width: calc(100vw - 32px);
+  margin: 0 @s16;
+
+  @media @mobile {
+    max-height: calc(var(--img-bottom-padding-fraction)*var(--small-visual-max-width));
+    height: calc(var(--img-bottom-padding-fraction)*(100vw - 32px));
+    margin: auto;
+  }
 }
 
 .c-img {
@@ -106,6 +115,7 @@
 .c-img-small-visual {
   display: block;
   position: absolute;
+  width: calc(100vw - 32px);
   padding: 0;
 }