HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add swiper for instance info, fix MkSpacer

Browse source
This commit is contained in:
ThatOneCalculator 2022-09-09 15:42:17 -07:00
parent a846a2e15c
commit b5df90c797
4 changed files with 193 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/client/src/pages/about.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :content-max="600" :margin-min="20">
<swiper <swiper
:modules="[Virtual]" :modules="[Virtual]"
:space-between="20" :space-between="20"
@ -9,7 +10,6 @@
@slide-change="onSlideChange" @slide-change="onSlideChange"
> >
<swiper-slide> <swiper-slide>
<MkSpacer :content-max="600" :margin-min="20">
<div class="_formRoot"> <div class="_formRoot">
<div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"> <div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
<div class="content"> <div class="content">
@ -74,24 +74,18 @@
</div> </div>
</FormSection> </FormSection>
</div> </div>
</MkSpacer>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<MkSpacer :content-max="1000" :margin-min="20">
<XEmojis/> <XEmojis/>
</MkSpacer>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<MkSpacer :content-max="1000" :margin-min="20">
<XFederation/> <XFederation/>
</MkSpacer>
</swiper-slide> </swiper-slide>
<swiper-slide> <swiper-slide>
<MkSpacer :content-max="1000" :margin-min="20">
<MkInstanceStats :chart-limit="500" :detailed="true"/> <MkInstanceStats :chart-limit="500" :detailed="true"/>
</MkSpacer>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>

8
packages/client/src/pages/admin-file.vue
View file

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

8
packages/client/src/pages/channels.vue
View file

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

45
packages/client/src/pages/instance-info.vue
View file

@ -2,7 +2,15 @@
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <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"> <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"> <div class="fnfelxur">
<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/> <img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span> <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> <FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
</FormSection> </FormSection>
</div> </div>
<div v-else-if="tab === 'chart'" class="_formRoot"> </swiper-slide>
<swiper-slide>
<div class="_formRoot">
<div class="cmhjzshl"> <div class="cmhjzshl">
<div class="selects"> <div class="selects">
<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;"> <MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
@ -99,23 +109,31 @@
</div> </div>
</div> </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;"> <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}`"> <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"/> <MkUserCardMini :user="user"/>
</MkA> </MkA>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'raw'" class="_formRoot"> </swiper-slide>
<swiper-slide>
<div class="_formRoot">
<MkObjectView tall :value="instance"> <MkObjectView tall :value="instance">
</MkObjectView> </MkObjectView>
</div> </div>
</swiper-slide>
</swiper>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { } from 'vue'; import { } from 'vue';
import { Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import * as misskey from 'misskey-js'; import * as misskey from 'misskey-js';
import MkChart from '@/components/MkChart.vue'; import MkChart from '@/components/MkChart.vue';
import MkObjectView from '@/components/MkObjectView.vue'; import MkObjectView from '@/components/MkObjectView.vue';
@ -134,12 +152,16 @@ import { definePageMetadata } from '@/scripts/page-metadata';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkUserCardMini from '@/components/MkUserCardMini.vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import 'swiper/scss';
import 'swiper/scss/virtual';
const props = defineProps<{ const props = defineProps<{
host: string; host: string;
}>(); }>();
let tab = $ref('overview'); let tab = $ref('overview');
let tabs = ['overview'];
if (iAmModerator) tabs.push('chart', 'users', 'raw');
let chartSrc = $ref('instance-requests'); let chartSrc = $ref('instance-requests');
let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null); let meta = $ref<misskey.entities.DetailedInstanceMetadata | null>(null);
let instance = $ref<misskey.entities.Instance | null>(null); let instance = $ref<misskey.entities.Instance | null>(null);
@ -228,6 +250,21 @@ definePageMetadata({
title: props.host, title: props.host,
icon: 'fas fa-server', 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>