From 61e440579a6788a4bf166f28d76fefe977d37674 Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Wed, 1 May 2024 09:41:42 +0100
Subject: [PATCH] feat(RepoPage): show repo details on mobile

on the about page only

this is usually displayed in the side bar but that is hidden on mobile
---
 src/lib/wrappers/RepoPageWrapper.svelte | 13 +++++++++++--
 src/routes/repo/[repo_id]/+page.svelte  |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/lib/wrappers/RepoPageWrapper.svelte b/src/lib/wrappers/RepoPageWrapper.svelte
index 76107b8..6534a69 100644
--- a/src/lib/wrappers/RepoPageWrapper.svelte
+++ b/src/lib/wrappers/RepoPageWrapper.svelte
@@ -14,6 +14,7 @@
   export let identifier = ''
   export let selected_tab: RepoPage = 'about'
   export let with_side_bar = true
+  export let show_details_on_mobile = false
 
   ensureSelectedRepoCollection(identifier)
   ensureProposalSummaries(identifier)
@@ -60,8 +61,16 @@
         <div class="md:mr-2 md:w-2/3">
           <slot />
         </div>
-        <div class="prose ml-2 hidden w-1/3 md:flex">
-          <RepoDetails repo_id={identifier} />
+        <div
+          class:hidden={!show_details_on_mobile}
+          class=" rounded-lg border border-base-400 md:flex md:w-1/3 md:border-none"
+        >
+          <div class="border-b border-base-400 bg-base-300 px-6 py-3 md:hidden">
+            <h4 class="">Repository Details</h4>
+          </div>
+          <div class="prose my-3 px-6 md:ml-2 md:px-0">
+            <RepoDetails repo_id={identifier} />
+          </div>
         </div>
       </div>
     </Container>
diff --git a/src/routes/repo/[repo_id]/+page.svelte b/src/routes/repo/[repo_id]/+page.svelte
index bd5524e..cea0044 100644
--- a/src/routes/repo/[repo_id]/+page.svelte
+++ b/src/routes/repo/[repo_id]/+page.svelte
@@ -13,7 +13,7 @@
   }
 </script>
 
-<RepoPageWrapper {identifier} selected_tab="about">
+<RepoPageWrapper {identifier} selected_tab="about" show_details_on_mobile>
   <div class="my-3 rounded-lg border border-base-400">
     <div class="border-b border-base-400 bg-base-300 px-6 py-3">
       <h4 class="">README.md</h4>