fix width

This commit is contained in:
jb-alvarado 2024-04-15 08:51:37 +02:00
parent 0dde8e3071
commit 4ea1984c44

View File

@ -103,17 +103,17 @@
<span class="loading loading-spinner loading-lg" /> <span class="loading loading-spinner loading-lg" />
</div> </div>
<div <div
class="grid grid-cols-[70px_auto_75px_70px_70px] md:grid-cols-[70px_auto_75px_70px_70px_70px_70px_80px_60px] bg-base-100 rounded-tr-lg py-2 px-3 border-b border-my-gray" class="grid grid-cols-[80px_auto_90px_80px_80px] md:grid-cols-[80px_auto_90px_80px_80px_80px_85px_100px_80px] bg-base-100 rounded-tr-lg border-b border-my-gray"
> >
<div>{{ $t('player.start') }}</div> <div class="px-3 py-2">{{ $t('player.start') }}</div>
<div>{{ $t('player.file') }}</div> <div class="px-3 py-2">{{ $t('player.file') }}</div>
<div class="text-center">{{ $t('player.play') }}</div> <div class="px-3 py-2 text-center">{{ $t('player.play') }}</div>
<div class="">{{ $t('player.duration') }}</div> <div class="px-3 py-2">{{ $t('player.duration') }}</div>
<div class="hidden md:flex">{{ $t('player.in') }}</div> <div class="px-3 py-2 hidden md:flex">{{ $t('player.in') }}</div>
<div class="hidden md:flex">{{ $t('player.out') }}</div> <div class="px-3 py-2 hidden md:flex">{{ $t('player.out') }}</div>
<div class="hidden md:flex justify-center">{{ $t('player.ad') }}</div> <div class="px-3 py-2 hidden md:flex justify-center">{{ $t('player.ad') }}</div>
<div class="text-center">{{ $t('player.edit') }}</div> <div class="px-3 py-2 text-center">{{ $t('player.edit') }}</div>
<div class="hidden md:flex justify-center">{{ $t('player.delete') }}</div> <div class="px-3 py-2 hidden md:flex justify-center">{{ $t('player.delete') }}</div>
</div> </div>
<div id="scroll-container" class="h-[calc(100%-44px)] overflow-auto"> <div id="scroll-container" class="h-[calc(100%-44px)] overflow-auto">
<Sortable <Sortable
@ -130,7 +130,7 @@
<template #item="{ element, index }"> <template #item="{ element, index }">
<li <li
:id="`clip_${index}`" :id="`clip_${index}`"
class="draggable grid grid-cols-[70px_auto_75px_70px_70px] md:grid-cols-[70px_auto_75px_70px_70px_70px_70px_80px_60px] h-[38px] px-3 py-[8px]" class="draggable grid grid-cols-[80px_auto_90px_80px_80px] md:grid-cols-[80px_auto_90px_80px_80px_80px_85px_100px_80px] h-[38px]"
:class=" :class="
index === playlistStore.currentClipIndex && listDate === todayDate index === playlistStore.currentClipIndex && listDate === todayDate
? 'bg-lime-500/30' ? 'bg-lime-500/30'
@ -138,19 +138,22 @@
" "
:key="element.uid" :key="element.uid"
> >
<div>{{ secondsToTime(element.begin) }}</div> <div class="px-3 py-2">{{ secondsToTime(element.begin) }}</div>
<div class="truncate" :class="{ 'grabbing cursor-grab': width > 768 }"> <div
class="px-3 py-2 truncate"
:class="{ 'grabbing cursor-grab': width > 768 }"
>
{{ filename(element.source) }} {{ filename(element.source) }}
</div> </div>
<div class="text-center"> <div class="px-3 py-2 text-center">
<button @click=";(showPreviewModal = true), setPreviewData(element.source)"> <button @click=";(showPreviewModal = true), setPreviewData(element.source)">
<i class="bi-play-fill" /> <i class="bi-play-fill" />
</button> </button>
</div> </div>
<div>{{ secToHMS(element.duration) }}</div> <div class="px-3 py-2">{{ secToHMS(element.duration) }}</div>
<div class="hidden md:flex">{{ secToHMS(element.in) }}</div> <div class="px-3 py-2 hidden md:flex">{{ secToHMS(element.in) }}</div>
<div class="hidden md:flex">{{ secToHMS(element.out) }}</div> <div class="px-3 py-2 hidden md:flex">{{ secToHMS(element.out) }}</div>
<div class="hidden md:flex justify-center pt-[3px]"> <div class="px-3 py-[11px] hidden md:flex justify-center">
<input <input
class="checkbox checkbox-xs rounded" class="checkbox checkbox-xs rounded"
type="checkbox" type="checkbox"
@ -162,13 +165,13 @@
@change="setCategory($event, element)" @change="setCategory($event, element)"
/> />
</div> </div>
<div class="text-center"> <div class="px-3 py-2 text-center">
<button @click=";(showSourceModal = true), editPlaylistItem(index)"> <button @click=";(showSourceModal = true), editPlaylistItem(index)">
<i class="bi-pencil-square" /> <i class="bi-pencil-square" />
</button> </button>
</div> </div>
<div <div
class="text-center hidden md:flex justify-center hover:text-base-content/70" class="px-3 py-2 text-center hidden md:flex justify-center hover:text-base-content/70"
> >
<button @click="deletePlaylistItem(index)"> <button @click="deletePlaylistItem(index)">
<i class="bi-x-circle-fill" /> <i class="bi-x-circle-fill" />
@ -226,7 +229,11 @@
> >
<i class="bi-download" /> <i class="bi-download" />
</button> </button>
<button class="btn btn-sm btn-primary join-item" :title="$t('player.deletePlaylist')" @click="showDeleteModal = true"> <button
class="btn btn-sm btn-primary join-item"
:title="$t('player.deletePlaylist')"
@click="showDeleteModal = true"
>
<i class="bi-trash" /> <i class="bi-trash" />
</button> </button>
</div> </div>