danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

some facelift

Browse source
This commit is contained in:
ArabCoders 2025-01-03 20:02:19 +03:00
parent 812e92cf23
commit b25ee6dad8
2 changed files with 24 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/components/History.vue
View file

@ -85,12 +85,9 @@
</div> </div>
<div class="card-header-icon"> <div class="card-header-icon">
<a :href="makeDownload(config, item)" :download="item.filename?.split('/').reverse()[0]" <a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
class="has-text-primary" v-tooltip="'Download item.'" <span class="icon"><i class="fa-solid fa-copy" /></span>
v-if="item.filename && item.status === 'finished'">
<span class="icon"><i class="fa-solid fa-download" /></span>
</a> </a>
<button @click="hideThumbnail = !hideThumbnail"> <button @click="hideThumbnail = !hideThumbnail">
<span class="icon"><i class="fa-solid" <span class="icon"><i class="fa-solid"
:class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span> :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
@ -173,14 +170,18 @@
<div class="columns is-mobile is-multiline"> <div class="columns is-mobile is-multiline">
<div class="column is-half-mobile" v-if="item.status != 'finished'"> <div class="column is-half-mobile" v-if="item.status != 'finished'">
<a class="button is-warning is-fullwidth" v-tooltip="'Re-queue item.'" @click="reQueueItem(item)"> <a class="button is-warning is-fullwidth" v-tooltip="'Re-queue item.'" @click="reQueueItem(item)">
<span class="icon"><i class="fa-solid fa-rotate-right" /></span> <span class="icon-text is-block">
<span class="is-hidden-mobile">Re-queue</span> <span class="icon"><i class="fa-solid fa-rotate-right" /></span>
<span>Re-queue</span>
</span>
</a> </a>
</div> </div>
<div class="column is-half-mobile"> <div class="column is-half-mobile">
<a class="button is-danger is-fullwidth" @click="removeItem(item)"> <a class="button is-danger is-fullwidth" @click="removeItem(item)">
<span class="icon"><i class="fa-solid fa-trash-can" /></span> <span class="icon-text is-block">
<span class="is-hidden-mobile">Remove</span> <span class="icon"><i class="fa-solid fa-trash-can" /></span>
<span>Remove</span>
</span>
</a> </a>
</div> </div>
<div class="column is-half-mobile" v-if="config.app?.keep_archive && item.status != 'finished'"> <div class="column is-half-mobile" v-if="config.app?.keep_archive && item.status != 'finished'">
@ -188,15 +189,17 @@
@click="archiveItem(item)"> @click="archiveItem(item)">
<span class="icon-text is-block"> <span class="icon-text is-block">
<span class="icon"><i class="fa-solid fa-box-archive" /></span> <span class="icon"><i class="fa-solid fa-box-archive" /></span>
<span class="is-hidden-mobile">Archive</span> <span>Archive</span>
</span> </span>
</a> </a>
</div> </div>
<div class="column is-half-mobile" v-if="item.filename && item.status === 'finished'"> <div class="column is-half-mobile" v-if="item.filename && item.status === 'finished'">
<a class="button is-link is-fullwidth" :href="makeDownload(config, item)" <a class="button is-link is-fullwidth" :href="makeDownload(config, item)"
:download="item.filename?.split('/').reverse()[0]"> :download="item.filename?.split('/').reverse()[0]">
<span class="icon"><i class="fa-solid fa-download" /></span> <span class="icon-text is-block">
<span class="is-hidden-mobile">Download</span> <span class="icon"><i class="fa-solid fa-download" /></span>
<span>Download</span>
</span>
</a> </a>
</div> </div>
</div> </div>

30
ui/components/Queue.vue
View file

@ -37,11 +37,14 @@
<LateLoader :unrender="true" :min-height="265" class="column is-6" v-for="item in stateStore.queue" <LateLoader :unrender="true" :min-height="265" class="column is-6" v-for="item in stateStore.queue"
:key="item._id"> :key="item._id">
<div class="card"> <div class="card">
<header class="card-header has-tooltip" v-tooltip="item.title"> <header class="card-header">
<div class="card-header-title has-text-centered is-text-overflow is-block"> <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
{{ item.title }} <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
</div> </div>
<div class="card-header-icon"> <div class="card-header-icon">
<a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
<span class="icon"><i class="fa-solid fa-copy" /></span>
</a>
<button @click="hideThumbnail = !hideThumbnail"> <button @click="hideThumbnail = !hideThumbnail">
<span class="icon"><i class="fa-solid" <span class="icon"><i class="fa-solid"
:class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span> :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
@ -50,16 +53,11 @@
</header> </header>
<div v-if="false === hideThumbnail" class="card-image"> <div v-if="false === hideThumbnail" class="card-image">
<figure class="image is-3by1" v-if="item.extras?.thumbnail"> <figure class="image is-3by1" v-if="item.extras?.thumbnail">
<NuxtLink v-tooltip="item.title" :href="item.url" target="_blank"> <img :alt="item.title"
<img :src="config.app.url_host + config.app.url_prefix + 'api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
:src="config.app.url_host + config.app.url_prefix + 'api/thumbnail?url=' + encodePath(item.extras.thumbnail)"
:alt="item.title" />
</NuxtLink>
</figure> </figure>
<figure class="image is-3by1" v-else> <figure class="image is-3by1" v-else>
<NuxtLink target="_blank" :href="item.url" v-tooltip="`Open: ${item.title} link`"> <img :src="config.app.url_host + config.app.url_prefix + 'images/placeholder.png'" />
<img :src="config.app.url_host + config.app.url_prefix + 'images/placeholder.png'" :alt="item.title" />
</NuxtLink>
</figure> </figure>
</div> </div>
<div class="card-content"> <div class="card-content">
@ -104,16 +102,6 @@
</span> </span>
</button> </button>
</div> </div>
<div class="column is-half-mobile">
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
<span class="icon-text is-block">
<span class="icon">
<i class="fa-solid fa-up-right-from-square" />
</span>
<span>Visit Link</span>
</span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>