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

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

View File

@ -42,6 +42,7 @@ You should also include the user name that made the change.
- Client: Implement the button to subscribe push notification @tamaina - Client: Implement the button to subscribe push notification @tamaina
- Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina - Client: Implement the toggle to or not to close push notifications when notifications or messages are read @tamaina
- Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz - Client: show Unicode emoji tooltip with its name in MkReactionsViewer.reaction @saschanaz
- Client: improve overall performance of client @syuilo
### Bugfixes ### Bugfixes
- Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468 - Server: 引用内の文章がnyaizeされてしまう問題を修正 @kabo2468

View File

@ -246,6 +246,17 @@ export default defineComponent({
} }
} }
@container (max-width: 380px) {
.ukygtjoj {
> header {
> .title {
padding: 8px 10px;
font-size: 0.9em;
}
}
}
}
._forceContainerFull_ .ukygtjoj { ._forceContainerFull_ .ukygtjoj {
> header { > header {
> .title { > .title {

View File

@ -108,6 +108,8 @@ export default defineComponent({
<style lang="scss"> <style lang="scss">
.sqadhkmv { .sqadhkmv {
container-type: inline-size;
> *:empty { > *:empty {
display: none; display: none;
} }

View File

@ -433,6 +433,8 @@ function readPromo() {
min-width: 0; min-width: 0;
> .body { > .body {
container-type: inline-size;
> .cw { > .cw {
cursor: default; cursor: default;
display: block; display: block;
@ -573,8 +575,10 @@ function readPromo() {
> .reply { > .reply {
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
} }
}
&.max-width_500px { @container (max-width: 500px) {
.tkcbzcuz {
font-size: 0.9em; font-size: 0.9em;
> .article { > .article {
@ -584,8 +588,10 @@ function readPromo() {
} }
} }
} }
}
&.max-width_450px { @container (max-width: 450px) {
.tkcbzcuz {
> .renote { > .renote {
padding: 8px 16px 0 16px; padding: 8px 16px 0 16px;
} }
@ -605,8 +611,10 @@ function readPromo() {
} }
} }
} }
}
&.max-width_350px { @container (max-width: 350px) {
.tkcbzcuz {
> .article { > .article {
> .main { > .main {
> .footer { > .footer {
@ -619,8 +627,10 @@ function readPromo() {
} }
} }
} }
}
&.max-width_300px { @container (max-width: 300px) {
.tkcbzcuz {
> .article { > .article {
> .avatar { > .avatar {
width: 44px; width: 44px;

View File

@ -444,6 +444,8 @@ if (appearNote.replyId) {
> .main { > .main {
> .body { > .body {
container-type: inline-size;
> .cw { > .cw {
cursor: default; cursor: default;
display: block; display: block;
@ -601,6 +603,72 @@ if (appearNote.replyId) {
} }
} }
@container (max-width: 500px) {
.lxwezrsl {
font-size: 0.9em;
}
}
@container (max-width: 450px) {
.lxwezrsl {
> .renote {
padding: 8px 16px 0 16px;
}
> .article {
padding: 16px;
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
}
}
}
@container (max-width: 350px) {
.lxwezrsl {
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 18px;
}
}
}
}
}
}
}
@container (max-width: 300px) {
.lxwezrsl {
font-size: 0.825em;
> .article {
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
}
}
}
.muted { .muted {
padding: 8px; padding: 8px;
text-align: center; text-align: center;

View File

@ -89,4 +89,24 @@ const props = defineProps<{
} }
} }
} }
@container (min-width: 350px) {
.fefdfafb {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
}
@container (min-width: 500px) {
.fefdfafb {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
}
</style> </style>

View File

@ -96,4 +96,24 @@ const showContent = $ref(false);
} }
} }
} }
@container (min-width: 350px) {
.yohlumlk {
> .avatar {
margin: 0 10px 0 0;
width: 44px;
height: 44px;
}
}
}
@container (min-width: 500px) {
.yohlumlk {
> .avatar {
margin: 0 12px 0 0;
width: 48px;
height: 48px;
}
}
}
</style> </style>

View File

@ -127,4 +127,14 @@ if (props.detail) {
padding: 10px 0 0 16px; padding: 10px 0 0 16px;
} }
} }
@container (max-width: 450px) {
.wrpstxzv {
padding: 14px 16px;
&.children {
padding: 10px 0 0 8px;
}
}
}
</style> </style>

View File

@ -306,4 +306,18 @@ useTooltip(reactionRef, (showing) => {
} }
} }
} }
@container (max-width: 600px) {
.qglefbjs {
padding: 16px;
font-size: 0.9em;
}
}
@container (max-width: 500px) {
.qglefbjs {
padding: 12px;
font-size: 0.85em;
}
}
</style> </style>

View File

@ -990,4 +990,61 @@ onMounted(() => {
} }
} }
} }
@container (max-width: 500px) {
.gafaadew {
> header {
height: 50px;
> .cancel {
width: 50px;
line-height: 50px;
}
> .right {
> .text-count {
line-height: 50px;
}
> .submit {
margin: 8px;
}
}
}
> .form {
> .to-specified {
padding: 6px 16px;
}
> .cw,
> .hashtags,
> .text {
padding: 0 16px;
}
> .text {
min-height: 80px;
}
> footer {
padding: 0 8px 8px 8px;
}
}
}
}
@container (max-width: 310px) {
.gafaadew {
> .form {
> footer {
> button {
font-size: 14px;
width: 44px;
height: 44px;
}
}
}
}
}
</style> </style>

View File

@ -313,4 +313,71 @@ onUnmounted(() => {
} }
} }
} }
@container (max-width: 400px) {
.mk-url-preview {
> .link {
font-size: 12px;
> .thumbnail {
height: 80px;
}
> article {
padding: 12px;
}
}
}
}
@container (max-width: 350px) {
.mk-url-preview {
> .link {
font-size: 10px;
> .thumbnail {
height: 70px;
}
> article {
padding: 8px;
> header {
margin-bottom: 4px;
}
> footer {
margin-top: 4px;
> img {
width: 12px;
height: 12px;
}
}
}
&.compact {
> .thumbnail {
position: absolute;
width: 56px;
height: 100%;
}
> article {
left: 56px;
width: calc(100% - 56px);
padding: 4px;
> header {
margin-bottom: 2px;
}
> footer {
margin-top: 2px;
}
}
}
}
}
}
</style> </style>

