3089: Cleaned up code

os2display · Dec 2, 2024 · 472dba6 · 472dba6
1 parent fc8a985
commit 472dba6
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 5 deletions.
diff --git a/src/calendar/calendar-multiple-days.js b/src/calendar/calendar-multiple-days.js
@@ -115,11 +115,14 @@ const Wrapper = styled.div`
   font-size: var(--font-size-base);
   height: 100%;
   overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
   --bg-color is local to this template file and is populated from configuration.
   --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
   color: var(--text-color);
   display: grid;
   grid-template-areas:

diff --git a/src/calendar/calendar-multiple.js b/src/calendar/calendar-multiple.js
@@ -202,11 +202,14 @@ const Wrapper = styled.div`
   font-size: var(--font-size-base);
   overflow: hidden;
   height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
   --bg-color is local to this template file and is populated from configuration.
   --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
   color: var(--text-color);
   display: grid;
   grid-template-areas:

diff --git a/src/calendar/calendar-single-booking-helper.js b/src/calendar/calendar-single-booking-helper.js
@@ -8,11 +8,14 @@ const Wrapper = styled.div`
   /* Wrapper styling */
   font-family: var(--font-family-base);
   height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
     --bg-color is local to this template file and is populated from configuration.
     --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
 
   color: var(--text-color);
   overflow: hidden;

diff --git a/src/calendar/calendar-single.js b/src/calendar/calendar-single.js
@@ -97,11 +97,14 @@ const Wrapper = styled.div`
   /* Wrapper styling */
   font-family: var(--font-family-base);
   height: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
   /*
   --bg-color is local to this template file and is populated from configuration.
   --background-color serves as fallback to the global variable, that will serve a light og dark background color depending on the user preferences.
   */
   background-color: var(--bg-color, var(--background-color));
+  background-image: var(--bg-image, none);
   color: var(--text-color);
   padding: var(--padding-size-base);
 `;

diff --git a/src/calendar/calendar.js b/src/calendar/calendar.js
@@ -41,7 +41,7 @@ function Calendar({ slide, content, run, slideDone, executionId }) {
   const imageUrl = getFirstMediaUrlFromField(slide.mediaData, content.image);
 
   if (imageUrl) {
-    rootStyle.backgroundImage = `url("${imageUrl}")`;
+    rootStyle["--bg-image"] = `url("${imageUrl}")`;
   }
 
   /** Setup slide run function. */
@@ -149,7 +149,6 @@ Calendar.propTypes = {
   content: PropTypes.shape({
     duration: PropTypes.number.isRequired,
     layout: PropTypes.string,
-
     image: PropTypes.arrayOf(PropTypes.string),
     fontSize: PropTypes.string,
     resourceUnavailableText: PropTypes.string,

diff --git a/src/image-text/image-text.js b/src/image-text/image-text.js
@@ -205,7 +205,7 @@ function ImageText({ slide, content, run, slideDone, executionId }) {
                 }}
                 ref={currentImage.nodeRef}
                 className={`background-image${
-                  mediaContain ? " image-contain" : ""
+                  mediaContain ? " media-contain" : ""
                 }`}
               />
             </CSSTransition>

diff --git a/src/image-text/image-text.scss b/src/image-text/image-text.scss
@@ -142,7 +142,7 @@
     bottom: 0;
   }
 
-  .background-image.image-contain {
+  .background-image.media-contain {
     background-size: contain;
     background-repeat: no-repeat;
   }

diff --git a/src/video/video.js b/src/video/video.js
@@ -66,7 +66,7 @@ function Video({ slide, content, run, slideDone, executionId }) {
           height="100%"
           ref={videoRef}
           muted={!sound}
-          className={mediaContain ? " media-contain" : ""}
+          className={mediaContain ? "media-contain" : ""}
         >
           {videoUrls.map((url) => (
             <source key={url} src={url} />