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

@ -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>

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>

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>

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>

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>

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>

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>

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 }}

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">

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>

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>

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>

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>

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>

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>

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/>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>