From c5d06a2da4da209f3a554ac2d64cca9b366be709 Mon Sep 17 00:00:00 2001
From: Jonathan Baecker <jonbae77@gmail.com>
Date: Thu, 3 Oct 2024 17:54:24 +0200
Subject: [PATCH] fix modal overflow, add title

---
 frontend/components/GenericModal.vue      | 16 +++++++++++++---
 frontend/components/PlaylistGenerator.vue |  4 ++--
 frontend/error.vue                        |  5 +++--
 frontend/i18n/locales/de-DE.js            |  1 +
 frontend/i18n/locales/en-US.js            |  1 +
 frontend/i18n/locales/pt-BR.js            |  1 +
 frontend/i18n/locales/ru-RU.js            |  1 +
 frontend/pages/logging.vue                |  2 +-
 frontend/pages/player.vue                 | 15 +++++++++++----
 9 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/frontend/components/GenericModal.vue b/frontend/components/GenericModal.vue
index c4407bf8..129bb15a 100644
--- a/frontend/components/GenericModal.vue
+++ b/frontend/components/GenericModal.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30 overflow-auto m-auto max-h-screen space-y-1">
-        <div class="flex flex-col bg-base-100 min-w-[400px] max-w-[90%] h-auto rounded-md p-5 shadow-xl">
+    <div v-if="show" class="z-50 fixed inset-0 flex justify-center items-start bg-black/30 overflow-auto">
+        <div class="flex flex-col bg-base-100 min-w-[300px] w-[400px] max-w-[90%] rounded-md p-5 shadow-xl my-5">
             <div class="inline-block">
                 <div class="flex gap-2">
                     <div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 
-defineProps({
+const props = defineProps({
     title: {
         type: String,
         default: '',
@@ -56,4 +56,14 @@ defineProps({
         default: false,
     },
 })
+
+useHead({
+    bodyAttrs: {
+        class: computed(() => {
+            if (props.show) return 'overflow-hidden'
+
+            return ''
+        }),
+    },
+})
 </script>
diff --git a/frontend/components/PlaylistGenerator.vue b/frontend/components/PlaylistGenerator.vue
index cf18a221..867fdae0 100644
--- a/frontend/components/PlaylistGenerator.vue
+++ b/frontend/components/PlaylistGenerator.vue
@@ -1,9 +1,9 @@
 <template>
     <div
-        class="z-50 fixed top-0 bottom-0 w-full h-full left-0 right-0 flex justify-center items-center bg-black/30 overflow-y-auto"
+        class="z-50 fixed inset-0 flex justify-center items-start bg-black/30 overflow-auto"
     >
         <div
-            class="relative flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90vw] h-[680px] rounded-md p-5 shadow-xl"
+            class="relative flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90vw] h-[680px] my-5 rounded-md p-5 shadow-xl"
         >
             <div class="font-bold text-lg">{{ t('player.generateProgram') }}</div>
 
diff --git a/frontend/error.vue b/frontend/error.vue
index ddddea4b..16a3bafa 100644
--- a/frontend/error.vue
+++ b/frontend/error.vue
@@ -4,13 +4,13 @@
             <div v-if="props.error?.statusCode === 404">
                 <h1 class="text-center text-6xl">404</h1>
                 <p class="text-center font-bold mt-6">
-                    {{ $t('error.notFound') }}
+                    {{ t('error.notFound') }}
                 </p>
             </div>
             <div v-else-if="props.error?.statusCode === 500">
                 <h1 class="text-center text-6xl">{{ props.error.statusCode }}</h1>
                 <p class="text-center font-bold mt-6">
-                    {{ $t('error.serverError') }}
+                    {{ t('error.serverError') }}
                 </p>
             </div>
         </div>
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import type { NuxtError } from '#app'
+const { t } = useI18n()
 const localePath = useLocalePath()
 
 const props = defineProps({
diff --git a/frontend/i18n/locales/de-DE.js b/frontend/i18n/locales/de-DE.js
index 1568c1f8..12029fef 100644
--- a/frontend/i18n/locales/de-DE.js
+++ b/frontend/i18n/locales/de-DE.js
@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Protokoll herunterladen',
+        reload: 'Neu laden',
     },
     advanced: {
         title: 'Advanced Configuration',
diff --git a/frontend/i18n/locales/en-US.js b/frontend/i18n/locales/en-US.js
index feb68c0c..2ae3631c 100644
--- a/frontend/i18n/locales/en-US.js
+++ b/frontend/i18n/locales/en-US.js
@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Download log file',
+        reload: 'Reload',
     },
     advanced: {
         title: 'Advanced Configuration',
diff --git a/frontend/i18n/locales/pt-BR.js b/frontend/i18n/locales/pt-BR.js
index cd163d5c..ec685c17 100644
--- a/frontend/i18n/locales/pt-BR.js
+++ b/frontend/i18n/locales/pt-BR.js
@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Baixar arquivo de registro',
+        reload: 'Recarregar',
     },
     advanced: {
         title: 'Configurações avançadas',
diff --git a/frontend/i18n/locales/ru-RU.js b/frontend/i18n/locales/ru-RU.js
index 7028928b..20ebb89e 100644
--- a/frontend/i18n/locales/ru-RU.js
+++ b/frontend/i18n/locales/ru-RU.js
@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Скачать лог файл',
+        reload: 'Перезагрузка',
     },
     advanced: {
         title: 'Advanced Configuration',
diff --git a/frontend/pages/logging.vue b/frontend/pages/logging.vue
index eda540e6..00c8342e 100644
--- a/frontend/pages/logging.vue
+++ b/frontend/pages/logging.vue
@@ -25,7 +25,7 @@
                     :ui="{ input: 'join-item input !input-sm !input-bordered !w-[170px] text-right !pe-3' }"
                     required
                 />
-                <button class="btn btn-sm btn-primary join-item" @click="getLog()">
+                <button class="btn btn-sm btn-primary join-item" :title="t('log.reload')" @click="getLog()">
                     <i class="bi-arrow-repeat" />
                 </button>
                 <button class="btn btn-sm btn-primary join-item" :title="t('log.download')" @click="downloadLog">
diff --git a/frontend/pages/player.vue b/frontend/pages/player.vue
index 93993df1..5e7c8c54 100644
--- a/frontend/pages/player.vue
+++ b/frontend/pages/player.vue
@@ -245,10 +245,6 @@ const indexStore = useIndex()
 const mediaStore = useMedia()
 const playlistStore = usePlaylist()
 
-useHead({
-    title: `${t('button.player')} | ffplayout`,
-})
-
 const { listDate, firstLoad } = storeToRefs(usePlaylist())
 
 const beforeDayStart = ref(false)
@@ -282,6 +278,17 @@ const newSource = ref({
     uid: '',
 } as PlaylistItem)
 
+useHead({
+    title: `${t('button.player')} | ffplayout`,
+    bodyAttrs: {
+        class: computed(() => {
+            if (showPlaylistGenerator.value) return 'overflow-hidden'
+
+            return ''
+        }),
+    },
+})
+
 onBeforeMount(() => {
     const currentTime = $dayjs().utcOffset(configStore.utcOffset)