diff --git a/front/ui-docs/.vitepress/config.ts b/front/ui-docs/.vitepress/config.ts
index 5e75c7389..b6a965144 100644
--- a/front/ui-docs/.vitepress/config.ts
+++ b/front/ui-docs/.vitepress/config.ts
@@ -10,33 +10,17 @@ export default defineConfig({
{ text: 'Gitlab', link: 'https://dev.funkwhale.audio/funkwhale/ui' },
],
sidebar: [
- {text:'Contributing', link:'/contributing'},
- {
- text: 'Using Color', link: '/using-color'
- },
- {
- text: 'Using Widths', link: '/using-widths'
- },
- {
- text: 'Using Components', link: '/using-components'
- },
- {
- text: 'Designing Pages', link: '/designing-pages'
- },
+ { text: 'Designing Pages', link: '/designing-pages' },
+ { text: 'Using Color', link: '/using-color' },
+ { text: 'Using Width', link: '/using-width' },
+ { text: 'Using Alignment', link: '/using-alignment' },
+ { text: 'Using Components', link: '/using-components' },
+ { text: 'Contributing', link: '/contributing' },
{
items: [
{ text: 'Activity', link: '/components/ui/activity' },
{ text: 'Alert', link: '/components/ui/alert' },
- {
- text: 'Card', link: '/components/ui/card',
- items: [
- { text: 'Album Card', link: '/components/ui/card/album' },
- { text: 'Artist Card', link: '/components/ui/card/artist' },
- { text: 'Playlist Card', link: '/components/ui/card/playlist' },
- { text: 'Podcast Card', link: '/components/ui/card/podcast' },
- { text: 'Radio Card', link: '/components/ui/card/radio' },
- ],
- },
+ { text: 'Card', link: '/components/ui/card' },
{
text: 'Content Navigation',
items: [
@@ -45,9 +29,6 @@ export default defineConfig({
{ text: 'Tabs', link: '/components/ui/tabs' },
],
},
- { text: 'Link',
- link: 'components/ui/link'
- },
{
text: 'Form',
items: [
@@ -66,8 +47,15 @@ export default defineConfig({
},
{
text: 'Layout', link: '/components/ui/layout/',
- items: [{ text: "Spacer", link: "/components/ui/layout/spacer" }]
+ items: [
+ { text: "Spacer", link: "/components/ui/layout/spacer" },
+ { text: "Using `flex`", link: "/components/ui/layout/flex" },
+ { text: "Using `stack`", link: "/components/ui/layout/stack" },
+ { text: "Using `grid`", link: "/components/ui/layout/grid" },
+ { text: "Using `columns`", link: "/components/ui/layout/columns" },
+ ]
},
+ { text: 'Link', link: 'components/ui/link' },
{ text: 'Loader', link: '/components/ui/loader' },
{ text: 'Modal', link: '/components/ui/modal' },
{ text: 'Pill', link: '/components/ui/pill' },
diff --git a/front/ui-docs/components/ui/input.md b/front/ui-docs/components/ui/input.md
index e50315d84..025431806 100644
--- a/front/ui-docs/components/ui/input.md
+++ b/front/ui-docs/components/ui/input.md
@@ -24,17 +24,17 @@ You can link a user's input to form data by referencing the data in a `v-model`
```
-
+
## Input icons
Add a [Bootstrap icon](https://icons.getbootstrap.com/) to an input to make its purpose more visually clear.
```vue-html{3}
-
+
```
-
+
## Label slot
diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md
index 2c365c1ae..036c4279c 100644
--- a/front/ui-docs/components/ui/layout.md
+++ b/front/ui-docs/components/ui/layout.md
@@ -16,24 +16,28 @@ const noGap = ref(true)
# Layout
+CSS provides [four methods to arrange items in a container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods): Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale Ui easier, we have created a few useful presets.
+
+## Apply presets
+
The following containers are responsive. Change your window's size or select a device preset from your browser's dev tools to see how layouts are affected by available space.
-
+
-
+
-
+
@@ -47,6 +51,16 @@ The following containers are responsive. Change your window's size or select a d
+## Add semantics
+
+Add one of these props to your `Layout` component to turn them into semantic containers (without affecting their presentation):
+
+**Headings:** [`"h1" | "h2" | "h3" | "h4" | "h5"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes)
+
+**Sectioning:** [`"nav" | "aside" | "header" | "footer" | "main"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section#usage_notes)
+
+**Forms:** [`"label" | "form"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms)
+
## Common props
### `no-gap`: Remove the gap between items
@@ -175,14 +189,14 @@ Note that you can set the minimum space occupied by the `Spacer` with its `size`
Items are laid out in a row and wrapped as they overflow the container
-[Layout flex](./layout/flex)
+[Layout flex](/components/ui/layout/flex)
Align items both vertically and horizontally
-[Layout grid](./layout/grid)
+[Layout grid](/components/ui/layout/grid)
@@ -190,7 +204,7 @@ Align items both vertically and horizontally
Add space between vertically stacked items
-[Layout stack](./layout/stack)
+[Layout stack](/components/ui/layout/stack)
@@ -198,7 +212,7 @@ Add space between vertically stacked items
Let text and items flow like on a printed newspaper
-[Layout columns](./layout/columns)
+[Layout columns](/components/ui/layout/columns)
diff --git a/front/ui-docs/components/ui/layout/columns.md b/front/ui-docs/components/ui/layout/columns.md
index ead5c4c76..f7ebaeefb 100644
--- a/front/ui-docs/components/ui/layout/columns.md
+++ b/front/ui-docs/components/ui/layout/columns.md
@@ -18,7 +18,7 @@ const noGap = ref(true)
# Layout `columns`
-Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.
+Let items flow like words on a printed newspaper. Works for long, text-heavy content. Consider using `stack`, `flex` and `grid` instead if you want a homogeneous list of items to flow into multiple responsive columns.
diff --git a/front/ui-docs/components/ui/layout/grid.md b/front/ui-docs/components/ui/layout/grid.md
index da9032935..efdcc1c02 100644
--- a/front/ui-docs/components/ui/layout/grid.md
+++ b/front/ui-docs/components/ui/layout/grid.md
@@ -21,23 +21,26 @@ const noGap = ref(true)
Align items both vertically and horizontally.
You can either specify the column width (default: 320px) or set the desired number of columns.
-### Override the `:column-width` (in px):
+### Override the `column-width` (in px)
+
+_Note that we set the width to match 2 columns plus one gap._
-```vue-html{1}
-
-
+
```
-
+
-
+
@@ -46,23 +49,23 @@ You can either specify the column width (default: 320px) or set the desired num
### Let elements span multiple rows, columns, or areas:
```vue-html{1,2}
-
-
-
+
+
+
```
-
-
-
+
+
+
You can also span an element to a rectangle of multiple columns and rows, in the format ` / / / `:
```vue-html
-
+
@@ -94,19 +97,21 @@ You can pass any valid CSS `grid` value to the `grid` prop.
#### Minimal width, fit as many as possible on one row:
```vue-html
-
-
+
+ Very long text that will force other items to wrap
+
+
```
-
-
+
+ Very long text that will force other items to wrap
+
+
#### Up to 2 in a row, between 230-x and 300px:
diff --git a/front/ui-docs/components/ui/link.md b/front/ui-docs/components/ui/link.md
index 6f2aa92a5..ddabe19d5 100644
--- a/front/ui-docs/components/ui/link.md
+++ b/front/ui-docs/components/ui/link.md
@@ -2,13 +2,15 @@
import Link from '~/components/ui/Link.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
+import Card from '~/components/ui/Card.vue'
+import Alert from '~/components/ui/Alert.vue'
# Link
-Will render an `` element.
+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.
-This component only adds some styles to a ``.
+This component will render as [an `` element [MDN]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
```vue-html
@@ -26,59 +28,98 @@ Instead of a route, you can set the prop `to` to any web address starting with `
## Colors and Variants
-###### Solid:
+See [Using color](/using-color)
-
- Home
-
+
-
- Home
-
+
-
- Home
-
+