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

truncate oveflowing error text with option to display all on click

Browse source
This commit is contained in:
arabcoders 2025-05-01 18:51:23 +03:00
parent cc65b4b3ae
commit 28ea6c6aa9
1 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ui/components/History.vue
View file

@ -110,10 +110,10 @@
<div class="is-text-overflow" v-tooltip="item.title"> <div class="is-text-overflow" v-tooltip="item.title">
<NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink> <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
</div> </div>
<div v-if="item.error"> <div v-if="item.error" class="is-text-overflow is-pointer" @click="toggle_class($event)">
<span class="has-text-danger">{{ item.error }}</span> <span class="has-text-danger">{{ item.error }}</span>
</div> </div>
<div v-if="showMessage(item)"> <div v-if="showMessage(item)" class="is-text-overflow is-pointer" @click="toggle_class($event)">
<span class="has-text-danger">{{ item.msg }}</span> <span class="has-text-danger">{{ item.msg }}</span>
</div> </div>
</td> </td>
@ -242,10 +242,14 @@
<div class="card-content"> <div class="card-content">
<div class="columns is-mobile is-multiline"> <div class="columns is-mobile is-multiline">
<div class="column is-12" v-if="item.error"> <div class="column is-12" v-if="item.error">
<span class="has-text-danger">{{ item.error }}</span> <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
<span class="has-text-danger">{{ item.error }}</span>
</div>
</div> </div>
<div class="column is-12" v-if="showMessage(item)"> <div class="column is-12" v-if="showMessage(item)">
<span class="has-text-danger">{{ item.msg }}</span> <div class="is-text-overflow is-pointer" @click="toggle_class($event)">
<span class="has-text-danger">{{ item.msg }}</span>
</div>
</div> </div>
<div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable"> <div class="column is-half-mobile has-text-centered is-text-overflow is-unselectable">
<span class="icon-text"> <span class="icon-text">
@ -686,4 +690,6 @@ const downloadSelected = () => {
body.removeChild(link); body.removeChild(link);
} }
} }
const toggle_class = e => e.currentTarget.classList.toggle('is-text-overflow')
</script> </script>