update packages, fix css on mobile, close mobil menu correctly
This commit is contained in:
jb-alvarado
parent
865b302697
commit
c897226188
@ -3,20 +3,25 @@
|
||||
<NuxtLink class="navbar-brand min-w-[46px] p-2" href="/">
|
||||
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
|
||||
</NuxtLink>
|
||||
<EventStatus v-if="route.name?.toString().includes('player__')" class="z-10"/>
|
||||
<EventStatus v-if="route.name?.toString().includes('player__')" class="z-10" />
|
||||
<div class="navbar-end w-1/5 grow">
|
||||
<label class="swap swap-rotate me-2 md:hidden">
|
||||
<label class="swap swap-rotate me-2 2sm:hidden">
|
||||
<input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" />
|
||||
<SvgIcon name="swap-on" classes="w-5 h-5" />
|
||||
<SvgIcon name="swap-off" classes="w-5 h-5" />
|
||||
</label>
|
||||
<div class="dropdown dropdown-end z-50">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost md:hidden">
|
||||
<details ref="menuDropdown" tabindex="0" class="dropdown dropdown-end z-50">
|
||||
<summary class="btn btn-ghost 2sm:hidden" @click="clickMenu()" @blur="blurMenu()">
|
||||
<SvgIcon name="burger" classes="w-5 h-5" />
|
||||
</div>
|
||||
</summary>
|
||||
<ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
|
||||
<NuxtLink :to="item.link" class="h-[27px] text-base" exact-active-class="is-active">
|
||||
<NuxtLink
|
||||
:to="item.link"
|
||||
class="h-[27px] text-base"
|
||||
exact-active-class="is-active"
|
||||
@click="closeMenu()"
|
||||
>
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
@ -32,7 +37,7 @@
|
||||
<ul class="p-2">
|
||||
<li v-for="(channel, index) in configStore.channels" :key="index">
|
||||
<span>
|
||||
<a class="dropdown-item" @click="selectChannel(index)">{{ channel.name }}</a>
|
||||
<a class="dropdown-item cursor-pointer" @click="selectChannel(index)">{{ channel.name }}</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -44,9 +49,9 @@
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-end hidden md:flex w-4/5 min-w-[750px]">
|
||||
<div class="navbar-end hidden 2sm:flex w-4/5 min-w-[750px]">
|
||||
<ul class="menu menu-sm menu-horizontal px-1">
|
||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
|
||||
<NuxtLink
|
||||
@ -68,7 +73,7 @@
|
||||
</summary>
|
||||
<ul class="p-2 bg-base-100 rounded-md !mt-1 w-36" tabindex="0">
|
||||
<li v-for="(channel, index) in configStore.channels" :key="index">
|
||||
<a class="dropdown-item" @click="selectChannel(index)">
|
||||
<a class="dropdown-item cursor-pointer" @click="selectChannel(index)">
|
||||
{{ channel.name }}
|
||||
</a>
|
||||
</li>
|
||||
@ -103,6 +108,9 @@ const authStore = useAuth()
|
||||
const configStore = useConfig()
|
||||
const indexStore = useIndex()
|
||||
|
||||
const menuDropdown = ref()
|
||||
const isOpen = ref(false)
|
||||
|
||||
const menuItems = ref([
|
||||
{ name: t('button.home'), link: localePath({ name: 'index' }) },
|
||||
{ name: t('button.player'), link: localePath({ name: 'player' }) },
|
||||
@ -116,6 +124,33 @@ if (colorMode.value === 'dark') {
|
||||
indexStore.darkMode = true
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
setTimeout(() => {
|
||||
isOpen.value = false
|
||||
menuDropdown.value.removeAttribute('open')
|
||||
console.log('close')
|
||||
}, 200)
|
||||
}
|
||||
|
||||
function clickMenu() {
|
||||
console.log('close')
|
||||
isOpen.value = !isOpen.value
|
||||
|
||||
if (!isOpen.value) {
|
||||
menuDropdown.value.removeAttribute('open')
|
||||
}
|
||||
}
|
||||
|
||||
function blurMenu() {
|
||||
if (isOpen.value) {
|
||||
isOpen.value = !isOpen.value
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
menuDropdown.value.removeAttribute('open')
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
|
||||
function closeDropdown($event: any) {
|
||||
setTimeout(() => {
|
||||
$event.target.parentNode.removeAttribute('open')
|
||||
|
||||
@ -170,26 +170,26 @@
|
||||
:key="item.start"
|
||||
class="flex flex-col gap-1 justify-center items-center border border-my-gray rounded mt-1 p-1"
|
||||
>
|
||||
<div class="grid grid-cols-[60px_67px_70px_67px_70px] join">
|
||||
<div class="flex flex-wrap xs:grid xs:grid-cols-[58px_64px_67px_64px_67px] xs:join">
|
||||
<div
|
||||
class="input input-sm input-bordered join-item px-2 text-center bg-base-200 leading-7"
|
||||
class="input input-sm input-bordered join-item px-1 text-center bg-base-200 leading-7"
|
||||
>
|
||||
{{ t('player.start') }}:
|
||||
</div>
|
||||
<input
|
||||
v-model="item.start"
|
||||
type="text"
|
||||
class="input input-sm input-bordered join-item px-2 text-center"
|
||||
class="input input-sm input-bordered join-item px-1 text-center"
|
||||
/>
|
||||
<div
|
||||
class="input input-sm input-bordered join-item px-2 text-center bg-base-200 leading-7"
|
||||
class="input input-sm input-bordered join-item px-1 text-center bg-base-200 leading-7"
|
||||
>
|
||||
{{ t('player.duration') }}:
|
||||
</div>
|
||||
<input
|
||||
v-model="item.duration"
|
||||
type="text"
|
||||
class="input input-sm input-bordered join-item px-2 text-center"
|
||||
class="input input-sm input-bordered join-item px-1 text-center"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-sm input-bordered join-item"
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
{{ t('player.play') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center">
|
||||
<th class="w-[85px] p-0 text-center hidden md:table-cell">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ t('player.duration') }}
|
||||
</div>
|
||||
@ -92,7 +92,7 @@
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
</td>
|
||||
<td class="py-2 text-center">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-2 text-center hidden md:table-cell">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell">
|
||||
{{ secToHMS(element.in) }}
|
||||
</td>
|
||||
|
||||
@ -145,6 +145,13 @@ export default defineNuxtConfig({
|
||||
build: {
|
||||
chunkSizeWarningLimit: 800000,
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
silenceDeprecations: ['legacy-js-api'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
experimental: {
|
||||
|
||||
963
package-lock.json
generated
963
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -13,17 +13,17 @@
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/color-mode": "^3.4.4",
|
||||
"@nuxtjs/color-mode": "^3.5.1",
|
||||
"@pinia/nuxt": "^0.5.4",
|
||||
"@vueform/multiselect": "^2.6.9",
|
||||
"@vueform/multiselect": "^2.6.10",
|
||||
"@vuepic/vue-datepicker": "^9.0.3",
|
||||
"@vueuse/nuxt": "^11.0.3",
|
||||
"@vueuse/nuxt": "^11.1.0",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"mpegts.js": "^1.7.3",
|
||||
"nuxt": "3.13.1",
|
||||
"nuxt": "3.13.2",
|
||||
"pinia": "^2.2.2",
|
||||
"sortablejs-vue3": "^1.2.11",
|
||||
"splitpanes": "^3.1.5",
|
||||
@ -31,17 +31,17 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint": "^0.5.7",
|
||||
"@nuxtjs/i18n": "^8.5.3",
|
||||
"@nuxtjs/i18n": "^8.5.5",
|
||||
"@nuxtjs/tailwindcss": "^6.12.1",
|
||||
"@types/lodash": "^4.17.7",
|
||||
"@types/lodash": "^4.17.9",
|
||||
"@types/video.js": "^7.3.58",
|
||||
"daisyui": "^4.12.10",
|
||||
"mini-svg-data-uri": "^1.4.4",
|
||||
"postcss": "^8.4.45",
|
||||
"postcss": "^8.4.47",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"sass": "^1.78.0",
|
||||
"sass-loader": "^16.0.1",
|
||||
"vue": "^3.5.4",
|
||||
"vue-router": "^4.4.4"
|
||||
"sass": "^1.79.3",
|
||||
"sass-loader": "^16.0.2",
|
||||
"vue": "^3.5.8",
|
||||
"vue-router": "^4.4.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="h-full">
|
||||
<PlayerControl />
|
||||
<div class="flex justify-end p-1">
|
||||
<div class="h-[32px] grid grid-cols-2">
|
||||
<div class="text-warning flex justify-end p-2">
|
||||
<div class="h-[32px] flex">
|
||||
<div class="text-warning flex-none flex justify-end p-2">
|
||||
<div
|
||||
v-if="firstLoad && beforeDayStart"
|
||||
class="tooltip tooltip-right tooltip-warning"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import daisyui from 'daisyui'
|
||||
import svgToDataUri from 'mini-svg-data-uri'
|
||||
|
||||
module.exports = {
|
||||
@ -120,5 +121,5 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [require('daisyui')],
|
||||
plugins: [daisyui],
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user