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

fix(front): use `start` and `end` for text alignments

This commit is contained in:
upsiflu 2025-03-22 17:18:41 +01:00
parent ef67b38018
commit 7902c43702
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
front/ui-docs/components/ui/card.md
View File

@ -305,7 +305,7 @@ If there are multiple actions, they will be presented in a row:
All items have been assimilated. Ready to go! All items have been assimilated. Ready to go!
<template #action> <template #action>
<Button secondary ghost min-content <Button secondary ghost min-content
alignText="left" align-text="start"
icon="bi-chevron-left" icon="bi-chevron-left"
> >
Items Items
@ -335,18 +335,22 @@ You can include tags on a card by adding a list of `tags`. These are rendered as
``` ```
<div class="preview"> <div class="preview">
<Card medium <Card medium
title="For music lovers" title="For music lovers"
:tags="['rock', 'folk', 'punk']"> :tags="['rock', 'folk', 'punk']"
Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web. >
</Card></div> Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
</Card>
</div>
## Interactive elements on top of a linked card ## Interactive elements on top of a linked card
Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This is an uncommon pattern and will confuse users. Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This is an uncommon pattern and will confuse users.
```vue-html ```vue-html
<Card full title="Linked card with interactive elements" <Card
full
title="Linked card with interactive elements"
to="./card.md" to="./card.md"
:tags="['rock', 'folk', 'punk']" :tags="['rock', 'folk', 'punk']"
icon="bi-exclamation large" icon="bi-exclamation large"
@ -358,7 +362,9 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
<Card full title="Linked card with interactive elements" <Card
full
title="Linked card with interactive elements"
to="./card.md" to="./card.md"
:tags="['rock', 'folk', 'punk']" :tags="['rock', 'folk', 'punk']"
icon="bi-exclamation large" icon="bi-exclamation large"
@ -372,7 +378,9 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
Instead, use the [action area](#add-an-action) to offer the primary link: Instead, use the [action area](#add-an-action) to offer the primary link:
```vue-html ```vue-html
<Card full title="Card with interactive elements" <Card
full
title="Card with interactive elements"
:tags="['rock', 'folk', 'punk']" :tags="['rock', 'folk', 'punk']"
icon="bi-check-lg large" icon="bi-check-lg large"
> >
@ -386,7 +394,9 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
<!-- prettier-ignore-start --> <!-- prettier-ignore-start -->
<Card full title="Card with interactive elements" <Card
full
title="Card with interactive elements"
:tags="['rock', 'folk', 'punk']" :tags="['rock', 'folk', 'punk']"
icon="bi-check-lg large" icon="bi-check-lg large"
> >