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

fix(ui): use `start` and `end` for text alignments to respect writing direction 

https://csslayout.news/whats-the-difference-between-the-alignment-values-of-start-flex-start-and-self-start/
This commit is contained in:
upsiflu 2025-03-22 15:16:15 +01:00
parent f2763a6586
commit 3044a88dbc
5 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/components/album/Card.vue
View File

@ -56,7 +56,7 @@ const imageUrl = computed(() => props.album.cover?.urls.original
:key="ac.artist.id"
>
<Link
align-text="left"
align-text="start"
:to="{ name: 'library.artists.detail', params: { id: ac.artist.id }}"
>
{{ ac.credit ?? t('components.Queue.meta.unknownArtist') }}

4
front/src/components/ui/Section.vue
View File

@ -63,7 +63,7 @@ const headerGrid
<template v-if="expand || collapse">
<Button
full
align-text="left"
align-text="start"
align-self="end"
:class="$style.summary"
:aria-pressed="!!collapse"
@ -111,7 +111,7 @@ const headerGrid
ghost
thin-font
align-self="baseline"
:align-text="expand || collapse ? 'left' : undefined"
:align-text="expand || collapse ? 'start' : undefined"
:aria-pressed="collapse"
:class="{
[$style.action]: true,

16
front/src/ui/components/Sidebar.vue
View File

@ -251,7 +251,7 @@ const moderationNotifications = computed(() =>
to="/library"
ghost
full
align-text="left"
align-text="start"
icon="bi-compass"
thick-when-active
>
@ -262,7 +262,7 @@ const moderationNotifications = computed(() =>
to="/library/artists"
ghost
full
align-text="left"
align-text="start"
thin-font
icon="bi-person-circle"
thick-when-active
@ -274,7 +274,7 @@ const moderationNotifications = computed(() =>
to="/channels"
ghost
full
align-text="left"
align-text="start"
thin-font
icon="bi-person-square"
thick-when-active
@ -286,7 +286,7 @@ const moderationNotifications = computed(() =>
to="/library/albums"
ghost
full
align-text="left"
align-text="start"
thin-font
icon="bi-disc"
thick-when-active
@ -298,7 +298,7 @@ const moderationNotifications = computed(() =>
to="/library/playlists"
ghost
full
align-text="left"
align-text="start"
thin-font
icon="bi-music-note-list"
thick-when-active
@ -309,7 +309,7 @@ const moderationNotifications = computed(() =>
to="/library/radios"
ghost
full
align-text="left"
align-text="start"
thin-font
icon="bi-boombox-fill"
thick-when-active
@ -320,7 +320,7 @@ const moderationNotifications = computed(() =>
to="/library/podcasts"
ghost
full
align-text="left"
align-text="start"
thin-font
icon="bi-mic"
thick-when-active
@ -331,7 +331,7 @@ const moderationNotifications = computed(() =>
to="/favorites"
ghost
full
align-text="left"
align-text="start"
thin-font
icon="bi-heart"
thick-when-active

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

@ -352,7 +352,7 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
icon="bi-exclamation large"
>
<Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
<Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
<Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
</Card>
```
@ -364,7 +364,7 @@ Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This
icon="bi-exclamation large"
>
<Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
<Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
<Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
</Card>
<!-- prettier-ignore-end -->
@ -377,7 +377,7 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
icon="bi-check-lg large"
>
<Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
<Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
<Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
<template #action>
<Link solid full primary to="./card.md" align-text="center">Details</Link>
</template>
@ -391,7 +391,7 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
icon="bi-check-lg large"
>
<Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
<Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
<Link secondary to="./card.md" align-text="end">Open this file in a new window</Link>
<template #action>
<Link solid full primary to="./card.md" align-text="center">Details</Link>
</template>

8
front/ui-docs/using-alignment.md
View File

@ -44,17 +44,17 @@ _
<Layout flex class="preview">
```vue-html
<Button align-text="left">🐌</Button>
<Button align-text="start">🐌</Button>
<Button align-text="center">🐌</Button>
<Button align-text="right">🐌</Button>
<Button align-text="end">🐌</Button>
<Button icon="bi-star" align-text="stretch">🐌</Button>
<Button icon="bi-star" align-text="space-out">🐌</Button>
```
<Layout class="preview solid primary" stack no-gap>
<Button align-text="left">🐌</Button>
<Button align-text="start">🐌</Button>
<Button align-text="center">🐌</Button>
<Button align-text="right">🐌</Button>
<Button align-text="end">🐌</Button>
<Button icon="bi-star" align-text="stretch">🐌</Button>
<Button icon="bi-star" align-text="space-out">🐌</Button>
</Layout>