Add swiper for instance info, fix MkSpacer

2022-09-09 15:42:17 -07:00 · 2022-09-09 15:42:17 -07:00 · b5df90c797
parent a846a2e15c
commit b5df90c797
4 changed files with 193 additions and 170 deletions
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@ -1,6 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="600" :margin-min="20">
 		<swiper
 			:modules="[Virtual]"
 			:space-between="20"
@ -9,7 +10,6 @@
 			@slide-change="onSlideChange"
 		>
 			<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="20">
 				<div class="_formRoot">
 					<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
 						<div class="content">
@ -74,24 +74,18 @@
 						</div>
 					</FormSection>
 				</div>
-			</MkSpacer>
 			</swiper-slide>
 			<swiper-slide>
-			<MkSpacer :content-max="1000" :margin-min="20">
 				<XEmojis/>
-			</MkSpacer>
 			</swiper-slide>
 			<swiper-slide>
-			<MkSpacer :content-max="1000" :margin-min="20">
 				<XFederation/>
-			</MkSpacer>
 			</swiper-slide>
 			<swiper-slide>
-			<MkSpacer :content-max="1000" :margin-min="20">
 				<MkInstanceStats :chart-limit="500" :detailed="true"/>
-			</MkSpacer>
 			</swiper-slide>
 		</swiper>
+	</MkSpacer>
 </MkStickyContainer>
 </template>

--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@ -1,6 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
 		<swiper
 			:modules="[Virtual]"
 			:space-between="20"
@ -9,7 +10,6 @@
 			@slide-change="onSlideChange"
 		>
 			<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
 				<div class="cxqhhsmd _formRoot">
 					<a class="_formBlock thumbnail" :href="file.url" target="_blank">
 						<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
@ -47,10 +47,8 @@
 						<MkButton danger @click="del"><i class="fas fa-trash-alt"></i> {{ i18n.ts.delete }}</MkButton>
 					</div>
 				</div>
-			</MkSpacer>
 			</swiper-slide>
 			<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
 				<div v-if="info" class="_formRoot">
 					<MkInfo v-if="!iAmAdmin" warn>{{ i18n.ts.requireAdminForView }}</MkInfo>
 					<MkKeyValue v-if="info.requestIp" class="_formBlock _monospace" :copy="info.requestIp" oneline>
@ -65,17 +63,15 @@
 						</MkKeyValue>
 					</FormSection>
 				</div>
-			</MkSpacer>
 			</swiper-slide>
 			<swiper-slide>
-			<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
 				<div class="_formRoot">
 					<MkObjectView v-if="info" tall :value="info">
 					</MkObjectView>
 				</div>
-			</MkSpacer>
 			</swiper-slide>
 		</swiper>
+	</MkSpacer>
 </MkStickyContainer>
 </template>

--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@ -1,6 +1,7 @@
 <template>
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<MkSpacer :content-max="700">
 		<swiper
 			:modules="[Virtual]"
 			:space-between="20"
@ -9,34 +10,29 @@
 			@slide-change="onSlideChange"
 		>
 			<swiper-slide>
-			<MkSpacer :content-max="700">
 				<div class="_content grwlizim featured">
 					<MkPagination v-slot="{items}" :pagination="featuredPagination">
 						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 					</MkPagination>
 				</div>
-			</MkSpacer>
 			</swiper-slide>
 			<swiper-slide>
-			<MkSpacer :content-max="700">
 				<div class="_content grwlizim following">
 					<MkPagination v-slot="{items}" :pagination="followingPagination">
 						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 					</MkPagination>
 				</div>
-			</MkSpacer>
 			</swiper-slide>
 			<swiper-slide>
-			<MkSpacer :content-max="700">
 				<div class="_content grwlizim owned">
 					<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
 					<MkPagination v-slot="{items}" :pagination="ownedPagination">
 						<MkChannelPreview v-for="channel in items" :key="channel.id" class="_gap" :channel="channel"/>
 					</MkPagination>
 				</div>
-			</MkSpacer>
 			</swiper-slide>
 		</swiper>
+	</MkSpacer>
 </MkStickyContainer>
 </template>

--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@ -2,7 +2,15 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer v-if="instance" :content-max="600" :margin-min="16" :margin-max="32">
-		<div v-if="tab === 'overview'" class="_formRoot">
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
+				<div class="_formRoot">
 					<div class="fnfelxur">
 						<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
 						<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
@ -74,7 +82,9 @@
 						<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
 					</FormSection>
 				</div>
-		<div v-else-if="tab === 'chart'" class="_formRoot">
+			</swiper-slide>
+			<swiper-slide>
+				<div class="_formRoot">
 					<div class="cmhjzshl">
 						<div class="selects">
 							<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
@ -99,23 +109,31 @@
 						</div>
 					</div>
 				</div>
-		<div v-else-if="tab === 'users'" class="_formRoot">
+			</swiper-slide>
+			<swiper-slide>
+				<div class="_formRoot">
 					<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
 						<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${new Date(user.updatedAt).toLocaleString()}`" class="user" :to="`/user-info/${user.id}`">
 							<MkUserCardMini :user="user"/>
 						</MkA>
 					</MkPagination>
 				</div>
-		<div v-else-if="tab === 'raw'" class="_formRoot">
+			</swiper-slide>
+			<swiper-slide>
+				<div class="_formRoot">
 					<MkObjectView tall :value="instance">
 					</MkObjectView>
 				</div>
+			</swiper-slide>
+		</swiper>
 	</MkSpacer>
 </MkStickyContainer>
 </template>

 <script lang="ts" setup>
 import { } from 'vue';
+import { Virtual } from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import * as misskey from 'misskey-js';
 import MkChart from '@/components/MkChart.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
@ -134,12 +152,16 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { i18n } from '@/i18n';
 import MkUserCardMini from '@/components/MkUserCardMini.vue';
 import MkPagination from '@/components/MkPagination.vue';
+import 'swiper/scss';
+import 'swiper/scss/virtual';

 const props = defineProps<{
 	host: string;
 }>();

 let tab = $ref('overview');
+let tabs = ['overview'];
+if (iAmModerator) tabs.push('chart', 'users', 'raw');
 let chartSrc = $ref('instance-requests');
 let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
 let instance = $ref<misskey.entities.Instance | null>(null);
@ -228,6 +250,21 @@ definePageMetadata({
 	title: props.host,
 	icon: 'fas fa-server',
 });
+
+let swiperRef = null;
+
+function setSwiperRef(swiper) {
+	swiperRef = swiper;
+	syncSlide(tabs.indexOf(tab));
+}
+
+function onSlideChange() {
+	tab = tabs[swiperRef.activeIndex];
+}
+
+function syncSlide(index) {
+	swiperRef.slideTo(index);
+}
 </script>

 <style lang="scss" scoped>