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

fix(ui): link text is left-aligned by default; links are auto-aligned

This commit is contained in:
upsiflu 2024-12-21 01:44:20 +01:00
parent e37aa17f85
commit bbe8a711d7
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
front/src/components/ui/Link.vue
View File

@ -28,9 +28,9 @@ const isSimple = propsToColor(colorProps).class === ''
v-bind="propsToColor({ ...colorProps, interactive: true })" v-bind="propsToColor({ ...colorProps, interactive: true })"
:class="[ :class="[
$style.link, $style.link,
'is-' + width, $style['is-' + width],
'is-text-aligned-' + (alignText ?? 'center'), $style['is-text-aligned-' + (alignText ?? 'left')],
'is-self-aligned-' + (alignSelf ?? 'left'), $style['is-self-aligned-' + (alignSelf ?? 'auto')],
round && $style['is-round'], round && $style['is-round'],
isIconOnly && $style['is-icon-only'], isIconOnly && $style['is-icon-only'],
isSimple && $style['force-underline'], isSimple && $style['force-underline'],
@ -50,8 +50,8 @@ const isSimple = propsToColor(colorProps).class === ''
:class="[ :class="[
$style.link, $style.link,
$style['is-' + width], $style['is-' + width],
$style['is-text-aligned-' + (alignText ?? 'center')], $style['is-text-aligned-' + (alignText ?? 'left')],
$style['is-self-aligned-' + (alignSelf ?? 'start')], $style['is-self-aligned-' + (alignSelf ?? 'auto')],
round && $style['is-round'], round && $style['is-round'],
isIconOnly && $style['is-icon-only'], isIconOnly && $style['is-icon-only'],
isSimple && $style['no-spacing'], isSimple && $style['no-spacing'],
@ -68,6 +68,7 @@ const isSimple = propsToColor(colorProps).class === ''
<style module lang="scss"> <style module lang="scss">
.link { .link {
white-space: nowrap; white-space: nowrap;
justify-content: space-between;
font-family: $font-main; font-family: $font-main;
font-weight: v-bind(fontWeight); font-weight: v-bind(fontWeight);
@ -153,6 +154,10 @@ const isSimple = propsToColor(colorProps).class === ''
align-self: center; align-self: center;
} }
&.is-self-aligned-auto {
align-self: auto;
}
&.is-self-aligned-end { &.is-self-aligned-end {
align-self: flex-end; align-self: flex-end;
} }