sfc-utils 1.4.15 → 1.4.17

package/components/topper2.mjs

@@ -42,10 +42,12 @@ const Topper2 = ({ settings, wcmData, mods }) => {
 
         return [
           topperStyles.headerDekFullScreen,
-          // Add styling for header-deck container position
+          // Add styling for header-deck container horizontal position
           fullScreenHorizontalCss(),
-          // Add styling for text position inside header-deck
-          ... (HeaderDek_Vertical_Position === "top") ? [topperStyles.headerDekTop] : [topperStyles.headerDekBottom],
+          // Add styling for header-deck container vertical position
+          fullScreenVerticalCss(),
+          // Add style override for center-center position (if applicable)
+          fullScreenCenterCenterCss(),
           // Add styling for header-deck container background
           ... (Inverted_Colors === "black-text-white-bg") ? [topperStyles.blackTextWhiteBg] : [topperStyles.whiteTextBlackBg]
         ];
@@ -72,10 +74,26 @@ const Topper2 = ({ settings, wcmData, mods }) => {
     switch (HeaderDek_Horizontal_Position) {
       case "left": return topperStyles.headerDekLeft;
       case "right": return topperStyles.headerDekRight;
-      case "center": return topperStyles.headerDekCenter;
+      case "center": return topperStyles.headerDekCenterHorizontal;
     }
   }
 
+  /** get horizontal positioning css for full screen header-deck container **/
+  const fullScreenVerticalCss = () => {
+    switch (HeaderDek_Vertical_Position) {
+      case "top": return topperStyles.headerDekTop;
+      case "center": return topperStyles.headerDekCenterVertical;
+      case "bottom": return topperStyles.headerDekBottom;
+    }
+  }
+
+  const fullScreenCenterCenterCss = () => {
+    return (
+      HeaderDek_Horizontal_Position === "center" &&
+      HeaderDek_Vertical_Position === "center"
+    ) ? topperStyles.headerDekCenterCenter : "";
+  }
+
   const headerStyleList = () => {
     let defaultStyles = [];
     switch (Topper_Style) {
@@ -245,7 +263,7 @@ const Topper2 = ({ settings, wcmData, mods }) => {
         )
       case "small-visual":
         // If there is a "Small_Visual_Max_Width" column, override the max width of the topper image
-        if (Small_Visual_Max_Width && r) {
+        if (r && Small_Visual_Max_Width && Small_Visual_Max_Width !== "") {
           r.style.setProperty('--small-visual-max-width', Small_Visual_Max_Width)
         }
 

package/package.json

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

package/styles/modules/topper2.module.less

@@ -232,9 +232,9 @@
   }
 }
 
-.headerDekCenter {
+.headerDekCenterHorizontal {
   left: 50%;
-  transform: translate(-50%, 0%);
+  transform: translateX(-50%);
   margin-left: var(--headerDek-horizontal-offset);
 
   @media @tablet {
@@ -245,6 +245,35 @@
   }
 }
 
+.headerDekCenterVertical {
+  top: 50%;
+  transform: translateY(-50%);
+  margin-top: var(--headerDek-vertical-offset);
+
+  @media @tablet {
+    transform: none;
+    top: 0%;
+    left: 0%;
+    margin-top: 0px;
+  }
+}
+
+.headerDekCenterCenter {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  margin-left: var(--headerDek-horizontal-offset);
+  margin-top: var(--headerDek-vertical-offset);
+
+  @media @tablet {
+    transform: none;
+    top: 0%;
+    left: 0%;
+    margin-top: 0px;
+    margin-left: 0px;
+  }
+}
+
 .textAlignLeft {
   text-align: left;
 }