From a534598fb109d74c3440d7db0c902f24cfdf3b1a Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Tue, 24 Sep 2024 15:02:54 +0200
Subject: [PATCH] fine tune responsive layout, move dev instruction, cleanups

---
 .ignore                             |  8 ++++++
 docs/developer.md                   | 39 +++++++++++++++++++++++++++
 frontend/README.md                  | 41 -----------------------------
 frontend/components/SystemStats.vue |  3 +--
 frontend/eslint.config.mjs          |  2 +-
 frontend/package-lock.json          | 24 ++++++++---------
 frontend/package.json               |  2 +-
 frontend/pages/logging.vue          |  4 +--
 frontend/pages/media.vue            | 12 ++++-----
 scripts/build.sh                    |  4 ---
 10 files changed, 70 insertions(+), 69 deletions(-)
 create mode 100644 .ignore

diff --git a/.ignore b/.ignore
new file mode 100644
index 00000000..7e2b786e
--- /dev/null
+++ b/.ignore
@@ -0,0 +1,8 @@
+assets/
+debian/
+docker/
+docs/
+frontend/
+migrations/
+scripts/
+tests/
diff --git a/docs/developer.md b/docs/developer.md
index ea62268c..46d83ce0 100644
--- a/docs/developer.md
+++ b/docs/developer.md
@@ -68,3 +68,42 @@ cargo deb --no-build --target=aarch64-unknown-linux-gnu --variant=arm64 -p ffpla
 # for rhel based systems:
 cargo generate-rpm --target=x86_64-unknown-linux-musl
 ```
+
+## Setup Frontend
+
+Make sure to install the dependencies:
+
+```bash
+# yarn
+yarn install
+
+# npm
+npm install
+
+# pnpm
+pnpm install --shamefully-hoist
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/frontend/README.md b/frontend/README.md
index 5d8c537d..84cd0440 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,8 +1,6 @@
 ffplayout-frontend
 =====
 
-This web application is used to manage the [ffplayout](https://github.com/ffplayout/ffplayout).
-
 The interface is mostly designed for 24/7 streaming. Other scenarios like streaming in folder mode or playlists with no start time will work but will not be displayed correctly.
 
 For a better understanding of the functionality, take a look at the screenshots below.
@@ -27,42 +25,3 @@ For a better understanding of the functionality, take a look at the screenshots
 
 ### Configuration Page
 ![config-gui](/docs/images/config-gui.png)
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# yarn
-yarn install
-
-# npm
-npm install
-
-# pnpm
-pnpm install --shamefully-hoist
-```
-
-## Development Server
-
-Start the development server on http://localhost:3000
-
-```bash
-npm run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-npm run build
-```
-
-Locally preview production build:
-
-```bash
-npm run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/frontend/components/SystemStats.vue b/frontend/components/SystemStats.vue
index edb5a2bc..624b01e9 100644
--- a/frontend/components/SystemStats.vue
+++ b/frontend/components/SystemStats.vue
@@ -1,6 +1,5 @@
 <template>
-    <!-- <div v-if="data">{{ systemStatus(data) }}</div> -->
-    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[728px] max-w-[960px]">
+    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[320px] max-w-[960px] mt-5 xs:mt-0">
         <div class="p-4 bg-base-100">
             <span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
             <span v-if="sysStat.system.kernel">
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index ce1d7689..b17042a5 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -1,4 +1,4 @@
-import withNuxt from './.nuxt/eslint.config.mjs'
+import withNuxt from './frontend/.nuxt/eslint.config.mjs'
 
 export default withNuxt(
     // your custom flat configs go here, for example:
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fdebef66..6472c67a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "ffplayout-frontend",
+  "name": "frontend",
   "version": "0.12.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ffplayout-frontend",
+      "name": "frontend",
       "version": "0.12.1",
       "hasInstallScript": true,
       "dependencies": {
@@ -4930,9 +4930,9 @@
       "license": "MIT"
     },
     "node_modules/bare-events": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.4.2.tgz",
-      "integrity": "sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.0.tgz",
+      "integrity": "sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==",
       "license": "Apache-2.0",
       "optional": true
     },
@@ -6346,9 +6346,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.27",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.27.tgz",
-      "integrity": "sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw==",
+      "version": "1.5.28",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz",
+      "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -14791,12 +14791,12 @@
       }
     },
     "node_modules/vue-bundle-renderer": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.0.tgz",
