djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix mobil screen, style browser

Browse Source
This commit is contained in:
jb-alvarado 2024-04-08 09:35:31 +02:00
parent 5fd0c3fcbe
commit 9943967f18
10 changed files with 86 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
assets/scss/main.scss
View File

@ -16,46 +16,6 @@ main > div {
font-style: normal;
}
// html,
// body {
// font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
// sans-serif;
// background-color: $bg-primary;
// background: $bg-primary;
// font-size: 15px;
// word-spacing: 1px;
// -ms-text-size-adjust: 100%;
// -webkit-text-size-adjust: 100%;
// -moz-osx-font-smoothing: grayscale;
// -webkit-font-smoothing: antialiased;
// box-sizing: border-box;
// width: 100%;
// height: 100%;
// padding: 0;
// margin: 0;
// }
a {
color: $link-color;
text-decoration: none;
}
a:hover {
color: $link-color-hover;
}
.navbar {
--bs-navbar-padding-y: 0 !important;
}
.list-group-item {
border-color: $border-color;
}
.list-group {
--bs-list-group-border-radius: $b-radius;
}
.media-alert {
position: absolute;
top: 80px;
@ -69,16 +29,6 @@ a:hover {
background-color: $warning;
}
.breadcrumb {
background-color: $gray-900;
--bs-breadcrumb-margin-bottom: 0;
height: 39px;
padding: .5em;
border: 1px solid $border-color;
border-bottom: 0;
border-radius: $b-radius;
}
.date-div {
width: 250px;
height: 37px;
@ -155,17 +105,37 @@ a:hover {
position: relative;
}
.splitpanes--horizontal > .splitpanes__splitter {
position: relative;
border-top: 1px solid var(--my-gray);
border-bottom: 1px solid var(--my-gray);
height: 6px !important;
}
.splitpanes--vertical > .splitpanes__splitter {
position: relative;
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
border-left: 1px solid var(--my-gray);
border-right: 1px solid var(--my-gray);
width: 6px !important;
}
.splitpanes--horizontal > .splitpanes__splitter::before {
content: '';
position: absolute;
background-color: var(--my-gray);
transform: translateY(-50%);
top: 50%;
left: 50%;
height: 2px;
width: 30px;
transition: background-color 0.3s;
margin-left: -1px;
}
.splitpanes--vertical > .splitpanes__splitter::before {
content: '';
position: absolute;
background-color: $border-color;
background-color: var(--my-gray);
transform: translateY(-50%);
top: 50%;
left: 50%;

10
components/ConfigPlayout.vue
View File

@ -6,13 +6,13 @@
@submit.prevent="onSubmitPlayout"
class="mt-10 grid md:grid-cols-[140px_auto] gap-4"
>
<template v-for="(item, key) in configStore.configPlayout" class="" :key="key">
<div class="text-xl">{{ key }}:</div>
<div class="md:pt-10">
<template v-for="(item, key) in configStore.configPlayout" :key="key">
<div class="text-xl pt-3">{{ key }}:</div>
<div class="md:pt-4">
<label
v-for="(prop, name) in (item as Record<string, any>)"
class="form-control w-full mt-4"
:class="typeof prop === 'boolean' && 'flex-row'"
class="form-control w-full"
:class="[typeof prop === 'boolean' && 'flex-row', name.toString() !== 'help_text' && 'mt-2']"
>
<div class="label">
<span class="label-text !text-md font-bold">{{ name }}</span>

2
components/ConfigUser.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="w-full max-w-[800px] pe-8">
<h2 class="pt-3 text-3xl">User Configuration</h2>
<div class="flex w-full mb-5 mt-10">
<div class="flex flex-col xs:flex-row gap-2 w-full mb-5 mt-10">
<div class="grow">
<select class="select select-bordered w-full max-w-xs" v-model="selected" @change="onChange($event)">
<option v-for="item in users">{{ item.username }}</option>

24
components/SystemStats.vue
View File

@ -1,7 +1,17 @@
<template>
<div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left">
<div class="text-3xl flex items-center p-4 bg-base-100">
{{ sysStat.system.name }} {{ sysStat.system.version }}
<div class="p-4 bg-base-100">
<span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
<span v-if="sysStat.system.kernel">
<br />
{{ sysStat.system.kernel }}
</span>
</div>
<div class="p-4 bg-base-100 flex items-center">
<span v-if="sysStat.system.ffp_version">
<strong>ffplayout version:</strong>
{{ sysStat.system.ffp_version }}
</span>
</div>
<div class="p-4 border border-primary">
<div class="text-xl">CPU</div>
@ -10,12 +20,6 @@
<div><strong>Usage:</strong> {{ sysStat.cpu.usage.toFixed(2) }}%</div>
</div>
</div>
<div v-if="sysStat.system.kernel" class="p-4 bg-base-100">
{{ sysStat.system.kernel }} <br />
<span v-if="sysStat.system.ffp_version"
><strong>ffplayout version:</strong> {{ sysStat.system.ffp_version }}</span
>
</div>
<div class="p-4 border border-primary">
<div class="text-xl">Load</div>
<div class="grid grid-cols-3">
@ -106,10 +110,10 @@ async function systemStatus() {
const channel = configStore.configGui[configStore.configID].id
if (!document?.hidden) {
await $fetch(`/api/system/${channel}`, {
await $fetch<SystemStatistics>(`/api/system/${channel}`, {
method: 'GET',
headers: { ...contentType, ...authStore.authHeader },
}).then((stat: SystemStatistics) => {
}).then((stat) => {
sysStat.value = stat
})
}

2
layouts/default.vue
View File

@ -4,7 +4,7 @@
<Menu />
</div>
<main class="h-[calc(100%-52px)]">
<main :class="authStore.isLogin && route.name !== 'index' ? 'h-[calc(100%-52px)]': 'h-full'">
<slot />
</main>

13
pages/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="w-full h-screen flex justify-center items-center">
<div class="w-full min-h-screen xs:h-full flex justify-center items-center">
<div v-if="authStore.isLogin" class="text-center w-full max-w-[700px] p-5">
<SystemStats v-if="configStore.configGui.length > 0" />
<div class="flex flex-wrap justify-center gap-1 xs:gap-0 xs:join mt-5">
@ -7,15 +7,18 @@
<NuxtLink to="/media" class="btn join-item btn-primary">Media</NuxtLink>
<NuxtLink to="/message" class="btn join-item btn-primary">Message</NuxtLink>
<NuxtLink to="logging" class="btn join-item btn-primary">Logging</NuxtLink>
<NuxtLink v-if="authStore.role.toLowerCase() == 'admin'" to="/configure" class="btn join-item btn-primary">
<NuxtLink
v-if="authStore.role.toLowerCase() == 'admin'"
to="/configure"
class="btn join-item btn-primary"
>
Configure
</NuxtLink>
<button class="btn join-item btn-primary" @click="logout()">Logout</button>
</div>
</div>
<div v-else class="w-96 flex flex-col justify-center items-center">
<h1 class="text-8xl">ffplayout</h1>
<div v-else class="w-96 min-w-full flex flex-col justify-center items-center px-4">
<h1 class="text-6xl xs:text-8xl">ffplayout</h1>
<form class="mt-10" @submit.prevent="login">
<input

4
pages/logging.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="flex justify-end my-3 pe-3">
<div class="flex justify-end p-3 h-14">
<div>
<input type="date" class="input input-sm input-bordered w-full max-w-xs" v-model="listDate" />
</div>
</div>
<div class="px-3 inline-block h-[calc(100vh-130px)] text-[13px]">
<div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
<div class="bg-base-300 whitespace-pre h-full font-mono overflow-auto p-3" v-html="formatLog(currentLog)" />
</div>
</template>

37
pages/media.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h-[calc(100vh-140px)]">
<nav class="text-sm breadcrumbs px-4">
<div class="h-[calc(100vh-140px)] px-2">
<nav class="text-sm breadcrumbs px-3">
<ul v-on:dragover.prevent>
<li
v-for="(crumb, index) in mediaStore.crumbs"
@ -11,30 +11,30 @@
v-on:dragover="handleDragOver"
v-on:dragleave="handleDragLeave"
>
<a v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index" href="#">
<button v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index">
<i class="bi-folder-fill me-1" />
{{ crumb.text }}
</a>
</button>
<span v-else><i class="bi-folder-fill me-1" /> {{ crumb.text }}</span>
</li>
</ul>
</nav>
<div class="h-[calc(100%-34px)] bg-base-300">
<div class=" h-[calc(100%-34px)] bg-base-100">
<div
v-if="browserIsLoading"
class="w-full h-[calc(100%-174px)] absolute z-10 flex justify-center bg-base-100/70"
class="w-[calc(100%-16px)] h-[calc(100%-174px)] absolute z-10 flex justify-center bg-base-100/70"
>
<span class="loading loading-spinner loading-lg"></span>
</div>
<splitpanes>
<pane min-size="14" max-size="80" size="24" class="h-full">
<splitpanes :horizontal="horizontal" class="border border-my-gray rounded">
<pane min-size="14" max-size="80" size="24" class="h-full px-1 pb-1">
<ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" v-on:dragover.prevent>
<li
v-if="mediaStore.folderTree.parent_folders.length > 0"
v-for="folder in mediaStore.folderTree.parent_folders"
class="grid grid-cols-[auto_18px] gap-1 px-2"
:class="filename(mediaStore.folderTree.source) === folder.name && 'bg-base-100'"
class="grid grid-cols-[auto_38px] gap-1 px-1"
:class="filename(mediaStore.folderTree.source) === folder.name && 'bg-base-300 rounded'"
:key="folder.uid"
v-on:drop="handleDrop($event, folder, true)"
v-on:dragover="handleDragOver"
@ -48,7 +48,7 @@
{{ folder.name }}
</button>
<button
class="opacity-30 hover:opacity-100"
class="w-7 opacity-30 hover:opacity-100"
@click="
;(showDeleteModal = true),
(deleteName = `/${parent(mediaStore.folderTree.source)}/${folder.name}`.replace(
@ -68,7 +68,7 @@
</li>
</ul>
</pane>
<pane class="h-full px-2">
<pane class="h-full px-2 pb-1">
<ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" v-on:dragover.prevent>
<li
class="grid grid-cols-[auto_49px] gap-1"
@ -237,6 +237,7 @@
<script setup lang="ts">
import { storeToRefs } from 'pinia'
const { width } = useWindowSize({ initialWidth: 800 })
const authStore = useAuth()
const configStore = useConfig()
const indexStore = useIndex()
@ -250,6 +251,15 @@ useHead({
title: 'Media | ffplayout',
})
watch([width], () => {
if (width.value < 640) {
horizontal.value = true
} else {
horizontal.value = false
}
})
const horizontal = ref(false)
const browserIsLoading = ref(false)
const deleteName = ref('')
const renameOldName = ref('')
@ -308,7 +318,6 @@ function handleDragStart(event: any, itemData: any) {
}
function handleDragOver(event: any) {
event.target.style.color = 'white'
event.target.style.fontWeight = 'bold'
if (event.target.firstChild && event.target.firstChild.classList.contains('bi-folder-fill')) {
@ -319,7 +328,6 @@ function handleDragOver(event: any) {
function handleDragLeave(event: any) {
if (event.target && event.target.style) {
event.target.style.color = null
event.target.style.fontWeight = null
}
@ -351,7 +359,6 @@ async function handleDrop(event: any, targetFolder: any, isParent: boolean | nul
)
}
event.target.style.color = null
event.target.style.fontWeight = null
if (event.target.firstChild.classList.contains('bi-folder2-open')) {

16
pages/message.vue
View File

@ -1,10 +1,10 @@
<template>
<div class="flex flex-col items-center mt-10 px-8">
<div class="flex flex-col items-center pt-10 px-8">
<div class="mt-2 w-full max-w-4xl">
<div class="flex max-w-md gap-4">
<div>
<div class="flex flex-col xs:flex-row w-full gap-4">
<div class="grow xs:max-w-72">
<select
class="select select-sm select-bordered w-full max-w-md"
class="select select-sm select-bordered w-full"
v-model="selected"
@change="onChange($event)"
>
@ -28,7 +28,7 @@
</div>
</div>
<form @submit.prevent="submitMessage" class="mt-6 w-full">
<form @submit.prevent="submitMessage" class="my-6 w-full">
<textarea
class="textarea textarea-bordered w-full"
v-model="form.text"
@ -36,7 +36,7 @@
placeholder="Message"
/>
<div class="mt-5 grid grid-cols-[auto_150px_150px] gap-4">
<div class="mt-5 grid xs:grid-cols-[auto_150px_150px] gap-4">
<div class="grow">
<input
class="input input-sm input-bordered w-full"
@ -92,7 +92,7 @@
/>
</label>
</div>
<div class="grid grid-cols-[150px_150px_auto] gap-4 mt-2">
<div class="grid xs:grid-cols-[150px_150px_auto] gap-4 mt-2">
<div>
<label class="form-control w-full">
<div class="label">
@ -158,7 +158,7 @@
required
/>
</label>
<label class="form-control w-full max-w-[150px] mt-2">
<label class="form-control w-full xs:max-w-[150px] mt-2">
<div class="label">
<span class="label-text">Border Width</span>
</div>

4
pages/player.vue
View File

@ -1379,9 +1379,9 @@ function addTemplate() {
display: none;
}
.splitpanes__splitter {
/*.splitpanes__splitter {
display: none !important;
}
}*/
.playlist-pane {
width: 100% !important;