From 8e93339173810c23e441db42153aac7ec838cbc1 Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Fri, 11 Apr 2025 10:16:54 +0200 Subject: [PATCH 1/2] 4261: Fixed preview issues --- CHANGELOG.md | 4 ++ src/app.scss | 48 +++++++++++++++++++ .../playlist/playlist-campaign-form.jsx | 16 +++++-- src/components/screen/screen-form.jsx | 16 +++++-- src/components/slide/slide-form.jsx | 27 +++++++---- src/components/slide/slide-form.scss | 42 ---------------- src/translations/da/common.json | 5 +- 7 files changed, 100 insertions(+), 58 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3453aa0b..67e33cc35 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/app.scss b/src/app.scss index 4114c6dfb..25faf4203 100644 --- a/src/app.scss +++ b/src/app.scss @@ -81,3 +81,51 @@ 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-overlay { + background: white; + z-index: 1021; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + + button { + position: fixed; + z-index: 20; + } +} + +.preview-close-button { + top: 0; + right: 0; + margin: 2em; +} diff --git a/src/components/playlist/playlist-campaign-form.jsx b/src/components/playlist/playlist-campaign-form.jsx index e194f15e0..581d5ef62 100644 --- a/src/components/playlist/playlist-campaign-form.jsx +++ b/src/components/playlist/playlist-campaign-form.jsx @@ -230,12 +230,21 @@ function PlaylistCampaignForm({ {previewOverlayVisible && (
- setPreviewOverlayVisible(!previewOverlayVisible) - } role="presentation" className="preview-overlay d-flex justify-content-center align-items-center flex-column" > + + + {previewOverlayVisible && (
- setPreviewOverlayVisible(!previewOverlayVisible) - } role="presentation" className="preview-overlay d-flex justify-content-center align-items-center flex-column" > + + + {config?.previewClient && (
- setPreviewOverlayVisible(!previewOverlayVisible) - } role="presentation" className="preview-overlay d-flex justify-content-center align-items-center flex-column" > - + setPreviewOverlayVisible(!previewOverlayVisible) + } > - {t("slide-preview-about")} - + {t("preview-close-button")} + + + + {t("slide-preview-about")} +
)} {!config?.previewClient && ( diff --git a/src/components/slide/slide-form.scss b/src/components/slide/slide-form.scss index 5646cb6e9..dbe06fa55 100644 --- a/src/components/slide/slide-form.scss +++ b/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; - } -} diff --git a/src/translations/da/common.json b/src/translations/da/common.json index 7531e59ef..d53b0f284 100644 --- a/src/translations/da/common.json +++ b/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", From 04ccdc92f63ecc4aeb58aeb515c408ed62ab5d35 Mon Sep 17 00:00:00 2001 From: Troels Ugilt Jensen <6103205+tuj@users.noreply.github.com> Date: Fri, 11 Apr 2025 11:12:36 +0200 Subject: [PATCH 2/2] 4261: Applied coding standards --- src/app.scss | 32 +++++++++---------- .../playlist/playlist-campaign-form.jsx | 1 - src/components/screen/screen-form.jsx | 1 - src/components/slide/slide-form.jsx | 1 - 4 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/app.scss b/src/app.scss index 25faf4203..748a511d4 100644 --- a/src/app.scss +++ b/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; @@ -108,22 +124,6 @@ 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; - } -} - .preview-close-button { top: 0; right: 0; diff --git a/src/components/playlist/playlist-campaign-form.jsx b/src/components/playlist/playlist-campaign-form.jsx index 581d5ef62..0e6866a67 100644 --- a/src/components/playlist/playlist-campaign-form.jsx +++ b/src/components/playlist/playlist-campaign-form.jsx @@ -234,7 +234,6 @@ function PlaylistCampaignForm({ className="preview-overlay d-flex justify-content-center align-items-center flex-column" >