feat(build): improve layout of images/video

KeziahMoselle · Apr 14, 2024 · 6b0a279 · 6b0a279
1 parent c86ce18
commit 6b0a279
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/frontend/src/components/molecules/LikeBuildButton.vue b/frontend/src/components/molecules/LikeBuildButton.vue
@@ -8,6 +8,7 @@
   const props = defineProps<{
     build?: ErBuild,
     hasVoted?: boolean
+    class?: string
   }>()
 
   const hasVoted = ref(props.hasVoted)

diff --git a/frontend/src/pages/build/[id].astro b/frontend/src/pages/build/[id].astro
@@ -11,7 +11,7 @@ const REGEX_YOUTUBE_URL = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/|shorts\
 const { id } = Astro.params
 
 const build: ErBuild = await apiFetch(`/api/er-builds/${id}`)
-const [, youtubeId] = build.youtube_url.match(REGEX_YOUTUBE_URL)
+const youtubeMatches = build.youtube_url?.match(REGEX_YOUTUBE_URL)
 ---
 
 <script>
@@ -46,19 +46,31 @@ const [, youtubeId] = build.youtube_url.match(REGEX_YOUTUBE_URL)
     </div>
   </section>
 
-  <section class="container grid md:grid-cols-2 gap-4">
+  <section class:list={[
+    'container grid gap-4',
+    {
+      'md:grid-cols-2': build.youtube_url && build.images.length > 0
+    }
+  ]}>
     {build.youtube_url && (
       <div class="plyr__video-embed" id="player">
         <iframe
-          src={`https://www.youtube.com/embed/${youtubeId}?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1`}
+          src={`https://www.youtube.com/embed/${youtubeMatches[1]}?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1`}
           allowfullscreen
           allowtransparency
           allow="autoplay"
         ></iframe>
       </div>
     )}
 
-    <div class="grid grid-cols-2 grid-rows-2 gap-2">
+    <div
+      class:list={[
+        'grid gap-2',
+        {
+          'grid-cols-2': build.images.length > 1,
+          'grid-rows-2': build.images.length > 2
+        }
+      ]}>
       { build.images.map((image) => (
         <img
           class="zoomable aspect-video h-full object-contain"
@@ -71,4 +83,8 @@ const [, youtubeId] = build.youtube_url.match(REGEX_YOUTUBE_URL)
   <section class="mt-8 py-8 border-t">
     <Build build={build} client:visible/>
   </section>
+
+  <section class="my-8">
+    {JSON.stringify(build.description, null, 2)}
+  </section>
 </Layout>