improve conditional rendering for Project_Collection page

milewskibogumil · Nov 11, 2024 · 7b0bc35 · 7b0bc35
1 parent 59ab656
commit 7b0bc35
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 24 deletions.
diff --git a/apps/astro/src/components/Projects/Project/Gallery.astro b/apps/astro/src/components/Projects/Project/Gallery.astro
@@ -17,22 +17,24 @@ export type Props = {
 const { heading, images } = Astro.props
 ---
 
-<section class="Gallery">
-  <header>
-    <PortableText value={heading} heading="h2" />
-  </header>
-  {
-    images.map((image, index) => (
-      <a data-fslightbox="gallery" href={`#gallery-${index}`}>
-        <Image {...image} sizes="(max-width: 56rem) 50vw, (max-width: 74rem) 33vw, 25vw" />
-      </a>
-    ))
-  }
-</section>
+{
+  heading && images?.length > 0 && (
+    <section class="Gallery">
+      <header>
+        <PortableText value={heading} heading="h2" />
+      </header>
+      {images.map((image, index) => (
+        <a data-fslightbox="gallery" href={`#gallery-${index}`}>
+          <Image {...image} sizes="(max-width: 56rem) 50vw, (max-width: 74rem) 33vw, 25vw" />
+        </a>
+      ))}
+    </section>
+    <div class="hidden-gallery">
+      {images.map((image, index) => <Image {...image} sizes="100vw" id={`gallery-${index}`} />)}
+    </div>
+  )
+}
 
-<div class="hidden-gallery">
-  {images.map((image, index) => <Image {...image} sizes="100vw" id={`gallery-${index}`} />)}
-</div>
 
 <style lang="scss">
   .Gallery {

diff --git a/apps/astro/src/components/Projects/Project/Hero.astro b/apps/astro/src/components/Projects/Project/Hero.astro
@@ -24,7 +24,7 @@ const { img, beforeImg, name, description } = Astro.props as HeroProps
 <section class="Hero">
   <header>
     <h1 class="h1">{name}</h1>
-    {description && <PortableText value={description} />}
+    {description && <PortableText value={description} class="description" />}
   </header>
   <div class="img-compare-container">
     <Image {...img} sizes="(max-width: 66rem) 100vw, 50vw" priority={true} class="img-after" />
@@ -62,8 +62,8 @@ const { img, beforeImg, name, description } = Astro.props as HeroProps
       background-color: var(--primary-300, #f4efe8);
       padding: clamp(1rem, calc(2vw / 0.48), 3rem);
       max-width: 34rem;
-      h1 {
-        margin-bottom: clamp(1rem, calc(1.5vw / 0.48), 1.5rem);
+      .description {
+        margin-top: clamp(1rem, calc(1.5vw / 0.48), 1.5rem);
       }
     }
     .img-compare-container {

diff --git a/apps/astro/src/components/Projects/Project/Summary.astro b/apps/astro/src/components/Projects/Project/Summary.astro
@@ -16,10 +16,14 @@ export type Props = {
 const { heading, paragraph } = Astro.props
 ---
 
-<section class="Summary">
-  <PortableText value={heading} heading="h2" />
-  <PortableText value={paragraph} />
-</section>
+{
+  heading && paragraph && (
+    <section class="Summary">
+      <PortableText value={heading} heading="h2" />
+      <PortableText value={paragraph} />
+    </section>
+  )
+}
 
 <style lang="scss">
   .Summary {

diff --git a/apps/astro/src/pages/realizacje/[slug].astro b/apps/astro/src/pages/realizacje/[slug].astro
@@ -56,7 +56,7 @@ const metadata = await metadataFetch('Project_Collection', `${slugPrefix}${slug}
     ]}
   />
   <Hero {...page.hero} />
-  {page?.summary && <Summary {...page.summary} />}
+  <Summary {...page.summary} />
   <Overview {...page.overview} />
-  {page?.gallery?.images.length > 0 && <Gallery {...page.gallery} />}
+  <Gallery {...page.gallery} />
 </Layout>