Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-08-20 20:51:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix some layout issues.

Browse Source
This commit is contained in:
Kavin
2026-08-13 23:10:55 +05:30
parent a0a0727703
commit 0451facc2e
2 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/SubscriptionsPage.vue
View File

@@ -57,7 +57,7 @@
@click="selectGroup(group)" @click="selectGroup(group)"
> >
<span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" /> <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
<div v-if="group.groupName != '' && selectedGroup == group"> <div v-if="group.groupName != '' && selectedGroup == group" class="inline-flex">
<i-fa6-solid-pen class="mx-2" @click="showEditGroupModal = true" /> <i-fa6-solid-pen class="mx-2" @click="showEditGroupModal = true" />
<i-fa6-solid-circle-minus class="mx-2" @click="groupToDelete = group.groupName" /> <i-fa6-solid-circle-minus class="mx-2" @click="groupToDelete = group.groupName" />
</div> </div>
@@ -83,11 +83,11 @@
<div <div
v-for="subscription in filteredSubscriptions" v-for="subscription in filteredSubscriptions"
:key="subscription.url" :key="subscription.url"
class="m-2 rounded-lg border border-gray-500 p-1" class="m-2 min-w-0 rounded-lg border border-gray-500 p-1"
> >
<router-link :to="subscription.url" class="flex p-2 text-4xl font-bold"> <router-link :to="subscription.url" class="flex p-2 text-4xl font-bold">
<img :src="subscription.avatar" class="h-fit rounded-full" width="48" height="48" /> <img :src="subscription.avatar" class="h-fit rounded-full" width="48" height="48" />
<span class="mx-2 self-center" v-text="subscription.name" /> <span class="mx-2 min-w-0 self-center truncate" v-text="subscription.name" />
</router-link> </router-link>
<!-- subscribe / unsubscribe btn --> <!-- subscribe / unsubscribe btn -->
<button <button

45
src/components/WatchVideo.vue
View File

@@ -128,30 +128,35 @@
:playlist-index="index" :playlist-index="index"
@close="showShareModal = !showShareModal" @close="showShareModal = !showShareModal"
/> />
<div class="ml-auto flex flex-wrap gap-1"> <div class="ml-auto flex flex-wrap gap-1 items-center">
<!-- Subscribe Button --> <!-- Subscribe Button -->
<button <button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300" class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="downloadCurrentFrame" @click="downloadCurrentFrame"
> >
{{ $t("actions.download_frame") }}<i-fa6-solid-download class="ml-1" /> <span>{{ $t("actions.download_frame") }}</span>
<i-fa6-solid-download class="ml-1" />
</button> </button>
<button <button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300" class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="showModal = !showModal" @click="showModal = !showModal"
> >
{{ $t("actions.add_to_playlist") }}<i-fa6-solid-circle-plus class="ml-1" /> <span>{{ $t("actions.add_to_playlist") }}</span>
<i-fa6-solid-circle-plus class="ml-1" />
</button> </button>
<button <button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300" class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="subscribeHandler" @click="subscribeHandler"
v-text=" >
$t('actions.' + (subscribed ? 'unsubscribe' : 'subscribe')) + <span>
' - ' + {{
numberFormat(video.uploaderSubscriberCount) $t("actions." + (subscribed ? "unsubscribe" : "subscribe")) +
" " - " +
/> numberFormat(video.uploaderSubscriberCount)
<div class="flex flex-wrap gap-1"> }}
</span>
</button>
<div class="flex flex-wrap gap-1 items-center">
<!-- RSS Feed button --> <!-- RSS Feed button -->
<a <a
v-if="video.uploaderUrl" v-if="video.uploaderUrl"
@@ -160,16 +165,18 @@
role="button" role="button"
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`" :href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
target="_blank" target="_blank"
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300" class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
> >
<i-fa6-solid-rss class="mx-1.5" /> <i-fa6-solid-rss class="mx-1.5" />
</a> </a>
<!-- Share Dialog --> <!-- Share Dialog -->
<button <button
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300" class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
@click="showShareModal = !showShareModal" @click="showShareModal = !showShareModal"
> >
<i18n-t class="max-lg:hidden" keypath="actions.share" tag="strong"></i18n-t> <strong class="max-lg:hidden">
<i18n-t keypath="actions.share" tag="span"></i18n-t>
</strong>
<i-fa6-solid-share class="mx-1.5" /> <i-fa6-solid-share class="mx-1.5" />
</button> </button>
<!-- YouTube --> <!-- YouTube -->
@@ -185,12 +192,12 @@
:to="toggleListenUrl" :to="toggleListenUrl"
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title" :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title" :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
class="inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300" class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
> >
<div> <span>
<i-fa6-solid-tv v-if="isListening" class="mx-1.5" /> <i-fa6-solid-tv v-if="isListening" class="mx-1.5" />
<i-fa6-solid-headphones v-else class="mx-1.5" /> <i-fa6-solid-headphones v-else class="mx-1.5" />
</div> </span>
</router-link> </router-link>
</div> </div>
</div> </div>