From e79aaf84dea339714d7800f6faf1e87d0259049c Mon Sep 17 00:00:00 2001 From: upsiflu Date: Thu, 2 Jan 2025 00:33:54 +0100 Subject: [PATCH] chore(ui-docs): update documentation --- front/ui-docs/.vitepress/config.ts | 42 +++---- front/ui-docs/components/ui/input.md | 6 +- front/ui-docs/components/ui/layout.md | 28 +++-- front/ui-docs/components/ui/layout/columns.md | 2 +- front/ui-docs/components/ui/layout/grid.md | 45 +++---- front/ui-docs/components/ui/link.md | 113 ++++++++++++------ front/ui-docs/index.md | 43 +++++-- 7 files changed, 172 insertions(+), 107 deletions(-) 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. - + + + + + + + default ghost + + + primary ghost + + + secondary ghost + + + destructive ghost + + + + + ## Shapes +```vue-html + + Home + +``` + Home -## Width and alignment +## Set width and alignment + +See [Using width](/using-width) and [Using alignment](/using-alignment) diff --git a/front/ui-docs/index.md b/front/ui-docs/index.md index f0c0a0165..3e15216ea 100644 --- a/front/ui-docs/index.md +++ b/front/ui-docs/index.md @@ -6,32 +6,49 @@ import Spacer from '../src/components/ui/layout/Spacer.vue' # Funkwhale design component library -## Contribute +## Plan -- [Improve the component library](./contributing) -- [Found a bug? Report it here](https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/?sort=created_date&state=opened&label_name%5B%5D=Type%3A%3AUX%2FUI&first_page_size=20) + + + + + +Check out the design system on our Penpot. + + + ## Use - - - -Check out the design system on our Penpot. - + - + +## Contribute + +- [Improve the component library](./contributing) +- [Found a bug? Report it here](https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/?sort=created_date&state=opened&label_name%5B%5D=Type%3A%3AUX%2FUI&first_page_size=20)