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

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

@ -1,15 +1,15 @@
<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>
<swiper <MkSpacer :content-max="600" :margin-min="20">
:modules="[Virtual]" <swiper
:space-between="20" :modules="[Virtual]"
:virtual="true" :space-between="20"
@swiper="setSwiperRef" :virtual="true"
@slide-change="onSlideChange" @swiper="setSwiperRef"
> @slide-change="onSlideChange"
<swiper-slide> >
<MkSpacer :content-max="600" :margin-min="20"> <swiper-slide>
<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>

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

@ -1,15 +1,15 @@
<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>
<swiper <MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
:modules="[Virtual]" <swiper
:space-between="20" :modules="[Virtual]"
:virtual="true" :space-between="20"
@swiper="setSwiperRef" :virtual="true"
@slide-change="onSlideChange" @swiper="setSwiperRef"
> @slide-change="onSlideChange"
<swiper-slide> >
<MkSpacer :content-max="600" :margin-min="16" :margin-max="32"> <swiper-slide>
<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>

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

@ -1,42 +1,38 @@
<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>
<swiper <MkSpacer :content-max="700">
:modules="[Virtual]" <swiper
:space-between="20" :modules="[Virtual]"
:virtual="true" :space-between="20"
@swiper="setSwiperRef" :virtual="true"
@slide-change="onSlideChange" @swiper="setSwiperRef"
> @slide-change="onSlideChange"
<swiper-slide> >
<MkSpacer :content-max="700"> <swiper-slide>
<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>

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

