4261: Fixed preview issues

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+- [#283](https://github.com/os2display/display-admin-client/pull/283)
+  - Fixed preview issues. 
+- [#275](https://github.com/os2display/display-admin-client/pull/275)
+  - Added enhanced preview.
 - [#276](https://github.com/os2display/display-admin-client/pull/276)
   - Added Colibo feed type form.
   - Fixed feed type selector when unsupported type.

src/app.scss

@@ -62,6 +62,22 @@ body,
   }
 }
 
+.preview-overlay {
+  background: white;
+  z-index: 1021;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+
+  button {
+    position: fixed;
+    z-index: 20;
+  }
+}
+
 .table {
   td {
     vertical-align: middle;
@@ -81,3 +97,35 @@ body,
     margin-right: 1rem;
   }
 }
+
+.preview-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.preview-button-container {
+  display: none;
+  position: fixed;
+  border: 3px solid #f8f9fa;
+  background: white;
+  right: 0;
+  top: 50%;
+  flex-direction: column;
+
+  @media (max-width: 800px) {
+    display: flex;
+    z-index: 2;
+  }
+  .preview-button {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+}
+
+.preview-close-button {
+  top: 0;
+  right: 0;
+  margin: 2em;
+}

src/components/playlist/playlist-campaign-form.jsx

@@ -230,12 +230,20 @@ function PlaylistCampaignForm({
               </div>
               {previewOverlayVisible && (
                 <div
-                  onClick={() =>
-                    setPreviewOverlayVisible(!previewOverlayVisible)
-                  }
                   role="presentation"
                   className="preview-overlay d-flex justify-content-center align-items-center flex-column"
                 >
+                  <Button
+                    variant="primary"
+                    type="button"
+                    className="preview-close-button"
+                    onClick={() =>
+                      setPreviewOverlayVisible(!previewOverlayVisible)
+                    }
+                  >
+                    {t("preview-close-button")}
+                  </Button>
+
                   <Preview
                     id={idFromUrl(playlist["@id"])}
                     mode="playlist"
@@ -248,6 +256,7 @@ function PlaylistCampaignForm({
                       previewOrientation === "horizontal" ? 1920 : 1080
                     }
                   />
+
                   <Alert
                     key="playlist-preview-about"
                     variant="info"

src/components/screen/screen-form.jsx

@@ -331,13 +331,22 @@ function ScreenForm({
               </div>
               {previewOverlayVisible && (
                 <div
-                  onClick={() =>
-                    setPreviewOverlayVisible(!previewOverlayVisible)
-                  }
                   role="presentation"
                   className="preview-overlay d-flex justify-content-center align-items-center flex-column"
                 >
+                  <Button
+                    variant="primary"
+                    type="button"
+                    className="preview-close-button"
+                    onClick={() =>
+                      setPreviewOverlayVisible(!previewOverlayVisible)
+                    }
+                  >
+                    {t("preview-close-button")}
+                  </Button>
+
                   <Preview id={idFromUrl(screen["@id"])} mode="screen" />
+
                   <Alert
                     key="slide-preview-about"
                     variant="info"

src/components/slide/slide-form.jsx

@@ -439,19 +439,19 @@ function SlideForm({
                 <>
                   {config?.previewClient && (
                     <div
-                      onClick={() =>
-                        setPreviewOverlayVisible(!previewOverlayVisible)
-                      }
                       role="presentation"
                       className="preview-overlay d-flex justify-content-center align-items-center flex-column"
                     >
-                      <Alert
-                        key="slide-preview-about"
-                        variant="info"
-                        className="mt-3"
+                      <Button
+                        variant="primary"
+                        type="button"
+                        className="preview-close-button"
+                        onClick={() =>
+                          setPreviewOverlayVisible(!previewOverlayVisible)
+                        }
                       >
-                        {t("slide-preview-about")}
-                      </Alert>
+                        {t("preview-close-button")}
+                      </Button>
 
                       <Preview
                         id={idFromUrl(slide["@id"])}
@@ -465,6 +465,14 @@ function SlideForm({
                           previewOrientation === "horizontal" ? 1920 : 1080
                         }
                       />
+
+                      <Alert
+                        key="slide-preview-about"
+                        variant="info"
+                        className="mt-3"
+                      >
+                        {t("slide-preview-about")}
+                      </Alert>
                     </div>
                   )}
                   {!config?.previewClient && (

src/components/slide/slide-form.scss

@@ -15,45 +15,3 @@
     bottom: 0;
   }
 }
-
-.preview-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.preview-button-container {
-  display: none;
-  position: fixed;
-  border: 3px solid #f8f9fa;
-  background: white;
-  right: 0;
-  top: 50%;
-  flex-direction: column;
-
-  @media (max-width: 800px) {
-    display: flex;
-    z-index: 2;
-  }
-  .preview-button {
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-  }
-}
-
-.preview-overlay {
-  background: white;
-  z-index: 1021;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: hidden;
-
-  button {
-    position: fixed;
-    z-index: 20;
-  }
-}

src/translations/da/common.json

@@ -398,6 +398,7 @@
   "slide-form": {
     "preview-orientation-portrait": "Portræt (9:16)",
     "preview-orientation-landscape": "Landskab (16:9)",
+    "preview-close-button": "Luk",
     "slide-template-selected": "Skabelon",
     "template-error": "Der skete en fejl da skabelonen skulle hentes:",
     "remember-template-error": "Husk at tilknytte en skabelon til dit slide",
@@ -580,6 +581,7 @@
   "playlist-campaign-form": {
     "preview-orientation-portrait": "Portræt (9:16)",
     "preview-orientation-landscape": "Landskab (16:9)",
+    "preview-close-button": "Luk",
     "title-about": "Om spillelisten",
     "title-slides": "Tilknyttede slides",
     "save-button": "Gem",
@@ -836,7 +838,8 @@
     "preview-orientation-landscape": "Landskab (16:9)",
     "preview-in-full-screen": "Fuld skærm",
     "preview-small-about": "Gem for at opdatere indhold.",
-    "preview": "Forhåndsvisning"
+    "preview": "Forhåndsvisning",
+    "preview-close-button": "Luk"
   },
   "nav-items": {
     "shared-playlists": "Delte spillelister",