From 328b9ba46c6330946618ef250ff322bc5dc0423d Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Sat, 12 Oct 2024 17:33:31 +1100
Subject: [PATCH] fixes to store page for mobile clients

---
 pages/store/[id]/index.vue | 56 +++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index 57f9d12..b12b5b6 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mx-auto w-full relative flex flex-col justify-center pt-24 z-10 overflow-hidden"
+    class="mx-auto w-full relative flex flex-col justify-center pt-32 xl:pt-24 z-10 overflow-hidden"
   >
     <!-- banner image -->
     <div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20]">
@@ -10,35 +10,16 @@
       />
     </div>
     <!-- main page -->
-    <div class="max-w-7xl w-full mx-auto bg-zinc-900 px-16 py-12 rounded-md">
+    <div class="max-w-7xl w-full min-h-screen mx-auto bg-zinc-900 px-16 py-12 rounded-md">
       <h1
-        class="text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
+        class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
       >
         {{ game.mName }}
       </h1>
 
-      <div class="mt-8 grid grid-cols-4 gap-x-10">
-        <div class="col-span-3">
-          <p class="text-lg text-zinc-400">
-            {{ game.mShortDescription }}
-          </p>
-          <div
-            class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2"
-          >
-            <img
-              v-for="image in game.mImageLibrary"
-              class="h-64 w-auto rounded"
-              :src="useObject(image)"
-            />
-          </div>
-          <div
-            v-html="descriptionHTML"
-            class="mt-12 prose prose-invert prose-blue max-w-none"
-          />
-        </div>
-
-        <div class="flex flex-col gap-y-6 items-center">
-          <img class="w-full h-auto rounded" :src="useObject(game.mCoverId)" />
+      <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-10">
+        <div class="col-start-1 md:col-start-4 flex flex-col gap-y-6 items-center">
+          <img class="w-64  h-auto rounded" :src="useObject(game.mCoverId)" />
           <button
             type="button"
             class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-xl font-semibold font-display text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
@@ -60,6 +41,27 @@
             >
           </div>
         </div>
+
+
+        <div class="row-start-2 md:row-start-1 md:col-span-3">
+          <p class="text-lg text-zinc-400">
+            {{ game.mShortDescription }}
+          </p>
+          <div
+            class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2"
+          >
+            <img
+              v-for="image in game.mImageLibrary"
+              class="h-64 w-max rounded"
+              :src="useObject(image)"
+            />
+          </div>
+          <div
+            v-html="descriptionHTML"
+            class="mt-12 prose prose-invert prose-blue max-w-none"
+          />
+        </div>
+
       </div>
     </div>
   </div>
@@ -88,4 +90,8 @@ const icons = {
   [Platform.Linux]: LinuxLogo,
   [Platform.Windows]: WindowsLogo,
 };
+
+useHead({
+  title: game.mName
+})
 </script>