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

add overflow text to downloads.

Browse source
This commit is contained in:
ArabCoders 2023-11-29 22:52:55 +03:00
parent a73c32ea66
commit 690cc7460e
3 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/assets/css/style.css
View file

@ -35,6 +35,13 @@
user-select: none; user-select: none;
} }
.is-text-overflow {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
* { * {
unicode-bidi: plaintext; unicode-bidi: plaintext;
@ -72,4 +79,11 @@
.is-unselectable { .is-unselectable {
user-select: none; user-select: none;
} }
.is-text-overflow {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }

4
frontend/src/components/Page-Completed.vue
View file

@ -68,8 +68,8 @@
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-6" v-for="item in completed" :key="item._id"> <div class="column is-6" v-for="item in completed" :key="item._id">
<div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }"> <div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
<header class="card-header el has-tooltip" :data-tooltip="item.title"> <header class="card-header has-tooltip" :data-tooltip="item.title">
<div class="card-header-title has-text-centered el is-block"> <div class="card-header-title has-text-centered is-text-overflow is-block">
<a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')" <a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')"
@click.prevent="$emit('playItem', item)"> @click.prevent="$emit('playItem', item)">
{{ item.title }} {{ item.title }}

4
frontend/src/components/Page-Downloading.vue
View file

@ -37,8 +37,8 @@
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-6" v-for="item in queue" :key="item._id"> <div class="column is-6" v-for="item in queue" :key="item._id">
<div class="card"> <div class="card">
<header class="card-header el has-tooltip" :data-tooltip="item.title"> <header class="card-header has-tooltip" :data-tooltip="item.title">
<div class="card-header-title has-text-centered el is-block"> <div class="card-header-title has-text-centered is-text-overflow is-block">
{{ item.title }} {{ item.title }}
</div> </div>
</header> </header>