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

fix(front): actor label centered

This commit is contained in:
ArneBo 2025-01-19 17:19:06 +01:00
parent 4022f6a620
commit e920babef6
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/components/common/ActorAvatar.vue
View File

@ -21,11 +21,11 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
:src="actor.icon.urls.medium_square_crop" :src="actor.icon.urls.medium_square_crop"
class="ui avatar circular image" class="ui avatar circular image"
> >
<span <i
v-else v-else
:style="defaultAvatarStyle" :style="defaultAvatarStyle"
class="ui avatar circular label" class="ui avatar circular label"
>{{ actor.preferred_username?.[0] || "" }}</span> >{{ actor.preferred_username?.[0] || "" }}</i>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -37,5 +37,6 @@ const defaultAvatarStyle = computed(() => ({ backgroundColor: `#${actorColor.val
&.label { &.label {
align-content: center; align-content: center;
} }
} }
</style> </style>

25
front/src/components/common/ActorLink.vue
View File

@ -60,10 +60,25 @@ const url = computed(() => {
secondary secondary
round round
> >
<actor-avatar <span class="center">
v-if="avatar" <actor-avatar
:actor="actor" v-if="avatar"
/> :actor="actor"
<slot>{{ repr }}</slot> />
<slot>{{ repr }}</slot>
</span>
</Link> </Link>
</template> </template>
<style lang="scss" scoped>
a.username {
span.center {
display: flex;
align-items: center;
}
i.label {
padding: 4px 8px;
margin-right: 8px;
}
}
</style>