Merge pull request #284 from os2display/feature/preview-fixes2

Fixed preview spacing and added preview border

Author: tuj

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#284](https://github.com/os2display/display-admin-client/pull/284)
+  - Fixed spacer calculations for previews.
+  - Added border to preview container.
 - [#283](https://github.com/os2display/display-admin-client/pull/283)
   - Fixed preview issues. 
 - [#275](https://github.com/os2display/display-admin-client/pull/275)

src/components/preview/preview.jsx

@@ -57,6 +57,7 @@ function Preview({
             width: `${width}px`,
             height: `${height}px`,
             overflow: "hidden",
+            border: "1px solid #aaa",
           }}
         >
           <iframe

src/components/slide/preview/remote-component-wrapper.jsx

@@ -36,7 +36,7 @@ function RemoteComponentWrapper({
   const [remoteComponentSlide, setRemoteComponentSlide] = useState(null);
   const [loading, err, Component] = useRemoteComponent(url);
   const [runId, setRunId] = useState("");
-  const [fontSizeEm, setFontSizeEm] = useState(1);
+  const [fontSizeRem, setFontSizeRem] = useState(1);
 
   /** Create remoteComponentSlide from slide and mediaData */
   useEffect(() => {
@@ -90,7 +90,7 @@ function RemoteComponentWrapper({
       if (adjustFontSize) {
         if (entries.length > 0) {
           const first = entries[0];
-          setFontSizeEm(
+          setFontSizeRem(
             first.contentRect.width / (orientation === "vertical" ? 1080 : 1920)
           );
         }
@@ -109,7 +109,11 @@ function RemoteComponentWrapper({
   const remoteComponentStyle = {};
 
   if (adjustFontSize) {
-    remoteComponentStyle["--font-size-base"] = `${fontSizeEm}rem`;
+    // These sizes relate to:
+    // https://github.com/os2display/display-templates/blob/develop/src/global-styles.css#L100
+    // https://github.com/os2display/display-templates/blob/develop/src/global-styles.css#L126
+    remoteComponentStyle["--font-size-base"] = `${fontSizeRem}rem`;
+    remoteComponentStyle["--spacer"] = `${fontSizeRem * 12}px`;
   }
 
   return (

src/components/slide/preview/remote-component-wrapper.scss

@@ -1,6 +1,7 @@
 .remote-component-wrapper {
   width: 100%;
   height: 100%;
+  border: 1px solid #aaa;
 
   .remote-component-content {
     max-width: 100%;