Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2025-10-31 12:42:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(SubscriptionsPage): styling changes

Browse Source 
- show channel info as cards
- only show sub count info if subs are > 0
This commit is contained in:
Sai Karthik
2022-11-26 16:34:12 +05:30
parent b16b03cfd7
commit d8e1139e82
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/SubscriptionsPage.vue
View File

@@ -1,6 +1,6 @@
<template>
<h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" />
<!-- import / export section -->
<div class="flex justify-between w-full">
<div class="flex">
<button class="btn mx-1">
@@ -8,25 +8,30 @@
</button>
<button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" />
</div>
<i18n-t keypath="subscriptions.subscribed_channels_count">{{ subscriptions.length }}</i18n-t>
<!-- subscriptions count, only shown if there are any -->
<i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
subscriptions.length
}}</i18n-t>
</div>
<hr />
<div class="grid">
<div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url">
<div class="flex justify-center place-items-center">
<div class="w-full flex justify-between items-center">
<router-link :to="subscription.url" class="flex text-center font-bold text-4xl">
<img :src="subscription.avatar" class="rounded-full h-[fit-content]" width="48" height="48" />
<span class="mx-2" v-text="subscription.name" />
</router-link>
<button
class="btn w-min"
@click="handleButton(subscription)"
v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
/>
</div>
</div>
<!-- Subscriptions card list -->
<div class="xl:flex <md:flex-wrap">
<!-- channel info card -->
<div
class="col m-2 p-1 border rounded-lg border-gray-500"
v-for="subscription in subscriptions"
:key="subscription.url"
>
<router-link :to="subscription.url" class="flex p-2 font-bold text-4x4">
<img :src="subscription.avatar" class="rounded-full h-[fit-content]" width="48" height="48" />
<span class="self-center mx-2" v-text="subscription.name" />
</router-link>
<!-- subscribe / unsubscribe btn -->
<button
class="btn w-full mt-2"
@click="handleButton(subscription)"
v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
/>
</div>
</div>
<br />