Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

enhance(client): use container queries if available to improve perf

Browse source
This commit is contained in:
syuilo 2022-12-26 08:40:13 +09:00
parent af649b0480
commit c95da27019
20 changed files with 420 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

35
packages/client/src/pages/messaging/messaging-room.message.vue
View file

@ -2,7 +2,7 @@
<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
<div class="content">
<div class="balloon" :class="{ noText: message.text == null }" >
<div class="balloon" :class="{ noText: message.text == null }">
<button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
<img src="/client-assets/remove.png" alt="Delete"/>
</button>
@ -331,4 +331,37 @@ function del(): void {
}
}
}
@container (max-width: 400px) {
.thvuemwp {
> .avatar {
width: 48px;
height: 48px;
}
> .content {
> .balloon {
> .content {
> .text {
font-size: 0.9em;
}
}
}
}
}
}
@container (max-width: 500px) {
.thvuemwp {
> .content {
> .balloon {
> .content {
> .text {
padding: 8px 16px;
}
}
}
}
}
}
</style>