cover into modal; add Dashboard js app

assets/src/components/AModal.vue

@@ -0,0 +1,36 @@
+<template>
+    <section :class="['modal', active && 'is-active' || '']">
+        <div class="modal-background" @click="close"></div>
+        <div class="modal-card">
+            <header class="modal-card-head">
+                <div class="modal-card-title">
+                    <slot name="title">{{ title }}</slot>
+                </div>
+            </header>
+            <section class="modal-card-body">
+                <slot name="default"></slot>
+            </section>
+            <div class="modal-card-foot align-right">
+                <slot name="footer" :close="close"></slot>
+            </div>
+        </div>
+    </section>
+</template>
+<script>
+export default {
+    props: {
+        title: { type: String, default: ""},
+    },
+
+    data() {
+        return {
+            active: false,
+        }
+    },
+
+    methods: {
+        open() { this.active = true; },
+        close() { this.active = false; },
+    }
+}
+</script>

assets/src/components/index.js

@@ -1,18 +1,20 @@
-import AAutocomplete from './AAutocomplete.vue'
-import ACarousel from './ACarousel.vue'
-import ADropdown from "./ADropdown.vue"
-import AEpisode from './AEpisode.vue'
-import AList from './AList.vue'
-import APage from './APage.vue'
-import APlayer from './APlayer.vue'
-import APlaylist from './APlaylist.vue'
-import APlaylistEditor from './APlaylistEditor.vue'
-import AProgress from './AProgress.vue'
-import ASoundItem from './ASoundItem.vue'
-import ASwitch from './ASwitch.vue'
-import AStatistics from './AStatistics.vue'
-import AStreamer from './AStreamer.vue'
-import ASelectFile from "./ASelectFile.vue"
+import AAutocomplete from './AAutocomplete'
+import ACarousel from './ACarousel'
+import ADropdown from "./ADropdown"
+import AEpisode from './AEpisode'
+import AList from './AList'
+import APage from './APage'
+import APlayer from './APlayer'
+import APlaylist from './APlaylist'
+import APlaylistEditor from './APlaylistEditor'
+import AProgress from './AProgress'
+import ASoundItem from './ASoundItem'
+import ASwitch from './ASwitch'
+import AStatistics from './AStatistics'
+import AStreamer from './AStreamer'
+
+import AModal from "./AModal"
+import ASelectFile from "./ASelectFile"
 
 /**
  * Core components
@@ -20,7 +22,7 @@ import ASelectFile from "./ASelectFile.vue"
 export const base = {
     AAutocomplete, ACarousel, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
     AProgress, ASoundItem, ASwitch,
-    ASelectFile,
+
 }
 
 export default base
@@ -29,3 +31,8 @@ export const admin = {
     ...base,
     AStatistics, AStreamer, APlaylistEditor
 }
+
+export const dashboard = {
+    ...base,
+    ASelectFile, AModal, APlaylistEditor,
+}

assets/src/dashboard.js

@@ -0,0 +1,28 @@
+import './styles/admin.scss'
+import './index.js'
+
+import App from './app';
+import {dashboard as components} from './components'
+
+const AdminApp = {
+    ...App,
+    components: {...App.components, ...components},
+
+    methods: {
+        ...App.methods,
+
+        fileSelected(select, cover, input, modal) {
+            console.log("file!")
+            const item = this.$refs[select].item
+            if(item) {
+                this.$refs[cover].src = item.file
+                this.$refs[input].value = item.id
+                modal && this.$refs[modal].close()
+            }
+        },
+    }
+}
+export default AdminApp;
+
+
+window.App = AdminApp

assets/src/styles/admin.scss

@@ -13,7 +13,6 @@
 
 
 .admin {
-
     .navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
         box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
     }

assets/src/styles/components.scss

@@ -138,9 +138,12 @@
 }
 
 
-// ---- panels
-.panels {
-    .panel:not(.active) { display: none; }
+// ---- bulma overrides
+.modal-card {
+    max-width: v.$screen-wide;
+}
+.modal-card {
+    max-height: calc(100% - 10rem);
 }
 
 // ---- button
@@ -718,8 +721,6 @@
     }
 
     .a-select-file-list {
-        max-height: 30rem;
-        overflow-y: auto;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         gap: v.$mp-3;

assets/src/styles/public.scss

@@ -388,7 +388,7 @@ nav li {
 .header-cover:not(:only-child) {
     float: right;
     position: relative;
-    z-index: 1000;
+    z-index: 30;
     background-color: var(--body-bg);
     margin: 0 0 v.$mp-4 v.$mp-4;
 

assets/src/styles/vendor.scss

@@ -3,6 +3,7 @@
 // ---- bulma
 $body-color: #000;
 $title-color: #000;
+$modal-content-width: 80%;
 
 
 @import "~bulma/sass/utilities/_all.sass";

assets/vue.config.js

@@ -17,6 +17,7 @@ module.exports = defineConfig({
 
     pages: {
         public: { entry: 'src/public.js' },
+        dashboard: { entry: 'src/dashboard.js' },
         admin: { entry: 'src/admin.js' },
     }
 })