From aaeac2ff7fdb33040c6dae815508bf31547bd45a Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Thu, 28 Jul 2022 19:58:57 +0200
Subject: [PATCH] improve mobile layout of the subscriptions page

---
 src/App.vue                          |  6 +-----
 src/components/SubscriptionsPage.vue | 12 ++++++------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 97a29085..328b980e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -106,7 +106,7 @@ b {
 }
 
 .btn {
-    @apply py-2 px-4 rounded cursor-pointer;
+    @apply h-full py-2 <md:(px-2) md:(px-4) rounded cursor-pointer;
 }
 
 .reset {
@@ -132,10 +132,6 @@ b {
     @apply h-8;
 }
 
-.btn {
-    @apply h-full;
-}
-
 .checkbox {
     @apply h-4 w-4;
 }
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 3682c5bb..21240d2d 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -1,9 +1,9 @@
 <template>
-    <h1 class="font-bold text-center" v-t="'titles.subscriptions'" />
+    <h1 class="font-bold text-center my-4" v-t="'titles.subscriptions'" />
 
     <div v-if="authenticated" class="flex justify-between w-full">
-        <div>
-            <button class="btn mr-0.5">
+        <div class="flex">
+            <button class="btn mx-1">
                 <router-link to="/import" v-t="'actions.import_from_json'" />
             </button>
             <button class="btn" @click="exportHandler" v-t="'actions.export_to_json'" />
@@ -15,10 +15,10 @@
     <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 grid grid-cols-3">
-                    <router-link :to="subscription.url" class="col-start-2 block flex text-center font-bold text-4xl">
+                <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" width="48" height="48" />
-                        <span v-text="subscription.name" />
+                        <span class="mx-2" v-text="subscription.name" />
                     </router-link>
                     <button
                         class="btn !w-min"