-      "integrity": "sha512-uZ+5ZJdZ/b43gMblWtcpikY6spJd0nERaM/1RtgioXNfWFbjKlUwrS8HlrddN6T2xtptmOouWclxLUkpgcVX3Q==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.1.tgz",
+      "integrity": "sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==",
       "license": "MIT",
       "dependencies": {
-        "ufo": "^1.5.3"
+        "ufo": "^1.5.4"
       }
     },
     "node_modules/vue-devtools-stub": {
diff --git a/frontend/package.json b/frontend/package.json
index 89a4448f..22f290a4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "ffplayout-frontend",
+  "name": "frontend",
   "version": "0.12.1",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
diff --git a/frontend/pages/logging.vue b/frontend/pages/logging.vue
index 357845d3..aa269e44 100644
--- a/frontend/pages/logging.vue
+++ b/frontend/pages/logging.vue
@@ -22,7 +22,7 @@
                     auto-apply
                     :locale="locale"
                     :dark="colorMode.value === 'dark'"
-                    :ui="{ input: 'join-item input !input-sm !input-bordered !w-[300px] text-right !pe-3' }"
+                    :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" :title="t('log.download')" @click="downloadLog">
@@ -85,7 +85,7 @@ watch([listDate, id], () => {
 })
 
 const calendarFormat = (date: Date) => {
-    return $dayjs(date).locale(locale.value).format('dddd - LL')
+   return $dayjs(date).locale(locale.value).format('ddd L')
 }
 
 function filterLogsBySeverity(logString: string, minSeverity: string): string {
diff --git a/frontend/pages/media.vue b/frontend/pages/media.vue
index 62e2206f..dbd60dc6 100644
--- a/frontend/pages/media.vue
+++ b/frontend/pages/media.vue
@@ -55,7 +55,7 @@
                                             @dragleave="handleDragLeave"
                                         >
                                             <td class="px-2 py-1.5 truncate">
-                                                <span
+                                                <a
                                                     class="cursor-pointer"
                                                     @click="
                                                         mediaStore.getTree(
@@ -65,7 +65,7 @@
                                                 >
                                                     <i class="bi-folder-fill" />
                                                     {{ folder.name }}
-                                                </span>
+                                                </a>
                                             </td>
 
                                             <td class="px-2 py-1.5 text-center">
@@ -105,13 +105,13 @@
                                     <tr
                                         v-for="folder in mediaStore.folderTree.folders"
                                         :key="folder.uid"
-                                        class="grid grid-cols-[auto_170px] border-b border-base-content/20"
+                                        class="grid grid-cols-[auto_40px] border-b border-base-content/20"
                                         @drop="handleDrop($event, folder, false)"
                                         @dragover="handleDragOver"
                                         @dragleave="handleDragLeave"
                                     >
-                                        <td class="px-2 py-1.5">
-                                            <button
+                                        <td class="px-2 py-1.5 truncate cursor-pointer">
+                                            <a
                                                 class="truncate"
                                                 @click="
                                                     mediaStore.getTree(
@@ -121,7 +121,7 @@
                                             >
                                                 <i class="bi-folder-fill" />
                                                 {{ folder.name }}
-                                            </button>
+                                            </a>
                                         </td>
                                         <td class="ps-2 pe-[14px] py-1.5 text-right">
                                             <button
diff --git a/scripts/build.sh b/scripts/build.sh
index c8d83cb5..a006ca5f 100755
--- a/scripts/build.sh
+++ b/scripts/build.sh
@@ -3,10 +3,6 @@
 source $(dirname "$0")/man_create.sh
 target=$1
 
-if [ ! -f 'frontend/package.json' ]; then
-    git submodule update --init
-fi
-
 if [[ -n $target ]]; then
     targets=($target)
 else