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

Frontend: Made proxy loading placeholders actually take up space
ci/woodpecker/push/ociImagePush Pipeline is running Details

This commit is contained in:
Natty 2024-04-30 00:53:28 +02:00
parent 7c44e55597
commit ea4751400b
Signed by: natty
GPG Key ID: BF6CB659ADEE60EC
2 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fe_calckey/frontend/client/src/components/MagNoteResolvingProxy.vue
View File

@ -52,5 +52,7 @@ watch(
justify-content: center; justify-content: center;
font-size: 1.2em; font-size: 1.2em;
gap: 0.4em; gap: 0.4em;
// Approximate height guess
padding: 150px 0;
} }
</style> </style>

29
fe_calckey/frontend/client/src/components/global/MagAvatarResolvingProxy.vue
View File

@ -1,5 +1,11 @@
<template> <template>
<MagAvatar v-if="userResolved" :user="userResolved" /> <MagAvatar v-if="userResolved" :user="userResolved" />
<span
class="avatar-placeholder"
:class="{ square: $store.state.squareAvatars }"
v-else
>
</span>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -20,7 +26,7 @@ const props = withDefaults(
target: null, target: null,
disableLink: false, disableLink: false,
disablePreview: false, disablePreview: false,
}, }
); );
const userResolved = ref<packed.PackUserBase | null>(null); const userResolved = ref<packed.PackUserBase | null>(null);
@ -35,9 +41,26 @@ watch(
userResolved.value = await os.magApi( userResolved.value = await os.magApi(
endpoints.GetUserById, endpoints.GetUserById,
{}, {},
{ user_id: val.id }, { user_id: val.id }
); );
}, },
{ immediate: true }, { immediate: true }
); );
</script> </script>
<style lang="scss" scoped>
.avatar-placeholder {
display: inline-block;
background-color: var(--buttonBg);
opacity: 0.6;
border-radius: 100%;
&.square {
border-radius: 20%;
> .inner {
border-radius: 20%;
}
}
}
</style>