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

docs(ui): lint layout pages

This commit is contained in:
jon r 2025-03-19 12:55:52 +01:00
parent f9f53c32db
commit 02dbb7990d
5 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
front/ui-docs/components/ui/layout/grid.md
View File

@ -46,7 +46,7 @@ _Note that we set the width to match 2 columns plus one gap._
</Layout> </Layout>
### Let elements span multiple rows, columns, or areas: ### Let elements span multiple rows, columns, or areas
```vue-html{1,2} ```vue-html{1,2}
<Alert purple style="grid-column: span 5;" /> <Alert purple style="grid-column: span 5;" />
@ -94,7 +94,7 @@ You can also span an element to a rectangle of multiple columns and rows, in the
You can pass any valid CSS `grid` value to the `grid` prop. You can pass any valid CSS `grid` value to the `grid` prop.
#### Minimal width, fit as many as possible on one row: #### Minimal width, fit as many as possible on one row
```vue-html ```vue-html
<Layout grid="auto / repeat(auto-fit, minmax(max-content, 200px))"> <Layout grid="auto / repeat(auto-fit, minmax(max-content, 200px))">
@ -114,7 +114,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
<Alert purple /> <Alert purple />
</Layout> </Layout>
#### Up to 2 in a row, between 230-x and 300px: #### Up to 2 in a row, between 230-x and 300px
```vue-html ```vue-html
<Layout no-gap <Layout no-gap
@ -127,7 +127,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
<Alert blue /> <Alert blue />
</Layout> </Layout>
#### Up to 5 in a row, between 230-x and 300px: #### Up to 5 in a row, between 230-x and 300px
```vue-html ```vue-html
<Layout no-gap <Layout no-gap
@ -144,7 +144,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
<Alert blue /> <Alert blue />
</Layout> </Layout>
#### As many as fit, at least 100px, stretch them if necessary: #### As many as fit, at least 100px, stretch them if necessary
```vue-html ```vue-html
<Layout <Layout
@ -160,7 +160,7 @@ You can pass any valid CSS `grid` value to the `grid` prop.
<Alert blue /> <Alert blue />
</Layout> </Layout>
#### Three columns of different widths, stretch gaps if necessary: #### Three columns of different widths, stretch gaps if necessary
```vue-html ```vue-html
<Layout <Layout

2
front/ui-docs/components/ui/layout/header.md
View File

@ -6,7 +6,7 @@ import Button from '~/components/ui/Button.vue'
</script> </script>
```ts ```ts
import Header from "~/components/ui/Header.vue"; import Header from '~/components/ui/Header.vue'
``` ```
# Page header # Page header

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

@ -102,7 +102,7 @@ const user: User = {
</script> </script>
```ts ```ts
import Section from "~/components/ui/Section.vue"; import Section from '~/components/ui/Section.vue'
``` ```
# Layout section # Layout section

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

@ -18,14 +18,14 @@ const size = ref(32)
</style> </style>
```ts ```ts
import Spacer from "~/components/ui/Spacer.vue"; import Spacer from '~/components/ui/Spacer.vue'
``` ```
# Spacer # Spacer
Add a 16px gap between adjacent items. Add a 16px gap between adjacent items.
##### Without spacer: ##### Without spacer
<Layout flex> <Layout flex>
@ -43,7 +43,7 @@ Add a 16px gap between adjacent items.
</Layout> </Layout>
##### With spacer: ##### With spacer
<Layout flex> <Layout flex>
@ -61,7 +61,7 @@ Add a 16px gap between adjacent items.
</Layout> </Layout>
##### Spacers can also be added for horizontal space: ##### Spacers can also be added for horizontal space
<Layout flex> <Layout flex>

2
front/ui-docs/components/ui/layout/table.md
View File

@ -5,7 +5,7 @@ import Button from "~/components/ui/Button.vue"; // Need to import this, else vi
</script> </script>
```ts ```ts
import Table from "~/components/ui/Table.vue"; import Table from '~/components/ui/Table.vue'
``` ```
# Table # Table