Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-10 10:18:23 +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

30
src/components/SubscriptionsPage.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" /> <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 justify-between w-full">
<div class="flex"> <div class="flex">
<button class="btn mx-1"> <button class="btn mx-1">
@ -8,27 +8,33 @@
</button> </button>
<button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" /> <button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" />
</div> </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> </div>
<br />
<hr /> <hr />
<!-- Subscriptions card list -->
<div class="grid"> <div class="xl:grid xl:grid-cols-5 <md:flex-wrap">
<div class="mb-3" v-for="subscription in subscriptions" :key="subscription.url"> <!-- channel info card -->
<div class="flex justify-center place-items-center"> <div
<div class="w-full flex justify-between items-center"> class="col m-2 p-1 border rounded-lg border-gray-500"
<router-link :to="subscription.url" class="flex text-center font-bold text-4xl"> 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" /> <img :src="subscription.avatar" class="rounded-full h-[fit-content]" width="48" height="48" />
<span class="mx-2" v-text="subscription.name" /> <span class="self-center mx-2" v-text="subscription.name" />
</router-link> </router-link>
<!-- subscribe / unsubscribe btn -->
<button <button
class="btn w-min" class="btn w-full mt-2"
@click="handleButton(subscription)" @click="handleButton(subscription)"
v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`" v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
/> />
</div> </div>
</div> </div>
</div>
</div>
<br /> <br />
</template> </template>