@ -2,120 +2,138 @@
<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
<div class="fnfelxur"> :modules="[Virtual]"
<img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/> :space-between="20"
<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span> :virtual="true"
</div> @swiper="setSwiperRef"
<MkKeyValue :copy="host" oneline style="margin: 1em 0;"> @slide-change="onSlideChange"
<template #key>Host</template> >
<template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template> <swiper-slide>
</MkKeyValue> <div class="_formRoot">
<MkKeyValue oneline style="margin: 1em 0;"> <div class="fnfelxur">
<template #key>{{ i18n.ts.software }}</template> <img :src="instance.iconUrl || instance.faviconUrl" alt="" class="icon"/>
<template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template> <span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
</MkKeyValue> </div>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue :copy="host" oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.administrator }}</template> <template #key>Host</template>
<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template> <template #value><span class="_monospace"><MkLink :url="`https://${host}`">{{ host }}</MkLink></span></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.description }}</template> <template #key>{{ i18n.ts.software }}</template>
<template #value>{{ instance.description }}</template> <template #value><span class="_monospace">{{ instance.softwareName || `(${i18n.ts.unknown})` }} / {{ instance.softwareVersion || `(${i18n.ts.unknown})` }}</span></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.administrator }}</template>
<template #value>{{ instance.maintainerName || `(${i18n.ts.unknown})` }} ({{ instance.maintainerEmail || `(${i18n.ts.unknown})` }})</template>
</MkKeyValue>
<MkKeyValue>
<template #key>{{ i18n.ts.description }}</template>
<template #value>{{ instance.description }}</template>
</MkKeyValue>
<FormSection v-if="iAmModerator"> <FormSection v-if="iAmModerator">
<template #label>Moderation</template> <template #label>Moderation</template>
<FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch> <FormSwitch v-model="suspended" class="_formBlock" @update:modelValue="toggleSuspend">{{ i18n.ts.stopActivityDelivery }}</FormSwitch>
<FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch> <FormSwitch v-model="isBlocked" class="_formBlock" @update:modelValue="toggleBlock">{{ i18n.ts.blockThisInstance }}</FormSwitch>
<MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton> <MkButton @click="refreshMetadata"><i class="fas fa-refresh"></i> Refresh metadata</MkButton>
</FormSection> </FormSection>
<FormSection> <FormSection>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.registeredAt }}</template> <template #key>{{ i18n.ts.registeredAt }}</template>
<template #value><MkTime mode="detail" :time="instance.caughtAt"/></template> <template #value><MkTime mode="detail" :time="instance.caughtAt"/></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.updatedAt }}</template> <template #key>{{ i18n.ts.updatedAt }}</template>
<template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template> <template #value><MkTime mode="detail" :time="instance.infoUpdatedAt"/></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.latestRequestSentAt }}</template> <template #key>{{ i18n.ts.latestRequestSentAt }}</template>
<template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template> <template #value><MkTime v-if="instance.latestRequestSentAt" :time="instance.latestRequestSentAt"/><span v-else>N/A</span></template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.latestStatus }}</template> <template #key>{{ i18n.ts.latestStatus }}</template>
<template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template> <template #value>{{ instance.latestStatus ? instance.latestStatus : 'N/A' }}</template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>{{ i18n.ts.latestRequestReceivedAt }}</template> <template #key>{{ i18n.ts.latestRequestReceivedAt }}</template>
<template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template> <template #value><MkTime v-if="instance.latestRequestReceivedAt" :time="instance.latestRequestReceivedAt"/><span v-else>N/A</span></template>
</MkKeyValue> </MkKeyValue>
</FormSection> </FormSection>
<FormSection> <FormSection>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>Following (Pub)</template> <template #key>Following (Pub)</template>
<template #value>{{ number(instance.followingCount) }}</template> <template #value>{{ number(instance.followingCount) }}</template>
</MkKeyValue> </MkKeyValue>
<MkKeyValue oneline style="margin: 1em 0;"> <MkKeyValue oneline style="margin: 1em 0;">
<template #key>Followers (Sub)</template> <template #key>Followers (Sub)</template>
<template #value>{{ number(instance.followersCount) }}</template> <template #value>{{ number(instance.followersCount) }}</template>
</MkKeyValue> </MkKeyValue>
</FormSection> </FormSection>
<FormSection> <FormSection>
<template #label>Well-known resources</template> <template #label>Well-known resources</template>
<FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink> <FormLink :to="`https://${host}/.well-known/host-meta`" external style="margin-bottom: 8px;">host-meta</FormLink>
<FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink> <FormLink :to="`https://${host}/.well-known/host-meta.json`" external style="margin-bottom: 8px;">host-meta.json</FormLink>
<FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink> <FormLink :to="`https://${host}/.well-known/nodeinfo`" external style="margin-bottom: 8px;">nodeinfo</FormLink>
<FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink> <FormLink :to="`https://${host}/robots.txt`" external style="margin-bottom: 8px;">robots.txt</FormLink>
<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 v-else-if="tab === 'chart'" class="_formRoot">
<div class="cmhjzshl">
<div class="selects">
<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
</MkSelect>
</div> </div>
<div class="charts"> </swiper-slide>
<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div> <swiper-slide>
<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart> <div class="_formRoot">
<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div> <div class="cmhjzshl">
<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart> <div class="selects">
<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
<option value="instance-requests">{{ i18n.ts._instanceCharts.requests }}</option>
<option value="instance-users">{{ i18n.ts._instanceCharts.users }}</option>
<option value="instance-users-total">{{ i18n.ts._instanceCharts.usersTotal }}</option>
<option value="instance-notes">{{ i18n.ts._instanceCharts.notes }}</option>
<option value="instance-notes-total">{{ i18n.ts._instanceCharts.notesTotal }}</option>
<option value="instance-ff">{{ i18n.ts._instanceCharts.ff }}</option>
<option value="instance-ff-total">{{ i18n.ts._instanceCharts.ffTotal }}</option>
<option value="instance-drive-usage">{{ i18n.ts._instanceCharts.cacheSize }}</option>
<option value="instance-drive-usage-total">{{ i18n.ts._instanceCharts.cacheSizeTotal }}</option>
<option value="instance-drive-files">{{ i18n.ts._instanceCharts.files }}</option>
<option value="instance-drive-files-total">{{ i18n.ts._instanceCharts.filesTotal }}</option>
</MkSelect>
</div>
<div class="charts">
<div class="label">{{ i18n.t('recentNHours', { n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="hour" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
<div class="label">{{ i18n.t('recentNDays', { n: 90 }) }}</div>
<MkChart class="chart" :src="chartSrc" span="day" :limit="90" :args="{ host: host }" :detailed="true"></MkChart>
</div>
</div>
</div> </div>
</div> </swiper-slide>
</div> <swiper-slide>
<div v-else-if="tab === 'users'" class="_formRoot"> <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>
<MkObjectView tall :value="instance"> <swiper-slide>
</MkObjectView> <div class="_formRoot">
</div> <MkObjectView tall :value="instance">
</MkObjectView>
</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>