perf(frontend): use css-native implementation for spacer rather than vue component

This commit is contained in:
syuilo 2025-04-27 19:55:56 +09:00
parent c4f13a0472
commit 0a1ff77f23
143 changed files with 370 additions and 411 deletions

View file

@ -6,12 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkPolkadots v-if="tab === 'home'" accented/>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<XHome v-if="tab === 'home'"/>
<XInvitations v-else-if="tab === 'invitations'"/>
<XJoiningRooms v-else-if="tab === 'joiningRooms'"/>
<XOwnedRooms v-else-if="tab === 'ownedRooms'"/>
</MkSpacer>
</div>
</PageWithHeader>
</template>

View file

@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div v-if="initializing || message == null">
<MkLoading/>
</div>
<div v-else>
<XMessage :message="message" :isSearchResult="true"/>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :reversed="tab === 'chat'" :tabs="headerTabs" :actions="headerActions">
<MkSpacer v-if="tab === 'chat'" :contentMax="700">
<div class="_spacer" v-if="tab === 'chat'" style="--MI_SPACER-w: 700px;">
<div class="_gaps">
<div v-if="initializing">
<MkLoading/>
@ -56,19 +56,19 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkInfo v-if="$i.policies.chatAvailability !== 'available'" warn>{{ $i.policies.chatAvailability === 'readonly' ? i18n.ts._chat.chatIsReadOnlyForThisAccountOrServer : i18n.ts._chat.chatNotAvailableForThisAccountOrServer }}</MkInfo>
</div>
</MkSpacer>
</div>
<MkSpacer v-else-if="tab === 'search'" :contentMax="700">
<div class="_spacer" v-else-if="tab === 'search'" style="--MI_SPACER-w: 700px;">
<XSearch :userId="userId" :roomId="roomId"/>
</MkSpacer>
</div>
<MkSpacer v-else-if="tab === 'members'" :contentMax="700">
<div class="_spacer" v-else-if="tab === 'members'" style="--MI_SPACER-w: 700px;">
<XMembers v-if="room != null" :room="room" @inviteUser="inviteUser"/>
</MkSpacer>
</div>
<MkSpacer v-else-if="tab === 'info'" :contentMax="700">
<div class="_spacer" v-else-if="tab === 'info'" style="--MI_SPACER-w: 700px;">
<XInfo v-if="room != null" :room="room"/>
</MkSpacer>
</div>
<template #footer>
<div v-if="tab === 'chat'" :class="$style.footer">