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

chore(ui-docs): minor additions

This commit is contained in:
upsiflu 2025-01-10 01:22:17 +01:00
parent fff04844f9
commit 372329c13d
3 changed files with 66 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -101,6 +101,10 @@ const user: User = {
} }
</script> </script>
```ts
import Section from "~/components/ui/Section.vue"
```
# Layout section # Layout section
Sections divide the page vertically. Choose an appropriate heading level for each section: `h1` or `h2` or `h3`. Sections divide the page vertically. Choose an appropriate heading level for each section: `h1` or `h2` or `h3`.
@ -112,7 +116,7 @@ Sections divide the page vertically. Choose an appropriate heading level for eac
### Align the section to the page ### Align the section to the page
```vue-html ```vue-html
<Section alignLeft /> <Section h3="My title" alignLeft />
``` ```
### Make the section header align with the section contents ### Make the section header align with the section contents
@ -132,14 +136,16 @@ The link or button will be shown on the right side of the header.
```vue-html ```vue-html
<Layout stack gap-64> <Layout stack gap-64>
<Spacer /> <Spacer />
<Section h3="With a link" :action="{ text:'My library', to:'/' }" /> <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>
``` ```
<Spacer />
<Layout stack gap-64> <Layout stack gap-64>
<Spacer />
<Section h3="With a link" :action="{ text:'My library', to:'/' }" /> <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>
@ -148,33 +154,35 @@ You can add props to the Link or Button, for example to make them `primary` or a
```vue-html{1} ```vue-html{1}
<Section solid primary icon="bi-star" <Section solid primary icon="bi-star"
h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" /> h3="Example" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
``` ```
<Spacer :size="40"/> <Spacer :size="40"/>
<Section solid primary icon="bi-star" <Section solid primary icon="bi-star"
h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" /> h3="Example" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
::: tip Gaps between consecutive sections ::: tip Gaps between consecutive sections
Place consecutive sections into a `<Layout stack gap-64></Layout>` to space them out. Place consecutive sections into a [Layout stack](../layout) width a size of 64px give them a regular vertical rhythm. Use different sizes for very small or very large headings.
You can add spacers (negatice or positive) if you want to manually make one distance smaller or larger. You can add spacers with negative or positive size if you want to manually make a specific distance smaller or larger than the others.
```vue-html ```vue-html
<Layout stack gap-64> <Layout stack gap-64>
<Spacer /> <Spacer />
<Section h3="Section 1"></Section> <Section h3="Section 1" />
<Section h3="Section 2"></Section> <Section h3="Section 2" />
</Layout> </Layout>
``` ```
<Layout stack gap-64> <Layout stack gap-64>
<Spacer /> <Spacer no-size />
<Section h3="Section 1"></Section> <Section h3="Section 1" />
<Section h3="Section 2"></Section> <Section h3="Section 2" />
</Layout> </Layout>
<Spacer />
::: :::
::: tip Let items cover the whole grid width ::: tip Let items cover the whole grid width
@ -223,13 +231,13 @@ To prevent items from being put on a grid, add `style="grid-column: 1 / -1"` whi
<Toggle v-model="alignLeft" label="Left-align the layout"/> <Toggle v-model="alignLeft" label="Left-align the layout"/>
</Layout> </Layout>
<Spacer />
--- ---
<Spacer />
<Layout stack gap-64 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:'/' }"> <Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'Documentation on Cards', to:'../card' }">
<Card small title="Relatively Long Album Name"> <Card small title="Relatively Long Album Name">
Artist Name Artist Name
</Card> </Card>

51
front/ui-docs/components/ui/layout/spacer.md
View File

