usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/MkAbuseReportWindow.vue
View File

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</I18n>
</template>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps_m" :class="$style.root">
<div class="">
<MkTextarea v-model="comment">
@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary full :disabled="comment.length === 0" @click="send">{{ i18n.ts.send }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</MkWindow>
</template>

4
packages/frontend/src/components/MkAntennaEditor.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div>
<div class="_gaps_m">
<MkInput v-model="name">
@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/components/MkCustomEmojiDetailedDialog.vue
View File

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkModalWindow ref="dialogEl" @close="cancel()" @closed="emit('closed')">
<template #header>:{{ emoji.name }}:</template>
<template #default>
<MkSpacer>
<div class="_spacer">
<div style="display: flex; flex-direction: column; gap: 1em;">
<div :class="$style.emojiImgWrapper">
<MkCustomEmoji :name="emoji.name" :normal="true" :useOriginalSize="true" style="height: 100%;"></MkCustomEmoji>
@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</MkKeyValue>
</div>
</MkSpacer>
</div>
</template>
</MkModalWindow>
</template>

4
packages/frontend/src/components/MkFileCaptionEditWindow.vue
View File

@ -15,12 +15,12 @@ SPDX-License-Identifier: AGPL-3.0-only
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.describeFile }}</template>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<MkDriveFileThumbnail :file="file" fit="contain" style="height: 100px; margin-bottom: 16px;"/>
<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
<template #label>{{ i18n.ts.caption }}</template>
</MkTextarea>
</MkSpacer>
</div>
</MkModalWindow>
</template>

4
packages/frontend/src/components/MkFolder.vue
View File

@ -45,9 +45,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
<MkSpacer v-if="withSpacer" :marginMin="spacerMin" :marginMax="spacerMax">
<div v-if="withSpacer" class="_spacer" :style="{ '--MI_SPACER-min': props.spacerMin + 'px', '--MI_SPACER-max': props.spacerMax + 'px' }">
<slot></slot>
</MkSpacer>
</div>
<div v-else>
<slot></slot>
</div>

4
packages/frontend/src/components/MkForgotPassword.vue
View File

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<template #header>{{ i18n.ts.forgotPassword }}</template>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<form v-if="instance.enableEmail" @submit.prevent="onSubmit">
<div class="_gaps_m">
<MkInput v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" :spellcheck="false" autofocus required>
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-else>
{{ i18n.ts._forgotPassword.contactAdmin }}
</div>
</MkSpacer>
</div>
</MkModalWindow>
</template>

4
packages/frontend/src/components/MkFormDialog.vue
View File

@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ title }}
</template>
<MkSpacer :marginMin="20" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 32px;">
<div v-if="Object.keys(form).filter(item => !form[item].hidden).length > 0" class="_gaps_m">
<template v-for="(v, k) in Object.fromEntries(Object.entries(form))">
<template v-if="typeof v.hidden == 'function' ? v.hidden(values) : v.hidden"></template>
@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
</MkSpacer>
</div>
</MkModalWindow>
</template>

4
packages/frontend/src/components/MkNotificationSelectWindow.vue
View File

@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<template #header>{{ i18n.ts.notificationSetting }}</template>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps_m">
<MkInfo>{{ i18n.ts.notificationSettingDesc }}</MkInfo>
<div class="_buttons">
@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkSwitch v-for="ntype in notificationTypes" :key="ntype" v-model="typesMap[ntype].value">{{ i18n.ts._notification._types[ntype] }}</MkSwitch>
</div>
</MkSpacer>
</div>
</MkModalWindow>
</template>

3
packages/frontend/src/components/MkPageWindow.vue
View File

