mirror of
https://github.com/TeamPiped/Piped.git
synced 2026-04-05 07:17:00 +00:00
Migrate to tailwind + reka ui
This commit is contained in:
@@ -1,11 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-link :to="{ path: '/playlist', query: { list: playlistId } }"
|
||||
><h1 class="font-bold !text-lg hover:underline" v-text="playlist.name"
|
||||
><h1 class="text-lg! font-bold hover:underline" v-text="playlist.name"
|
||||
/></router-link>
|
||||
<span class="text-sm">
|
||||
<template v-if="playlist.uploader">
|
||||
<router-link class="link-secondary" :to="playlist.uploaderUrl" :title="playlist.uploader">
|
||||
<router-link
|
||||
class="underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400"
|
||||
:to="playlist.uploaderUrl"
|
||||
:title="playlist.uploader"
|
||||
>
|
||||
{{ playlist.uploader }}
|
||||
</router-link>
|
||||
-
|
||||
@@ -13,7 +17,7 @@
|
||||
{{ selectedIndex }} / {{ playlist.videos }}
|
||||
</span>
|
||||
</div>
|
||||
<div ref="scrollable" class="mt-4 max-h-screen-sm overflow-y-auto">
|
||||
<div ref="scrollable" class="mt-4 max-h-160 overflow-y-auto">
|
||||
<div
|
||||
v-for="(related, index) in playlist.relatedStreams"
|
||||
:key="related.url"
|
||||
@@ -22,8 +26,8 @@
|
||||
:prefer-listen="preferListen"
|
||||
>
|
||||
<router-link
|
||||
class="flex rounded px-2 py-1 hover:bg-gray-50 .dark:hover:bg-neutral-800"
|
||||
:class="{ 'bg-gray-200 .dark:bg-neutral-700': index === selectedIndex - 1 }"
|
||||
class="flex rounded-sm px-2 py-1 hover:bg-gray-50 dark:hover:bg-neutral-800"
|
||||
:class="{ 'bg-gray-200 dark:bg-neutral-700': index === selectedIndex - 1 }"
|
||||
:to="{
|
||||
path: '/watch',
|
||||
query: {
|
||||
@@ -40,16 +44,20 @@
|
||||
</div>
|
||||
|
||||
<div class="ml-2 flex flex-col">
|
||||
<span class="link" :title="related.title" v-text="related.title" />
|
||||
<span
|
||||
class="hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
|
||||
:title="related.title"
|
||||
v-text="related.title"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<router-link
|
||||
v-if="related.uploaderUrl && related.uploaderName && !hideChannel"
|
||||
class="link-secondary block overflow-hidden text-xs"
|
||||
class="block overflow-hidden text-xs underline decoration-dark-400 hover:text-dark-400 focus:text-dark-400 dark:text-gray-300 dark:decoration-dark-100 dark:hover:text-gray-400"
|
||||
:to="related.uploaderUrl"
|
||||
:title="related.uploaderName"
|
||||
>
|
||||
<span v-text="related.uploaderName" />
|
||||
<i v-if="related.uploaderVerified" class="i-fa6-solid:check ml-1.5" />
|
||||
<i-fa6-solid-check v-if="related.uploaderVerified" class="ml-1.5" />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user