Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-25 23:17:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1823 from kskarthik/master

Browse Source 
refactor(SubscriptionsPage): styling changes
This commit is contained in:
Kavin 2022-11-26 13:49:57 +00:00 committed by GitHub
commit f93db52e6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
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,31 @@
</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>
<br />
<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:grid xl:grid-cols-5 <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 />