enhance(client): use container queries if available to improve perf
This commit is contained in:
parent
af649b0480
commit
c95da27019
|
@ -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
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -72,5 +72,6 @@ onUnmounted(() => {
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
container-type: inline-size;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue