diff --git a/docs/developer/contribute/frontend.md b/docs/developer/contribute/frontend.md index a5d7101a9..e4a8a29b3 100644 --- a/docs/developer/contribute/frontend.md +++ b/docs/developer/contribute/frontend.md @@ -22,7 +22,7 @@ Make sure you have no add-ons in your browser that mess with the DOM. The best w <--! TODO: Mermaid diagrams --> -### Ui styles +### UI styles ```mermaid graph TD @@ -49,7 +49,7 @@ graph TD ## Components -Start the **Ui Live Docs** (vitepress) and follow the link: +Start the **UI Live Docs** (vitepress) and follow the link: ```sh yarn dev:docs @@ -57,7 +57,7 @@ yarn dev:docs - Example: [Button component in the live docs](http://localhost:5173/components/ui/button) -- Find more details about the Ui library and [how to contributein the live docs](http://localhost:5173/contributing) +- Find more details about the UI library and [how to contributein the live docs](http://localhost:5173/contributing) ## Testing diff --git a/front/ui-docs/.vitepress/config.ts b/front/ui-docs/.vitepress/config.ts index 1655b35c1..0ce98c35f 100644 --- a/front/ui-docs/.vitepress/config.ts +++ b/front/ui-docs/.vitepress/config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'vitepress' export default defineConfig({ - title: 'Funkwhale Ui', + title: 'Funkwhale UI', cleanUrls: true, cacheDir: './.vitepress/.vite', themeConfig: { diff --git a/front/ui-docs/components/ui/button.md b/front/ui-docs/components/ui/button.md index 397f593da..8b8f22a97 100644 --- a/front/ui-docs/components/ui/button.md +++ b/front/ui-docs/components/ui/button.md @@ -295,7 +295,7 @@ You can force an active state by passing an `aria-pressed` prop. **Examples:** - Toggle a remote property -- Open/close a section in the Ui +- Open/close a section in the UI - Toolbar buttons that toggle through many options such as "Paragraph/Heading/List" **Use the [Toggle component](toggle) (a.k.a. switch)** diff --git a/front/ui-docs/components/ui/layout.md b/front/ui-docs/components/ui/layout.md index bee5fdda6..d4d128925 100644 --- a/front/ui-docs/components/ui/layout.md +++ b/front/ui-docs/components/ui/layout.md @@ -20,7 +20,7 @@ import Layout from "~/components/ui/Layout.vue" # 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. +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. By default, the items have a 32px gap. You can [change it with the `gap-x` prop](#gap-x-set-the-gap-to-one-of-the-defaults). diff --git a/front/ui-docs/components/ui/popover.md b/front/ui-docs/components/ui/popover.md index 179839a9f..b3a911052 100644 --- a/front/ui-docs/components/ui/popover.md +++ b/front/ui-docs/components/ui/popover.md @@ -91,7 +91,7 @@ This component has severe usability issues and cannot be used as-is. --- -Common Ui libraries in the Vue ecosystem such as vuetify or shadcn-vue all implement these features. It may be prudent to use their components. +Common UI libraries in the Vue ecosystem such as vuetify or shadcn-vue all implement these features. It may be prudent to use their components. ::: tip Quick mitigation tactics: diff --git a/front/ui-docs/contributing.md b/front/ui-docs/contributing.md index 7449190f0..8fc733e89 100644 --- a/front/ui-docs/contributing.md +++ b/front/ui-docs/contributing.md @@ -12,7 +12,7 @@ docs](https://vitepress.dev/guide/using-vue#vs-code-intellisense-support): "vue.server.includeLanguages": ["vue", "markdown"] ``` -## Adding new Ui components +## Adding new UI components ::: tip Prerequisites @@ -20,7 +20,7 @@ docs](https://vitepress.dev/guide/using-vue#vs-code-intellisense-support): ✔ The pattern is not coupled with any funkwhale types -✔ It's a conventional Ui pattern +✔ It's a conventional UI pattern ::: diff --git a/front/ui-docs/index.md b/front/ui-docs/index.md index 4e242ff7b..f81bff885 100644 --- a/front/ui-docs/index.md +++ b/front/ui-docs/index.md @@ -16,7 +16,7 @@ import Spacer from '../src/components/ui/Spacer.vue' /> + title="UI designs" > Check out the design system on our Penpot. diff --git a/front/ui-docs/using-components.md b/front/ui-docs/using-components.md index 6ee05ef7e..331fe66b4 100644 --- a/front/ui-docs/using-components.md +++ b/front/ui-docs/using-components.md @@ -3,7 +3,7 @@ We distinguish between components that are coupled with funkwhale-specific datatypes and "pure" user interface components: - Funkwhale-specific components such as `Activity` or `AlbumCard` import from `types.ts`. -- Pure Ui components (found in `src/components/ui`) are independent from Funkwhale. Think of `Button`, `Tabs` or `Layout` +- Pure UI components (found in `src/components/ui`) are independent from Funkwhale. Think of `Button`, `Tabs` or `Layout` --- @@ -60,7 +60,7 @@ As of now, class and variable names from the global styles are not available as ::: -## Using Ui components in your views +## Using UI components in your views ```vue