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

24
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
@ -337,16 +337,20 @@ 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. 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> </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"
> >