From 2d42b3a07c821c2b6e0e74d7351b634abff442ca Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Mon, 6 Jan 2025 15:00:25 +0100
Subject: [PATCH] refactor(ui): Section component has no space on top (needs
 gap)

---
 front/src/components/ui/Layout.vue            |  2 +-
 front/src/components/ui/layout/Section.vue    |  2 +-
 front/ui-docs/components/ui/layout/section.md | 48 ++++++++++++++++---
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/front/src/components/ui/Layout.vue b/front/src/components/ui/Layout.vue
index 0b2a49514..13923d6a8 100644
--- a/front/src/components/ui/Layout.vue
+++ b/front/src/components/ui/Layout.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   noWrap?: true,
 } & { [P in "stack" | "grid" | "flex" | "columns" | "row" | "page"]?: true | string }
   & { [C in "nav" | "aside" | "header" | "footer" | "main" | "label" | "form" | "h1" | "h2" | "h3" | "h4" | "h5"]?: true }
-  & { [G in 'no-gap' | 'gap-4' | 'gap-8' | 'gap-16' | 'gap-12' | 'gap-auto' ]?: true }
+  & { [G in 'no-gap' | 'gap-4' | 'gap-8' | 'gap-12' | 'gap-16' | 'gap-64' | 'gap-auto' ]?: true }
   & (PastelProps | ColorProps | DefaultProps)
   & RaisedProps
   & VariantProps
diff --git a/front/src/components/ui/layout/Section.vue b/front/src/components/ui/layout/Section.vue
index 053174a31..4a4346ea9 100644
--- a/front/src/components/ui/layout/Section.vue
+++ b/front/src/components/ui/layout/Section.vue
@@ -27,7 +27,7 @@ const headerGrid =
 <template>
   <section>
     <Layout header :grid="headerGrid"
-     :style="'alignLeft' in props && props.alignLeft  ? 'justify-content: start' : ''"
+     :style="`${'alignLeft' in props && props.alignLeft  ? 'justify-content: start' : ''}; margin-top: -64px;`"
     >
 
       <!-- The title row's width is a multiple of the expected items' column span -->
diff --git a/front/ui-docs/components/ui/layout/section.md b/front/ui-docs/components/ui/layout/section.md
index 119f55e2d..c29583137 100644
--- a/front/ui-docs/components/ui/layout/section.md
+++ b/front/ui-docs/components/ui/layout/section.md
@@ -133,13 +133,19 @@ Do you want to align the header to tiny, small or medium items?
 The link or button will be shown on the right side of the header.
 
 ```vue-html
-<Section h3="With a link" :action="{ text:'My library', to:'/' }" />
+<Layout stack gap-64>
+  <Spacer />
+  <Section h3="With a link" :action="{ text:'My library', to:'/' }" />
 
-<Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
+  <Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
+</Layout>
 ```
 
+<Layout stack gap-64>
+  <Spacer />
 <Section h3="With a link" :action="{ text:'My library', to:'/' }" />
 <Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
+</Layout>
 
 You can add props to the Link or Button, for example to make them `primary` or add an icon:
 
@@ -148,9 +154,32 @@ You can add props to the Link or Button, for example to make them `primary` or a
     h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 ```
 
+<Spacer size="40"/>
+
 <Section solid primary icon="bi-star"
     h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
 
+::: tip Gaps between consecutive sections
+
+Place consecutive sections into a `<Layout stack gap-64></Layout>` to space them out.
+You can add spacers (negatice or positive) if you want to manually make one distance smaller or larger.
+
+```vue-html
+<Layout stack gap-64>
+  <Spacer />
+  <Section h3="Section 1"></Section>
+  <Section h3="Section 2"></Section>
+</Layout>
+```
+
+<Layout stack gap-64>
+  <Spacer />
+  <Section h3="Section 1"></Section>
+  <Section h3="Section 2"></Section>
+</Layout>
+
+:::
+
 ## Example
 
 ```vue-html
@@ -158,6 +187,10 @@ You can add props to the Link or Button, for example to make them `primary` or a
 <Toggle v-model="alignLeft" label="Left-align the layout"/>
 </Layout>
 
+<Spacer />
+
+<Layout stack gap-64>
+
 <Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
     <Card small title="Relatively Long Album Name">
         Artist Name
@@ -170,7 +203,7 @@ You can add props to the Link or Button, for example to make them `primary` or a
     </Card>
 </Section>
 
-<LayoutSection
+<Section
     :alignLeft="alignLeft"
     medium-items
     h3="Activities (medium items)"
@@ -179,16 +212,19 @@ You can add props to the Link or Button, for example to make them `primary` or a
     <Activity :track="track" :user="user" />
     <Activity :track="track" :user="user" />
     <Activity :track="track" :user="user" />
-</LayoutSection>
+</Section>
+</Layout>
 ```
 
 <Layout flex>
 <Toggle v-model="alignLeft" label="Left-align the layout"/>
 </Layout>
 
+<Spacer />
+
 ---
 
-<div class="preview" style="margin: 0 -40px; padding: 0 25px;">
+<Layout stack gap-64 class="preview" style="margin: 0 -40px; padding: 0 25px;">
 
 <Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Go to library', to:'/' }">
     <Card small title="Relatively Long Album Name">
@@ -208,7 +244,7 @@ You can add props to the Link or Button, for example to make them `primary` or a
     <Activity :track="track" :user="user" />
 </Section>
 
-</div>
+</Layout>
 
 ## Responsivity