sfc-utils 1.4.16 → 1.4.18

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) {

package/components/topperimage.mjs

@@ -63,7 +63,7 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], imageCss
   let photoRatio = "56.25%"; // Default to 16/9
   let photoFraction = 0.5625;
   let photoViewport = "56.25vw";
-  let fullPath = `https://s.hdnux.com/photos/0/0/0/${wcm}/0/`;
+  let fullPath = `https://s.hdnux.com/photos/0/0/0/${wcm}/1/`;
   if (!ratio) {
     let matchedPhoto = wcmData.nodes.find((item) => {
       return (item.photo.wcmid).toString() === (wcm).toString()
@@ -108,7 +108,9 @@ const TopperImage = ({ wcm, alt, ratio, wcmData, containerCssList = [], imageCss
 
   return (
     <div className={containerCssList.join(' ')} ref={picRef}>
-      <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} imageCssList={imageCssList} />
+      {imageRez > 0 &&
+        <ImageHTML fullPath={fullPath} imageRez={imageRez} alt={alt} imageCssList={imageCssList} />
+      }
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sfc-utils",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "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;
 }