MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): Section component has no space on top (needs gap)

This commit is contained in:
upsiflu 2025-01-06 15:00:25 +01:00
parent 914a260c75
commit 2d42b3a07c
3 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/ui/Layout.vue
View File

@ -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

2
front/src/components/ui/layout/Section.vue
View File

@ -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 -->

48
front/ui-docs/components/ui/layout/section.md
View File

@ -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