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 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: improve overall performance of client @syuilo
|
||||
|
||||
### Bugfixes
|
||||
- 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 {
|
||||
> header {
|
||||
> .title {
|
||||
|
|
|
@ -108,6 +108,8 @@ export default defineComponent({
|
|||
|
||||
<style lang="scss">
|
||||
.sqadhkmv {
|
||||
container-type: inline-size;
|
||||
|
||||
> *:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -433,6 +433,8 @@ function readPromo() {
|
|||
min-width: 0;
|
||||
|
||||
> .body {
|
||||
container-type: inline-size;
|
||||
|
||||
> .cw {
|
||||
cursor: default;
|
||||
display: block;
|
||||
|
@ -573,8 +575,10 @@ function readPromo() {
|
|||
> .reply {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_500px {
|
||||
@container (max-width: 500px) {
|
||||
.tkcbzcuz {
|
||||
font-size: 0.9em;
|
||||
|
||||
> .article {
|
||||
|
@ -584,8 +588,10 @@ function readPromo() {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_450px {
|
||||
@container (max-width: 450px) {
|
||||
.tkcbzcuz {
|
||||
> .renote {
|
||||
padding: 8px 16px 0 16px;
|
||||
}
|
||||
|
@ -605,8 +611,10 @@ function readPromo() {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_350px {
|
||||
@container (max-width: 350px) {
|
||||
.tkcbzcuz {
|
||||
> .article {
|
||||
> .main {
|
||||
> .footer {
|
||||
|
@ -619,8 +627,10 @@ function readPromo() {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.max-width_300px {
|
||||
@container (max-width: 300px) {
|
||||
.tkcbzcuz {
|
||||
> .article {
|
||||
> .avatar {
|
||||
width: 44px;
|
||||
|
|
|
@ -444,6 +444,8 @@ if (appearNote.replyId) {
|
|||
|
||||
> .main {
|
||||
> .body {
|
||||
container-type: inline-size;
|
||||
|
||||
> .cw {
|
||||
cursor: default;
|
||||
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 {
|
||||
padding: 8px;
|
||||
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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -127,4 +127,14 @@ if (props.detail) {
|
|||
padding: 10px 0 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 450px) {
|
||||
.wrpstxzv {
|
||||
padding: 14px 16px;
|
||||
|
||||
&.children {
|
||||
padding: 10px 0 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -111,6 +111,8 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.vjoppmmu {
|
||||
container-type: inline-size;
|
||||
|
||||
> header {
|
||||
margin: 16px 0;
|
||||
|
||||
|
|
|
@ -72,5 +72,6 @@ onUnmounted(() => {
|
|||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
container-type: inline-size;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -15,6 +15,8 @@ type ClassOrder = {
|
|||
remove: string[];
|
||||
};
|
||||
|
||||
const isContainerQueriesSupported = ('container' in document.documentElement.style);
|
||||
|
||||
const cache = new Map<string, ClassOrder>();
|
||||
|
||||
function getClassOrder(width: number, queue: Value): ClassOrder {
|
||||
|
@ -78,6 +80,8 @@ function calc(el: Element) {
|
|||
|
||||
export default {
|
||||
mounted(src, binding, vn) {
|
||||
if (isContainerQueriesSupported) return;
|
||||
|
||||
const resize = new ResizeObserver((entries, observer) => {
|
||||
calc(src);
|
||||
});
|
||||
|
@ -93,11 +97,15 @@ export default {
|
|||
},
|
||||
|
||||
updated(src, binding, vn) {
|
||||
if (isContainerQueriesSupported) return;
|
||||
|
||||
mountings.set(src, Object.assign({}, mountings.get(src), { value: binding.value }));
|
||||
calc(src);
|
||||
},
|
||||
|
||||
unmounted(src, binding, vn) {
|
||||
if (isContainerQueriesSupported) return;
|
||||
|
||||
const info = mountings.get(src);
|
||||
if (!info) return;
|
||||
info.resize.disconnect();
|
||||
|
|
|
@ -118,4 +118,11 @@ definePageMetadata(computed(() => antenna ? {
|
|||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 800px) {
|
||||
.tqmomfks {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
|
||||
<MkSpacer :content-max="700">
|
||||
<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="header">
|
||||
|
|
|
@ -111,4 +111,11 @@ definePageMetadata(computed(() => list ? {
|
|||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: 800px) {
|
||||
.eqqrhokj {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
Loading…
Reference in New Issue