From 81e93339b37d36570c595008ddbd85a5f95ae017 Mon Sep 17 00:00:00 2001
From: dragongoose <dragonmail14@protonmail.com>
Date: Tue, 11 Apr 2023 13:52:19 -0400
Subject: [PATCH] Improve mobile responsiveness

---
 src/views/CategoryView.vue | 65 +++++++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/views/CategoryView.vue b/src/views/CategoryView.vue
index fbc786c..61ba007 100644
--- a/src/views/CategoryView.vue
+++ b/src/views/CategoryView.vue
@@ -24,7 +24,7 @@ export default {
         `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`
       )
       const rawData = await res.json()
-      if (rawData.status === "ok") {
+      if (rawData.status === 'ok') {
         this.data = rawData.data
       } else {
         this.data = { status: 'error' }
@@ -56,26 +56,55 @@ export default {
   <error-message v-else-if="data.status === 'error' || !data"></error-message>
 
   <div v-else class="flex flex-col max-w-5xl mx-auto">
-    <div class="flex space-x-4 p-3">
-      <img :src="data.cover" class="self-start rounded-md" />
+    <div class="flex p-3 flex-col">
+      <div class="inline-flex space-x-4">
+        <img :src="data.cover" class="self-start rounded-md" />
 
-      <div>
-        <h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
-        <div class="inline-flex my-1 space-x-3">
-          <p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p>
-          <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
+        <div>
+          <h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
+          <div class="hidden md:block">
+            <div>
+              <div class="inline-flex my-1 space-x-3">
+                <p class="font-bold text-white text-lg">
+                  Followers: {{ abbreviate(data.followers) }}
+                </p>
+                <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
+              </div>
+
+              <ul class="mb-5">
+                <li v-for="tag in data.tags" :key="tag" class="inline-flex">
+                  <span
+                    class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
+                    >{{ tag }}</span
+                  >
+                </li>
+              </ul>
+            </div>
+          </div>
+          <p class="text-md text-gray-400 overflow-y-auto hidden md:block">
+            {{ data.description }}
+          </p>
         </div>
-
-        <ul class="mb-5">
-          <li v-for="tag in data.tags" :key="tag" class="inline-flex">
-            <span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{
-              tag
-            }}</span>
-          </li>
-        </ul>
-
-        <p class="text-md text-gray-400 overflow-y-auto">{{ data.description }}</p>
       </div>
+
+      <div class="md:hidden">
+        <div>
+          <div class="inline-flex my-1 space-x-3">
+            <p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p>
+            <p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
+          </div>
+
+          <ul class="mb-5">
+            <li v-for="tag in data.tags" :key="tag" class="inline-flex">
+              <span
+                class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm"
+                >{{ tag }}</span
+              >
+            </li>
+          </ul>
+        </div>
+      </div>
+      <p class="text-md text-gray-400 overflow-y-auto md:hidden">{{ data.description }}</p>
     </div>
 
     <div class="max-w-[58rem] mx-auto">