View File

@ -111,6 +111,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
<style lang="scss" scoped> <style lang="scss" scoped>
.vjoppmmu { .vjoppmmu {
container-type: inline-size;
> header { > header {
margin: 16px 0; margin: 16px 0;

View File

@ -72,5 +72,6 @@ onUnmounted(() => {
.content { .content {
margin: 0 auto; margin: 0 auto;
container-type: inline-size;
} }
</style> </style>

View File

@ -15,6 +15,8 @@ type ClassOrder = {
remove: string[]; remove: string[];
}; };
const isContainerQueriesSupported = ('container' in document.documentElement.style);
const cache = new Map<string, ClassOrder>(); const cache = new Map<string, ClassOrder>();
function getClassOrder(width: number, queue: Value): ClassOrder { function getClassOrder(width: number, queue: Value): ClassOrder {
@ -78,6 +80,8 @@ function calc(el: Element) {
export default { export default {
mounted(src, binding, vn) { mounted(src, binding, vn) {
if (isContainerQueriesSupported) return;
const resize = new ResizeObserver((entries, observer) => { const resize = new ResizeObserver((entries, observer) => {
calc(src); calc(src);
}); });
@ -93,11 +97,15 @@ export default {
}, },
updated(src, binding, vn) { updated(src, binding, vn) {
if (isContainerQueriesSupported) return;
mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value })); mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
calc(src); calc(src);
}, },
unmounted(src, binding, vn) { unmounted(src, binding, vn) {
if (isContainerQueriesSupported) return;
const info = mountings.get(src); const info = mountings.get(src);
if (!info) return; if (!info) return;
info.resize.disconnect(); info.resize.disconnect();

View File

@ -118,4 +118,11 @@ definePageMetadata(computed(() => antenna ? {
margin: 0 auto; margin: 0 auto;
} }
} }
@container (min-width: 800px) {
.tqmomfks {
max-width: 800px;
margin: 0 auto;
}
}
</style> </style>

View File

@ -300,4 +300,28 @@ definePageMetadata({
} }
} }
} }
@container (max-width: 400px) {
.yweeujhr {
> .history {
> .message {
&:not(.isMe):not(.isRead) {
> div {
background-image: none;
border-left: solid 4px #3aa2dc;
}
}
> div {
padding: 16px;
font-size: 0.9em;
> .avatar {
margin: 0 12px 0 0;
}
}
}
}
}
}
</style> </style>

View File

@ -2,7 +2,7 @@
<div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }"> <div v-size="{ max: [400, 500] }" class="thvuemwp" :class="{ isMe }">
<MkAvatar class="avatar" :user="message.user" :show-indicator="true"/> <MkAvatar class="avatar" :user="message.user" :show-indicator="true"/>
<div class="content"> <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"> <button v-if="isMe" class="delete-button" :title="$ts.delete" @click="del">
<img src="/client-assets/remove.png" alt="Delete"/> <img src="/client-assets/remove.png" alt="Delete"/>
</button> </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> </style>

View File

@ -3,7 +3,7 @@
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="700"> <MkSpacer :content-max="700">
<transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> <transition :name="$store.state.animation ? 'fade' : ''" mode="out-in">
<div v-if="page" :key="page.id" v-size="{ max: [450] }" class="xcukqgmh"> <div v-if="page" :key="page.id" class="xcukqgmh">
<div class="_block main"> <div class="_block main">
<!-- <!--
<div class="header"> <div class="header">

View File

@ -111,4 +111,11 @@ definePageMetadata(computed(() => list ? {
margin: 0 auto; margin: 0 auto;
} }
} }
@container (min-width: 800px) {
.eqqrhokj {
max-width: 800px;
margin: 0 auto;
}
}
</style> </style>

View File

@ -475,4 +475,56 @@ onUnmounted(() => {
} }
} }
} }
@container (max-width: 500px) {
.ftskorzw {
> .main {
> .profile > .main {
> .banner-container {
height: 140px;
> .fade {
display: none;
}
> .title {
display: none;
}
}
> .title {
display: block;
}
> .avatar {
top: 90px;
left: 0;
right: 0;
width: 92px;
height: 92px;
margin: auto;
}
> .description {
padding: 16px;
text-align: center;
}
> .fields {
padding: 16px;
}
> .status {
padding: 16px;
}
}
> .contents {
> .nav {
font-size: 80%;
}
}
}
}
}
</style> </style>