natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

display MkAvatars nicer

This commit is contained in:
ThatOneCalculator 2023-01-16 11:40:06 -08:00
parent 2aba31312f
commit 4cb29beeaa
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
3 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "calckey",
"version": "13.0.8-rc2",
"version": "13.0.8-rc3",
"codename": "aqua",
"repository": {
"type": "git",

26
packages/client/src/components/MkAvatars.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div v-for="user in users" :key="user.id" style="display:inline-block;width:32px;height:32px;margin-right:8px;">
<MkAvatar :user="user" style="width:32px;height:32px;" :show-indicator="true"/>
<div class="defgtij">
<div v-for="user in users" :key="user.id" class="users">
<MkAvatar :user="user" class="avatar" :show-indicator="true"/>
</div>
</div>
</template>
@ -22,3 +22,23 @@ onMounted(async () => {
});
});
</script>
<style lang="scss">
.defgtij {
padding: 12px;
> .users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
grid-gap: 12px;
place-content: center;
padding: 12px;
> .avatar {
width: 100%;
height: 100%;
aspect-ratio: 1;
}
}
}
</style>

21
packages/client/src/widgets/user-list.vue
View File

@ -1,7 +1,6 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
<template #icon><i class="ph-user-list-bold ph-lg"></i></template>
<template #header>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
<template #header><i class="ph-user-list-bold ph-lg"></i> {{ list ? list.name : i18n.ts._widgets.userList }}</template>
<template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ph-gear-six-bold ph-lg"></i></button></template>
<div class="wsdlkfj">
@ -10,7 +9,7 @@
</div>
<MkLoading v-else-if="fetching"/>
<div v-else class="users">
<MkAvatars :user-ids="users"/>
<MkAvatars :user-ids="users" class="userAvatars"/>
</div>
</div>
</MkContainer>
@ -99,21 +98,5 @@ defineExpose<WidgetComponentExpose>({
> .init {
padding: 16px;
}
> .users {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 40px));
grid-gap: 12px;
place-content: center;
padding: 16px;
> .user {
width: 100%;
height: 100%;
aspect-ratio: 1;
> .avatar {
width: 100%;
height: 100%;
}
}
}
}
</style>