@ -18,7 +18,7 @@ const size = ref(32)
</style> </style>
```ts ```ts
import Spacer from "~/components/ui/Spacer.vue" import Spacer from "~/components/ui/Spacer.vue";
``` ```
# Spacer # Spacer
@ -97,7 +97,7 @@ const size = ref(1);
<Input v-model="size" type="range" /> <Input v-model="size" type="range" />
<Alert yellow>A</Alert> <Alert yellow>A</Alert>
<Spacer :size="size" /> <Spacer :size="+size" />
<Alert purple>B</Alert> <Alert purple>B</Alert>
</template> </template>
``` ```
@ -108,51 +108,50 @@ const size = ref(1);
</div> </div>
<div class="preview"> <div class="preview">
<Alert yellow>A</Alert> <Alert yellow>A</Alert>
<Spacer :size="size" /> <Spacer :size="+size" />
<Alert purple>B</Alert> <Alert purple>B</Alert>
</div> </div>
</Layout> </Layout>
Note the `+` before `size`. Some browsers will output a string for the `Input` value, and the JavaScript `+` prefix parses it into a number. Spacers need numeric `size` values because positive size values affect the dimensions of the element while negative sizes cause negative margins.
## Make the Spacer elastic (responsive) ## Make the Spacer elastic (responsive)
<Layout flex> <Layout flex>
```vue-html <div style="width: min-content;">
<Layout flex style="height:30em;">
<Input v-model="size"
type="range"
style="writing-mode: vertical-lr; height:100%"
/>
<Layout stack no-gap ```vue-html
:style="{ height: size + '%' }" <Layout stack no-gap
> :style="{ height: size + '%' }"
<Alert blue>A</Alert> >
<Spacer grow title="grow" /> <Button min-content outline>A</Button>
<Alert red>B</Alert> <Spacer grow title="grow" />
<Alert green>C</Alert> <Button min-content outline>B</Button>
<Spacer shrink title="shrink" /> <Button min-content outline>C</Button>
<Alert purple>D</Alert> <Spacer shrink title="shrink" />
<Spacer grow shrink title="grow shrink" /> <Button min-content outline>D</Button>
<Alert yellow>E</Alert> <Spacer grow shrink title="grow shrink" />
</Layout> <Button min-content outline>E</Button>
</Layout> </Layout>
``` ```
</div>
<div class="preview" style="flex-wrap:nowrap"> <div class="preview" style="flex-wrap:nowrap">
<Layout flex style="height:30em"> <Layout flex style="height:30em">
<Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input> <Input v-model="size" type="range" style="writing-mode: vertical-lr; height:100%"><template #input-right>{{ size }}%</template></Input>
<Layout stack no-gap :style="{ height: size + '%'}"> <Layout stack no-gap :style="{ height: size + '%'}">
<Alert blue>A</Alert> <Button min-content outline>A</Button>
<Spacer grow title="grow" /> <Spacer grow title="grow" />
<Alert red>B</Alert> <Button min-content outline>B</Button>
<Alert green>C</Alert> <Button min-content outline>C</Button>
<Spacer shrink title="shrink" /> <Spacer shrink title="shrink" />
<Alert purple>D</Alert> <Button min-content outline>D</Button>
<Spacer grow shrink title="grow shrink" /> <Spacer grow shrink title="grow shrink" />
<Alert yellow>E</Alert> <Button min-content outline>E</Button>
</Layout> </Layout>
</Layout> </Layout>

33
front/ui-docs/components/ui/link.md
View File

@ -9,6 +9,7 @@ import Alert from '~/components/ui/Alert.vue'
```ts ```ts
import Link from "~/components/ui/Link.vue" import Link from "~/components/ui/Link.vue"
``` ```
# Link # Link
Users can navigate by following Links. They expect that in contrast to clicking a [button](button), following a link does not manipulate items or trigger any action. Users can navigate by following Links. They expect that in contrast to clicking a [button](button), following a link does not manipulate items or trigger any action.
@ -122,26 +123,26 @@ _Only use on top of solid surfaces, else the text may be unreadable!_
## Set width and alignment ## Set width and alignment
See [Using width](/using-width) and [Using alignment](/using-alignment) See [Using width](/using-width) and [Using alignment](/using-alignment).
<Layout flex> <Layout flex>
```vue-html ```vue-html
<Link solid primary min-content to="/">min-content</Link> <Link solid primary min-content to="/">min-content</Link>
<Link solid primary tiny to="/">tiny</Link> <Link solid primary tiny to="/">tiny</Link>
<Link solid primary buttonWidth to="/">buttonWidth</Link> <Link solid primary buttonWidth to="/">buttonWidth</Link>
<Link solid primary small to="/">small</Link> <Link solid primary small to="/">small</Link>
<Link solid primary medium to="/">medium</Link> <Link solid primary medium to="/">medium</Link>
<Link solid primary full to="/">full</Link> <Link solid primary full to="/">full</Link>
<Link solid primary auto to="/">auto</Link> <Link solid primary auto to="/">auto</Link>
<hr /> <hr />
<Link solid primary alignSelf="start" to="/">🐌</Link> <Link solid primary alignSelf="start" to="/">🐌</Link>
<Link solid primary alignSelf="center" to="/">🐌</Link> <Link solid primary alignSelf="center" to="/">🐌</Link>
<Link solid primary alignSelf="end" to="/">🐌</Link> <Link solid primary alignSelf="end" to="/">🐌</Link>
<hr /> <hr />
<Link solid primary alignText="left" to="/">🐌</Link> <Link solid primary alignText="left" to="/">🐌</Link>
<Link solid primary alignText="center" to="/">🐌</Link> <Link solid primary alignText="center" to="/">🐌</Link>
<Link solid primary alignText="right" to="/">🐌</Link> <Link solid primary alignText="right" to="/">🐌</Link>
``` ```
<Layout class="preview" stack style="--gap:4px;"> <Layout class="preview" stack style="--gap:4px;">