misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

4
packages/frontend/src/pages/reversi/game.board.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="500">
<div class="_spacer" style="--MI_SPACER-w: 500px;">
<div :class="$style.root" class="_gaps">
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
<span>({{ i18n.ts._reversi.black }})</span>
@ -138,7 +138,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; width: 200px; margin: auto;"/>
</MkA>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

8
packages/frontend/src/pages/reversi/game.setting.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<MkSpacer :contentMax="600">
<div class="_spacer" style="--MI_SPACER-w: 600px;">
<div style="text-align: center;"><b><MkUserName :user="game.user1"/></b> vs <b><MkUserName :user="game.user2"/></b></div>
<div :class="{ [$style.disallow]: isReady }">
@ -82,10 +82,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</div>
</div>
</MkSpacer>
</div>
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="16">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 16px;">
<div style="text-align: center;" class="_gaps_s">
<div v-if="opponentHasSettingsChanged" style="color: var(--MI_THEME-warn);">{{ i18n.ts._reversi.opponentHasSettingsChanged }}</div>
<div>
@ -103,7 +103,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="shareWhenStart">{{ i18n.ts._reversi.shareToTlTheGameWhenStart }}</MkSwitch>
</div>
</div>
</MkSpacer>
</div>
</div>
</template>
</MkStickyContainer>

8
packages/frontend/src/pages/reversi/index.vue
View file

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer v-if="!matchingAny && !matchingUser" :contentMax="600">
<div class="_spacer" v-if="!matchingAny && !matchingUser" style="--MI_SPACER-w: 600px;">
<div class="_gaps">
<div>
<img src="/client-assets/reversi/logo.png" style="display: block; max-width: 100%; max-height: 200px; margin: auto;"/>
@ -83,8 +83,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination>
</MkFolder>
</div>
</MkSpacer>
<MkSpacer v-else :contentMax="600">
</div>
<div class="_spacer" v-else style="--MI_SPACER-w: 600px;">
<div :class="$style.waitingScreen">
<div v-if="matchingUser" :class="$style.waitingScreenTitle">
<I18n :src="i18n.ts.waitingFor" tag="span">
@ -101,7 +101,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton inline rounded @click="cancelMatching">{{ i18n.ts.cancel }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>