From d8e1139e82ff719277b6f4f0af60be91abb5532d Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Sat, 26 Nov 2022 16:34:12 +0530
Subject: [PATCH 1/3] refactor(SubscriptionsPage): styling changes

- show channel info as cards
- only show sub count info if subs are > 0
---
 src/components/SubscriptionsPage.vue | 41 ++++++++++++++++------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index d4493b6f..993ab7fb 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -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 />

From 84bce5d0ac93affe6390b13bf8a70eb12b6b6062 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Sat, 26 Nov 2022 16:53:07 +0530
Subject: [PATCH 2/3] fix(SubscriptionsPage): fix card arrangement with more
 channels

---
 src/components/SubscriptionsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 993ab7fb..7781877d 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -15,7 +15,7 @@
     </div>
     <hr />
     <!-- Subscriptions card list -->
-    <div class="xl:flex <md:flex-wrap">
+    <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"

From 4b77761034a1713cc92713ce049d971b7aa5fe76 Mon Sep 17 00:00:00 2001
From: Sai Karthik <kskarthik@disroot.org>
Date: Sat, 26 Nov 2022 17:34:57 +0530
Subject: [PATCH 3/3] add line break

---
 src/components/SubscriptionsPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 7781877d..63c44d10 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -13,6 +13,7 @@
             subscriptions.length
         }}</i18n-t>
     </div>
+    <br />
     <hr />
     <!-- Subscriptions card list -->
     <div class="xl:grid xl:grid-cols-5 <md:flex-wrap">