Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-01-22 04:27:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: unify style and hover effects of channel, playlist and video items

Browse Source
This commit is contained in:
Bnyro 2025-01-09 13:27:08 +01:00
parent 03f43d525e
commit 8d00447dff
3 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ChannelItem.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col flex-justify-between"> <div class="flex flex-col flex-justify-between">
<router-link :to="item.url"> <router-link :to="item.url" class="link font-bold">
<div class="my-4 flex justify-center"> <div class="my-4 flex justify-center">
<img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="item.thumbnail" /> <img loading="lazy" class="aspect-square w-[50%] rounded-full" :src="item.thumbnail" />
</div> </div>
@ -9,7 +9,7 @@
<i v-if="item.verified" class="i-fa6-solid:check ml-1.5" /> <i v-if="item.verified" class="i-fa6-solid:check ml-1.5" />
</p> </p>
</router-link> </router-link>
<p v-if="item.description" v-text="item.description" /> <p v-if="item.description" class="pt-1 text-sm" v-text="item.description" />
<router-link v-if="item.uploaderUrl" class="link" :to="item.uploaderUrl"> <router-link v-if="item.uploaderUrl" class="link" :to="item.uploaderUrl">
<p> <p>
<span v-text="item.uploader" /> <span v-text="item.uploader" />

11
src/components/PlaylistItem.vue
View File

@ -1,17 +1,14 @@
<template> <template>
<div class="flex flex-col flex-justify-between"> <div class="flex flex-col flex-justify-between">
<router-link :to="props.item.url"> <router-link :to="props.item.url" class="link inline-block">
<div class="relative"> <div class="relative">
<img loading="lazy" class="w-full" :src="props.item.thumbnail" /> <img loading="lazy" class="w-full" :src="props.item.thumbnail" />
</div> </div>
<p> <p class="link pt-2 font-bold" :title="props.item.name" v-text="props.item.name" />
<span v-text="props.item.name" />
<i v-if="props.item.verified" class="i-fa6-solid:check ml-1.5" />
</p>
</router-link> </router-link>
<p v-if="props.item.description" v-text="props.item.description" /> <p v-if="props.item.description" v-text="props.item.description" />
<router-link v-if="props.item.uploaderUrl" class="link" :to="props.item.uploaderUrl"> <router-link v-if="props.item.uploaderUrl" class="link-secondary text-sm" :to="props.item.uploaderUrl">
<p> <p>
<span v-text="props.item.uploaderName" /> <span v-text="props.item.uploaderName" />
<i v-if="props.item.uploaderVerified" class="i-fa6-solid:check ml-1.5" /> <i v-if="props.item.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
@ -21,7 +18,7 @@
<template v-if="props.item.videos >= 0"> <template v-if="props.item.videos >= 0">
<br v-if="props.item.uploaderName" /> <br v-if="props.item.uploaderName" />
<strong v-text="`${props.item.videos} ${$t('video.videos')}`" /> <span class="text-sm" v-text="`${props.item.videos} ${$t('video.videos')}`" />
</template> </template>
<br /> <br />

2
src/components/VideoItem.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div v-if="showVideo" class="flex flex-col flex-justify-between"> <div v-if="showVideo" class="flex flex-col flex-justify-between">
<router-link <router-link
class="inline-block w-full focus:text-red-400 hover:text-red-400" class="link inline-block w-full"
:to="{ :to="{
path: '/watch', path: '/watch',
query: { query: {