@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</template>
<div :class="$style.root">
<div :class="$style.root" class="_forceShrinkSpacer">
<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :key="reloadCount" :router="windowRouter"/>
<RouterView v-else :key="reloadCount" :router="windowRouter"/>
</div>
@ -125,7 +125,6 @@ provideMetadataReceiver((metadataGetter) => {
provideReactiveMetadata(pageMetadata);
provide('shouldOmitHeaderTitle', true);
provide('shouldHeaderThin', true);
provide(DI.forceSpacerMin, true);
const contextmenu = computed(() => ([{
icon: 'ti ti-player-eject',

4
packages/frontend/src/components/MkPasswordDialog.vue
View File

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<template #header>{{ i18n.ts.authentication }}</template>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div style="padding: 0 0 16px 0; text-align: center;">
<img src="/client-assets/locked_with_key_3d.png" alt="🔐" style="display: block; margin: 0 auto; width: 48px;">
<div style="margin-top: 16px;">{{ i18n.ts.authenticationRequiredToContinue }}</div>
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton :disabled="(password ?? '') == '' || ($i.twoFactorEnabled && (token ?? '') == '')" type="submit" primary rounded style="margin: 0 auto;"><i class="ti ti-lock-open"></i> {{ i18n.ts.continue }}</MkButton>
</div>
</form>
</MkSpacer>
</div>
</MkModalWindow>
</template>

4
packages/frontend/src/components/MkRemoteEmojiEditDialog.vue
View File

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header>:{{ name }}:</template>
<div style="display: flex; flex-direction: column; min-height: 100%;">
<MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px; flex-grow: 1px;">
<div class="_gaps_m">
<div v-if="imgUrl != null" :class="$style.imgs">
<div style="background: #000;" :class="$style.imgContainer">
@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #value>{{ license }}</template>
</MkKeyValue>
</div>
</MkSpacer>
</div>
<div :class="$style.footer">
<MkButton primary rounded style="margin: 0 auto;" @click="done">
<i class="ti ti-plus"></i> {{ i18n.ts.import }}

5
packages/frontend/src/components/MkRoleSelectDialog.vue
View File

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@closed="emit('closed')"
>
<template #header>{{ title }}</template>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<MkLoading v-if="fetching"/>
<div v-else class="_gaps" :class="$style.root">
<div :class="$style.header">
@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton @click="onCancelClicked">{{ i18n.ts.cancel }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</MkModalWindow>
</template>
@ -51,7 +51,6 @@ import MkInfo from '@/components/MkInfo.vue';
import MkRolePreview from '@/components/MkRolePreview.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
import * as os from '@/os.js';
import MkSpacer from '@/components/global/MkSpacer.vue';
import MkModalWindow from '@/components/MkModalWindow.vue';
import MkLoading from '@/components/global/MkLoading.vue';

4
packages/frontend/src/components/MkSignupDialog.form.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.banner">
<i class="ti ti-user-edit"></i>
</div>
<MkSpacer :marginMin="20" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 32px;">
<form class="_gaps_m" autocomplete="new-password" @submit.prevent="onSubmit">
<MkInput v-if="instance.disableRegistration" v-model="invitationCode" type="text" :spellcheck="false" required>
<template #label>{{ i18n.ts.invitationCode }}</template>
@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else>{{ i18n.ts.start }}</template>
</MkButton>
</form>
</MkSpacer>
</div>
</div>
</template>

4
packages/frontend/src/components/MkSignupDialog.rules.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.banner">
<i class="ti ti-checklist"></i>
</div>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps_m">
<div v-if="instance.disableRegistration || instance.federation !== 'all'" class="_gaps_s">
<MkInfo v-if="instance.disableRegistration" warn>{{ i18n.ts.invitationRequiredToRegister }}</MkInfo>
@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton inline primary rounded gradate :disabled="!agreed" data-cy-signup-rules-continue @click="emit('done')">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div>
</div>
</MkSpacer>
</div>
</div>
</template>

4
packages/frontend/src/components/MkSystemWebhookEditor.vue
View File

@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<div style="display: flex; flex-direction: column; min-height: 100%;">
<MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" style="flex-grow: 1px;;">
<MkLoading v-if="loading !== 0"/>
<div v-else :class="$style.root" class="_gaps_m">
<MkInput v-model="title">
@ -79,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</div>
</MkSpacer>
</div>
<div :class="$style.footer" class="_buttonsCenter">
<MkButton primary rounded :disabled="disableSubmitButton" @click="onSubmitClicked">
<i class="ti ti-check"></i>

4
packages/frontend/src/components/MkTokenGenerateWindow.vue
View File

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<template #header>{{ title || i18n.ts.generateAccessToken }}</template>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps_m">
<div v-if="information">
<MkInfo warn>{{ information }}</MkInfo>
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</MkSpacer>
</div>
</MkModalWindow>
</template>

28
packages/frontend/src/components/MkTutorialDialog.vue
View File

@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-if="page === 0">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._landing.title }}</div>
@ -37,15 +37,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" @click="page++">{{ i18n.ts._initialTutorial.launchTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
<MkButton style="margin: 0 auto;" transparent rounded @click="close(true)">{{ i18n.ts.close }}</MkButton>
</div>
</MkSpacer>
</div>
</div>
</template>
<template v-else-if="page === 1">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<XNote phase="aboutNote"/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton v-if="initialPage !== 1" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -58,12 +58,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="page === 2">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<div class="_gaps">
<XNote phase="howToReact" @reacted="isReactionTutorialPushed = true"/>
<div v-if="!isReactionTutorialPushed">{{ i18n.ts._initialTutorial._reaction.reactToContinue }}</div>
</div>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -76,9 +76,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="page === 3">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<XTimeline/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -91,9 +91,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="page === 4">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<XPostNote/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton v-if="initialPage !== 3" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -106,12 +106,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="page === 5">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<div class="_gaps">
<XSensitive @succeeded="isSensitiveTutorialSucceeded = true"/>
<div v-if="!isSensitiveTutorialSucceeded">{{ i18n.ts._initialTutorial._howToMakeAttachmentsSensitive.doItToContinue }}</div>
</div>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton v-if="initialPage !== 2" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -124,7 +124,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="page === 6">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialTutorial._done.title }}</div>
@ -139,7 +139,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton rounded primary gradate @click="close(false)">{{ i18n.ts.close }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</div>
</template>
</Transition>

4
packages/frontend/src/components/MkUserAnnouncementEditDialog.vue
View File

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else #header>New announcement</template>
<div>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps_m">
<MkInput v-model="title">
<template #label>{{ i18n.ts.title }}</template>
@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkSwitch>
<MkButton v-if="announcement" danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
</MkSpacer>
</div>
<div :class="$style.footer">
<MkButton primary rounded style="margin: 0 auto;" @click="done"><i class="ti ti-check"></i> {{ props.announcement ? i18n.ts.update : i18n.ts.create }}</MkButton>
</div>

26
packages/frontend/src/components/MkUserSetupDialog.vue
View File

@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-if="page === 0">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-confetti" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.accountCreated }}</div>
@ -41,15 +41,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded gradate style="margin: 16px auto 0 auto;" data-cy-user-setup-continue @click="page++">{{ i18n.ts._initialAccountSetting.profileSetting }} <i class="ti ti-arrow-right"></i></MkButton>
<MkButton style="margin: 0 auto;" transparent rounded @click="later(true)">{{ i18n.ts.later }}</MkButton>
</div>
</MkSpacer>
</div>
</div>
</template>
<template v-else-if="page === 1">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<XProfile/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -62,9 +62,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else-if="page === 2">
<div style="height: 100cqh; overflow: auto;">
<div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" :class="$style.pageMainpx;">
<XPrivacy/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -76,9 +76,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template v-else-if="page === 3">
<div style="height: 100cqh; overflow: auto;">
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<XFollow/>
</MkSpacer>
</div>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@ -89,7 +89,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template v-else-if="page === 4">
<div :class="$style.centerPage">
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
@ -100,13 +100,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div>
</div>
</MkSpacer>
</div>
</div>
</template>
<template v-else-if="page === 5">
<div :class="$style.centerPage">
<MkAnimBg style="position: absolute; top: 0;" :scale="1.5"/>
<MkSpacer :marginMin="20" :marginMax="28">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
<div class="_gaps" style="text-align: center;">
<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton rounded primary data-cy-user-setup-continue @click="setupComplete()">{{ i18n.ts.close }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</div>
</template>
</Transition>
@ -147,7 +147,7 @@ const emit = defineEmits<{
}>();
const dialog = useTemplateRef('dialog');
const page = ref(store.s.accountSetupWizard);
watch(page, () => {

58
packages/frontend/src/components/global/MkSpacer.vue
View File

@ -1,58 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="[$style.root, { [$style.rootMin]: forceSpacerMin }]">
<div :class="$style.content">
<slot></slot>
</div>
</div>
</template>
<script lang="ts" setup>
import { inject } from 'vue';
import { deviceKind } from '@/utility/device-kind.js';
import { DI } from '@/di.js';
const props = withDefaults(defineProps<{
contentMax?: number | null;
marginMin?: number;
marginMax?: number;
}>(), {
contentMax: null,
marginMin: 12,
marginMax: 24,
});
const forceSpacerMin = inject(DI.forceSpacerMin, false) || deviceKind === 'smartphone';
</script>
<style lang="scss" module>
.root {
box-sizing: border-box;
width: 100%;
}
.rootMin {
padding: v-bind('props.marginMin + "px"') !important;
}
.content {
margin: 0 auto;
max-width: v-bind('props.contentMax + "px"');
container-type: inline-size;
}
@container (max-width: 450px) {
.root {
padding: v-bind('props.marginMin + "px"');
}
}
@container (min-width: 451px) {
.root {
padding: v-bind('props.marginMax + "px"');
}
}
</style>

3
packages/frontend/src/components/index.ts
View File

@ -22,7 +22,6 @@ import MkLoading from './global/MkLoading.vue';
import MkError from './global/MkError.vue';
import MkAd from './global/MkAd.vue';
import MkPageHeader from './global/MkPageHeader.vue';
import MkSpacer from './global/MkSpacer.vue';
import MkStickyContainer from './global/MkStickyContainer.vue';
import MkLazy from './global/MkLazy.vue';
import PageWithHeader from './global/PageWithHeader.vue';
@ -60,7 +59,6 @@ export const components = {
MkError: MkError,
MkAd: MkAd,
MkPageHeader: MkPageHeader,
MkSpacer: MkSpacer,
MkStickyContainer: MkStickyContainer,
MkLazy: MkLazy,
PageWithHeader: PageWithHeader,
@ -92,7 +90,6 @@ declare module '@vue/runtime-core' {
MkError: typeof MkError;
MkAd: typeof MkAd;
MkPageHeader: typeof MkPageHeader;
MkSpacer: typeof MkSpacer;
MkStickyContainer: typeof MkStickyContainer;
MkLazy: typeof MkLazy;
PageWithHeader: typeof PageWithHeader;

1
packages/frontend/src/di.ts
View File

@ -17,5 +17,4 @@ export const DI = {
mfmEmojiReactCallback: Symbol() as InjectionKey<(emoji: string) => void>,
inModal: Symbol() as InjectionKey<boolean>,
inAppSearchMarkerId: Symbol() as InjectionKey<Ref<string | null>>,
forceSpacerMin: Symbol() as InjectionKey<boolean>,
};

4
packages/frontend/src/pages/about-misskey.vue
View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<div style="overflow: clip;">
<MkSpacer :contentMax="600" :marginMin="20">
<div class="_spacer" style="--MI_SPACER-w: 600" :marginMin="20px;">
<div class="_gaps_m znqjceqz">
<div v-panel class="about">
<div ref="containerEl" class="container" :class="{ playing: easterEggEngine != null }">
@ -127,7 +127,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<p>{{ i18n.ts._aboutMisskey.morePatrons }}</p>
</FormSection>
</div>
</MkSpacer>
</div>
</div>
</PageWithHeader>
</template>

16
packages/frontend/src/pages/about.vue
View File

@ -5,18 +5,18 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer v-if="tab === 'overview'" :contentMax="600" :marginMin="20">
<div v-if="tab === 'overview'" class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 20px;">
<XOverview/>
</MkSpacer>
<MkSpacer v-else-if="tab === 'emojis'" :contentMax="1000" :marginMin="20">
</div>
<div v-else-if="tab === 'emojis'" class="_spacer" style="--MI_SPACER-w: 1000px; --MI_SPACER-min: 20px;">
<XEmojis/>
</MkSpacer>
<MkSpacer v-else-if="instance.federation !== 'none' && tab === 'federation'" :contentMax="1000" :marginMin="20">
</div>
<div v-else-if="instance.federation !== 'none' && tab === 'federation'" class="_spacer" style="--MI_SPACER-w: 1000px; --MI_SPACER-min: 20px;">
<XFederation/>
</MkSpacer>
<MkSpacer v-else-if="tab === 'charts'" :contentMax="1000" :marginMin="20">
</div>
<div v-else-if="tab === 'charts'" class="_spacer" style="--MI_SPACER-w: 1000px; --MI_SPACER-min: 20px;">
<MkInstanceStats/>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/achievements.vue
View File

@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer :contentMax="1200">
<div class="_spacer" style="--MI_SPACER-w: 1200px;">
<MkAchievements :user="$i"/>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin-file.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer v-if="file" :contentMax="600" :marginMin="16" :marginMax="32">
<div v-if="file" class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div v-if="tab === 'overview'" class="cxqhhsmd _gaps_m">
<a class="thumbnail" :href="file.url" target="_blank">
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkObjectView v-if="info" tall :value="info">
</MkObjectView>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin-user.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init">
<div v-if="tab === 'overview'" class="_gaps_m">
<div class="aeakzknw">
@ -206,7 +206,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkObjectView>
</div>
</FormSuspense>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/abuse-report/notification-recipient.editor.vue
View File

@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ mode === 'create' ? i18n.ts._abuseReport._notificationRecipient.createRecipient : i18n.ts._abuseReport._notificationRecipient.modifyRecipient }}
</template>
<div v-if="loading === 0" style="display: flex; flex-direction: column; min-height: 100%;">
<MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" style="flex-grow: 1px;;">
<div :class="$style.root" class="_gaps_m">
<MkInput v-model="title">
<template #label>{{ i18n.ts.title }}</template>
@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts.enable }}</template>
</MkSwitch>
</div>
</MkSpacer>
</div>
<div :class="$style.footer" class="_buttonsCenter">
<MkButton primary rounded :disabled="disableSubmitButton" @click="onSubmitClicked"><i class="ti ti-check"></i> {{ i18n.ts.ok }}</MkButton>

4
packages/frontend/src/pages/admin/abuse-report/notification-recipient.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div :class="$style.root" class="_gaps_m">
<div :class="$style.addButton">
<MkButton primary @click="onAddButtonClicked">
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/abuses.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div :class="$style.root" class="_gaps">
<div :class="$style.subMenus" class="_gaps">
<MkButton link to="/admin/abuse-report-notification-recipient" primary>{{ i18n.ts.notificationSetting }}</MkButton>
@ -53,7 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/ads.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<MkSelect v-model="filterType" :class="$style.input" @update:modelValue="filterItems">
<template #label>{{ i18n.ts.state }}</template>
<option value="all">{{ i18n.ts.all }}</option>
@ -77,7 +77,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-reload"></i>{{ i18n.ts.more }}
</MkButton>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/announcements.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps">
<MkInfo>{{ i18n.ts._announcement.shouldNotBeUsedToPresentPermanentInfo }}</MkInfo>
<MkInfo v-if="announcements.length > 5" warn>{{ i18n.ts._announcement.tooManyActiveAnnouncementDescription }}</MkInfo>
@ -79,7 +79,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkButton>
</template>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/admin/branding.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkInput v-model="iconUrl" type="url">
@ -89,12 +89,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkTextarea>
</div>
</FormSuspense>
</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;">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</MkSpacer>
</div>
</div>
</template>
</PageWithHeader>

4
packages/frontend/src/pages/admin/custom-emojis-manager.local.list.logs.vue
View File

@ -14,9 +14,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header>
<i class="ti ti-notes" style="margin-right: 0.5em;"></i> {{ i18n.ts._customEmojisManager._gridCommon.registrationLogs }}
</template>
<MkSpacer>
<div class="_spacer">
<XRegisterLogs :logs="logs"/>
</MkSpacer>
</div>
</MkWindow>
</template>

4
packages/frontend/src/pages/admin/custom-emojis-manager.local.list.search.vue
View File

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<i class="ti ti-search" style="margin-right: 0.5em;"></i> {{ i18n.ts.search }}
</template>
<div :class="$style.root">
<MkSpacer>
<div class="_spacer">
<div class="_gaps">
<div class="_gaps_s">
<MkInput
@ -107,7 +107,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
</MkFolder>
</div>
</MkSpacer>
</div>
<div :class="$style.footerActions">
<MkButton primary @click="onSearchRequest">
{{ i18n.ts.search }}

4
packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer>
<div class="_spacer">
<div class="_gaps">
<MkFolder>
<template #icon><i class="ti ti-settings"></i></template>
@ -68,7 +68,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkButton>
</div>
</div>
</MkSpacer>
</div>
</template>
<script setup lang="ts">

4
packages/frontend/src/pages/admin/database.vue
View File

@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense v-slot="{ result: database }" :p="databasePromiseFactory">
<MkKeyValue v-for="table in database" :key="table[0]" oneline style="margin: 1em 0;">
<template #key>{{ table[0] }}</template>
<template #value>{{ bytes(table[1].size) }} ({{ number(table[1].count) }} recs)</template>
</MkKeyValue>
</FormSuspense>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/admin/email-settings.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkSwitch v-model="enableEmail">
@ -48,15 +48,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</div>
</FormSuspense>
</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 class="_buttons">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
<MkButton rounded @click="testEmail"><i class="ti ti-send"></i> {{ i18n.ts.testEmail }}</MkButton>
</div>
</MkSpacer>
</div>
</div>
</template>
</PageWithHeader>

4
packages/frontend/src/pages/admin/external-services.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkFolder>
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</div>
</FormSuspense>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/federation-job-queue.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<XQueue v-if="tab === 'deliver'" domain="deliver"/>
<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
<br>
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton @click="promoteAllQueues"><i class="ti ti-reload"></i> {{ i18n.ts.retryAllQueuesNow }}</MkButton>
<MkButton danger @click="clear"><i class="ti ti-trash"></i> {{ i18n.ts.clearQueue }}</MkButton>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/federation.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps">
<div>
<MkInput v-model="host" :debounce="true" class="">
@ -50,7 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/files.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps">
<div class="inputs" style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="origin" style="margin: 0; flex: 1;">
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<MkFileListForAdmin :pagination="pagination" :viewMode="viewMode"/>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/index.vue
View File

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div ref="el" class="hiyeyicy" :class="{ wide: !narrow }">
<div v-if="!narrow || currentPage?.route.name == null" class="nav">
<MkSpacer :contentMax="700" :marginMin="16">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px;">
<div class="lxpfedzu _gaps">
<div class="banner">
<img :src="instance.iconUrl || '/favicon.ico'" alt="" class="icon"/>
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSuperMenu :def="menuDef" :grid="narrow"></MkSuperMenu>
</div>
</MkSpacer>
</div>
</div>
<div v-if="!(narrow && currentPage?.route.name == null)" class="main _pageContainer" style="height: 100%;">
<NestedRouterView/>

4
packages/frontend/src/pages/admin/invites.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div class="_gaps_m">
<MkFolder :expanded="false">
<template #icon><i class="ti ti-plus"></i></template>
@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/admin/job-queue.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer>
<div class="_spacer">
<div v-if="tab === '-'" class="_gaps">
<div :class="$style.queues">
<div v-for="q in queueInfos" :key="q.name" :class="$style.queue" @click="tab = q.name">
@ -139,7 +139,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
<MkSpacer>
<div class="_spacer">
<MkInput
v-model="searchQuery"
:placeholder="i18n.ts.search"
@ -163,10 +163,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<XJob :job="job" :queueType="tab" style="margin: 4px 0;" @needRefresh="refreshJob(job.id)"/>
</template>
</MkTl>
</MkSpacer>
</div>
</MkFolder>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/moderation.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkSwitch :modelValue="enableRegistration" @update:modelValue="onChange_enableRegistration">
@ -119,7 +119,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
</div>
</FormSuspense>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/modlog.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps">
<div style="display: flex; gap: var(--MI-margin); flex-wrap: wrap;">
<MkSelect v-model="type" style="margin: 0; flex: 1;">
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded style="margin: 0 auto;" @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/admin/object-storage.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init">
<div class="_gaps_m">
<MkSwitch v-model="useObjectStorage">{{ i18n.ts.useObjectStorage }}</MkSwitch>
@ -70,12 +70,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</div>
</FormSuspense>
</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;">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</MkSpacer>
</div>
</div>
</template>
</PageWithHeader>

4
packages/frontend/src/pages/admin/overview.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="1000">
<div class="_spacer" style="--MI_SPACER-w: 1000px;">
<div ref="rootEl" :class="$style.root">
<MkFoldableSection class="item">
<template #header>Stats</template>
@ -61,7 +61,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XQueue domain="inbox"/>
</MkFoldableSection>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/admin/performance.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div class="_gaps">
<div class="_panel" style="padding: 16px;">
<MkSwitch v-model="enableServerMachineStats" @change="onChange_enableServerMachineStats">
@ -102,7 +102,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkFolder>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/relays.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div class="_gaps">
<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel" style="padding: 16px;">
<div>{{ relay.inbox }}</div>
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="ti ti-trash"></i> {{ i18n.ts.remove }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/admin/roles.edit.vue
View File

@ -5,14 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<XEditor v-if="data" v-model="data"/>
</MkSpacer>
</div>
<template #footer>
<div :class="$style.footer">
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="16">
<div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 16px;">
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</MkSpacer>
</div>
</div>
</template>
</PageWithHeader>

4
packages/frontend/src/pages/admin/roles.role.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div class="_gaps">
<div class="_buttons">
<MkButton primary rounded @click="edit"><i class="ti ti-pencil"></i> {{ i18n.ts.edit }}</MkButton>
@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
<MkInfo v-else>{{ i18n.ts._role.isConditionalRole }}</MkInfo>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/roles.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div class="_gaps">
<MkFolder>
<template #label>{{ i18n.ts._role.baseRole }}</template>
@ -291,7 +291,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFoldableSection>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/security.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div class="_gaps_m">
<XBotProtection/>
@ -115,7 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkFolder>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/server-rules.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div class="_gaps_m">
<div>{{ i18n.ts._serverRules.description }}</div>
<Sortable
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/settings.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :tabs="headerTabs">
<MkSpacer :contentMax="700" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div class="_gaps_m">
<MkFolder :defaultOpen="true">
<template #icon><i class="ti ti-info-circle"></i></template>
@ -250,7 +250,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkFolder>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/system-webhook.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps_m">
<MkButton primary @click="onCreateWebhookClicked">
<i class="ti ti-plus"></i> {{ i18n.ts._webhookSettings.createWebhook }}
@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</FormSection>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/admin/users.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps">
<div :class="$style.inputs">
<MkButton style="margin-left: auto" @click="resetQuery">{{ i18n.ts.reset }}</MkButton>
@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/ads.vue
View File

@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer :contentMax="500">
<div class="_spacer" style="--MI_SPACER-w: 500px;">
<div class="_gaps">
<MkAd v-for="ad in instance.ads" :key="ad.id" :specify="ad"/>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/announcement.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<Transition
:enterActiveClass="prefer.s.animation ? $style.fadeEnterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.fadeLeaveActive : ''"
@ -42,7 +42,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkError v-else-if="error" @retry="fetch()"/>
<MkLoading v-else/>
</Transition>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/announcements.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div class="_gaps">
<MkInfo v-if="$i && $i.hasUnreadAnnouncement && tab === 'current'" warn>{{ i18n.ts.youHaveUnreadAnnouncements }}</MkInfo>
<MkPagination ref="paginationEl" :key="tab" v-slot="{items}" :pagination="tab === 'current' ? paginationCurrent : paginationPast" class="_gaps">
@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</section>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/antenna-timeline.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div ref="rootEl">
<div v-if="queue > 0" :class="$style.new"><button class="_buttonPrimary" :class="$style.newButton" @click="top()">{{ i18n.ts.newNoteRecived }}</button></div>
<div :class="$style.tl">
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/api-console.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div class="_gaps_m">
<div class="_gaps_m">
<MkInput v-model="endpoint" :datalist="endpoints" @update:modelValue="onEndpointChange()">
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkTextarea>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/auth.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="500">
<div class="_spacer" style="--MI_SPACER-w: 500px;">
<div v-if="state == 'fetch-session-error'">
<p>{{ i18n.ts.somethingHappened }}</p>
</div>
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<p :class="$style.loginMessage">{{ i18n.ts._auth.pleaseLogin }}</p>
<MkSignin @login="onLogin"/>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/avatar-decoration-edit-dialog.vue
View File

@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else #header>New decoration</template>
<div style="display: flex; flex-direction: column; min-height: 100%;">
<MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" style="flex-grow: 1px;;">
<div class="_gaps_m">
<div :class="$style.preview">
<div :class="[$style.previewItem, $style.light]">
@ -51,7 +51,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFolder>
<MkButton v-if="avatarDecoration" danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
</MkSpacer>
</div>
<div :class="$style.footer">
<MkButton primary rounded style="margin: 0 auto;" @click="done"><i class="ti ti-check"></i> {{ props.avatarDecoration ? i18n.ts.update : i18n.ts.create }}</MkButton>
</div>

4
packages/frontend/src/pages/avatar-decorations.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="_gaps">
<div :class="$style.decorations">
<div
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/channel-editor.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div v-if="channelId == null || channel != null" class="_gaps_m">
<MkInput v-model="name">
<template #label>{{ i18n.ts.name }}</template>
@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton v-if="channelId" danger @click="archive()"><i class="ti ti-trash"></i> {{ i18n.ts.archive }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/channel.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div v-if="channel && tab === 'overview'" class="_gaps">
<div class="_panel" :class="$style.bannerContainer">
<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
@ -56,14 +56,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkInfo warn>{{ i18n.ts.notesSearchNotAvailable }}</MkInfo>
</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 class="_buttonsCenter">
<MkButton inline rounded primary gradate @click="openPostForm()"><i class="ti ti-pencil"></i> {{ i18n.ts.postToTheChannel }}</MkButton>
</div>
</MkSpacer>
</div>
</div>
</template>
</PageWithHeader>

4
packages/frontend/src/pages/channels.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer :contentMax="1200">
<div class="_spacer" style="--MI_SPACER-w: 1200px;">
<div v-if="tab === 'search'" :class="$style.searchRoot">
<div class="_gaps">
<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search">
@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/chat/home.vue
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>

4
packages/frontend/src/pages/chat/message.vue
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>

16
packages/frontend/src/pages/chat/room.vue
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">

4
packages/frontend/src/pages/clicker.vue
View File

@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<MkClickerGame/>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/clip.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div v-if="clip" class="_gaps">
<div class="_panel">
<div class="_gaps_s" :class="$style.description">
@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkNotes :pagination="pagination" :detail="true"/>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/contact.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer :contentMax="600" :marginMin="20">
<div class="_spacer" style="--MI_SPACER-w: 600" :marginMin="20px;">
<div class="_gaps_m">
<MkKeyValue :copy="instance.maintainerName">
<template #key>{{ i18n.ts.administrator }}</template>
@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</MkKeyValue>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/custom-emojis-manager.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="900">
<div class="_spacer" style="--MI_SPACER-w: 900px;">
<div class="ogwlenmc">
<div v-if="tab === 'local'" class="local">
<MkInput v-model="query" :debounce="true" type="search" autocapitalize="off">
@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/drive.file.vue
View File

@ -10,13 +10,13 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<MkSwiper v-model:tab="tab" :tabs="headerTabs">
<MkSpacer v-if="tab === 'info'" :contentMax="800">
<div class="_spacer" v-if="tab === 'info'" style="--MI_SPACER-w: 800px;">
<XFileInfo :fileId="fileId"/>
</MkSpacer>
</div>
<MkSpacer v-else-if="tab === 'notes'" :contentMax="800">
<div class="_spacer" v-else-if="tab === 'notes'" style="--MI_SPACER-w: 800px;">
<XNotes :fileId="fileId"/>
</MkSpacer>
</div>
</MkSwiper>
</MkStickyContainer>
</template>

4
packages/frontend/src/pages/drop-and-fusion.game.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div :class="$style.root">
<div v-if="!gameLoaded" :class="$style.loadingScreen">
<div>{{ i18n.ts.loading }}<MkEllipsis/></div>
@ -187,7 +187,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/drop-and-fusion.vue
View File

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass="$style.transition_zoom_move"
mode="out-in"
>
<MkSpacer v-if="!gameStarted" :contentMax="800">
<div class="_spacer" v-if="!gameStarted" style="--MI_SPACER-w: 800px;">
<div :class="$style.root">
<div class="_gaps">
<div class="_woodenFrame" style="text-align: center;">
@ -80,7 +80,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</div>
</div>
</MkSpacer>
</div>
<XGame v-else :gameMode="gameMode" :mute="mute" @end="onGameEnd"/>
</Transition>
</template>

4
packages/frontend/src/pages/emoji-edit-dialog.vue
View File

@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else #header>New emoji</template>
<div style="display: flex; flex-direction: column; min-height: 100%;">
<MkSpacer :marginMin="20" :marginMax="28" style="flex-grow: 1;">
<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28" style="flex-grow: 1px;;">
<div class="_gaps_m">
<div v-if="imgUrl != null" :class="$style.imgs">
<div style="background: #000;" :class="$style.imgContainer">
@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="localOnly">{{ i18n.ts.localOnly }}</MkSwitch>
<MkButton v-if="emoji" danger @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
</MkSpacer>
</div>
<div :class="$style.footer">
<MkButton primary rounded style="margin: 0 auto;" @click="done"><i class="ti ti-check"></i> {{ props.emoji ? i18n.ts.update : i18n.ts.create }}</MkButton>
</div>

4
packages/frontend/src/pages/explore.featured.vue
View File

@ -4,14 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<MkTab v-model="tab" style="margin-bottom: var(--MI-margin);">
<option value="notes">{{ i18n.ts.notes }}</option>
<option value="polls">{{ i18n.ts.poll }}</option>
</MkTab>
<MkNotes v-if="tab === 'notes'" :pagination="paginationForNotes"/>
<MkNotes v-else-if="tab === 'polls'" :pagination="paginationForPolls"/>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/explore.roles.vue
View File

@ -4,11 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div class="_gaps_s">
<MkRolePreview v-for="role in roles" :key="role.id" :role="role" :forModeration="false"/>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/explore.users.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="1200">
<div class="_spacer" style="--MI_SPACER-w: 1200px;">
<MkTab v-if="instance.federation !== 'none'" v-model="origin" style="margin-bottom: var(--MI-margin);">
<option value="local">{{ i18n.ts.local }}</option>
<option value="remote">{{ i18n.ts.remote }}</option>
@ -59,7 +59,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkFoldableSection>
</template>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/favorites.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<MkPagination :pagination="pagination">
<template #empty>
<div class="_fullinfo">
@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkDateSeparatedList>
</template>
</MkPagination>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/flash/flash-edit.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div class="_gaps">
<MkInput v-model="title">
<template #label>{{ i18n.ts._play.title }}</template>
@ -24,16 +24,16 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #label>{{ i18n.ts._play.script }}</template>
</MkCodeEditor>
</div>
</MkSpacer>
</div>
<template #footer>
<div :class="$style.footer">
<MkSpacer>
<div class="_spacer">
<div class="_buttons">
<MkButton primary @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
<MkButton @click="show"><i class="ti ti-eye"></i> {{ i18n.ts.show }}</MkButton>
<MkButton v-if="flash" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
</MkSpacer>
</div>
</div>
</template>
</PageWithHeader>

4
packages/frontend/src/pages/flash/flash-index.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
<div class="_gaps_s">
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/flash/flash.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<Transition :name="prefer.s.animation ? 'fade' : ''" mode="out-in">
<div v-if="flash" :key="flash.id">
<Transition :name="prefer.s.animation ? 'zoom' : ''" mode="out-in">
@ -56,7 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkError v-else-if="error" @retry="fetchFlash()"/>
<MkLoading v-else/>
</Transition>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/follow-requests.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<MkPagination ref="paginationComponent" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</template>
</MkPagination>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/gallery/edit.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 800px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<FormSuspense :p="init" class="_gaps">
<MkInput v-model="title">
<template #label>{{ i18n.ts.title }}</template>
@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton v-if="postId" danger @click="del"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
</div>
</FormSuspense>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/gallery/index.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer :contentMax="1400">
<div class="_spacer" style="--MI_SPACER-w: 1400px;">
<div v-if="tab === 'explore'">
<MkFoldableSection class="_margin">
<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/gallery/post.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="1000" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 1000px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div class="_root">
<Transition :name="prefer.s.animation ? 'fade' : ''" mode="out-in">
<div v-if="post" class="rkxwuolj">
@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkLoading v-else/>
</Transition>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/games.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div class="_gaps">
<div class="_panel" :class="$style.link">
<MkA to="/bubble-game">
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/install-extensions.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithAnimBg>
<MkSpacer :contentMax="550" :marginMax="50">
<div class="_spacer" style="--MI_SPACER-w: 550" :marginMax="50px;">
<MkLoading v-if="uiPhase === 'fetching'"/>
<MkExtensionInstaller v-else-if="uiPhase === 'confirm' && data" :extension="data" @confirm="install()" @cancel="close_()">
<template #additionalInfo>
@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton @click="close_()">{{ i18n.ts.close }}</MkButton>
</div>
</div>
</MkSpacer>
</div>
</PageWithAnimBg>
</template>

4
packages/frontend/src/pages/instance-info.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32">
<div v-if="instance" class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div v-if="tab === 'overview'" class="_gaps_m">
<div class="fnfelxur">
<img :src="faviconUrl" alt="" class="icon"/>
@ -125,7 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkObjectView tall :value="instance">
</MkObjectView>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/invite.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader>
<MkSpacer v-if="!instance.disableRegistration || !($i && ($i.isAdmin || $i.policies.canInvite))" :contentMax="1200">
<div class="_spacer" v-if="!instance.disableRegistration || !($i && ($i.isAdmin || $i.policies.canInvite))" style="--MI_SPACER-w: 1200px;">
<div :class="$style.root">
<img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
<div :class="$style.text">
@ -13,8 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.nothing }}
</div>
</div>
</MkSpacer>
<MkSpacer v-else :contentMax="800">
</div>
<div class="_spacer" v-else style="--MI_SPACER-w: 800px;">
<div class="_gaps_m" style="text-align: center;">
<div v-if="resetCycle && inviteLimit">{{ i18n.tsx.inviteLimitResetCycle({ time: resetCycle, limit: inviteLimit }) }}</div>
<MkButton inline primary rounded :disabled="currentInviteLimit !== null && currentInviteLimit <= 0" @click="create"><i class="ti ti-user-plus"></i> {{ i18n.ts.createInviteCode }}</MkButton>
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
</MkPagination>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

8
packages/frontend/src/pages/list.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer v-if="error != null" :contentMax="1200">
<div class="_spacer" v-if="error != null" style="--MI_SPACER-w: 1200px;">
<div :class="$style.root">
<img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
<p :class="$style.text">
@ -13,8 +13,8 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ i18n.ts.nothing }}
</p>
</div>
</MkSpacer>
<MkSpacer v-else-if="list" :contentMax="700">
</div>
<div class="_spacer" v-else-if="list" style="--MI_SPACER-w: 700px;">
<div v-if="list" class="members _margin">
<div :class="$style.member_text">{{ i18n.ts.members }}</div>
<div class="_gaps_s">
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton v-if="list.isLiked" v-tooltip="i18n.ts.unlike" inline :class="$style.button" asLike primary @click="unlike()"><i class="ti ti-heart-off"></i><span v-if="list.likedCount > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton v-if="!list.isLiked" v-tooltip="i18n.ts.like" inline :class="$style.button" asLike @click="like()"><i class="ti ti-heart"></i><span v-if="1 > 0" class="count">{{ list.likedCount }}</span></MkButton>
<MkButton inline @click="create()"><i class="ti ti-download" :class="$style.import"></i>{{ i18n.ts.import }}</MkButton>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/lookup.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="800">
<div class="_spacer" style="--MI_SPACER-w: 800px;">
<div v-if="state === 'done'" class="_buttonsCenter">
<MkButton @click="close">{{ i18n.ts.close }}</MkButton>
<MkButton @click="goToMisskey">{{ i18n.ts.goToMisskey }}</MkButton>
@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-else class="_fullInfo">
<MkLoading/>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/my-antennas/index.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div>
<div v-if="antennas.length === 0" class="empty">
<div class="_fullinfo">
@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</div>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/my-clips/index.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div v-if="tab === 'my'" class="_gaps">
<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-else-if="tab === 'favorites'" class="_gaps">
<MkClipPreview v-for="item in favorites" :key="item.id" :clip="item"/>
</div>
</MkSpacer>
</div>
</PageWithHeader>
</template>

Some files were not shown because too many files have changed in this diff Show More