Improve client
This commit is contained in:
syuilo
parent
c384c4ca6c
commit
23821d6fad
|
|
@ -25,7 +25,7 @@
|
|||
<div class="text">{{ $t('aboutX', { x: instanceName }) }}</div>
|
||||
</MkA>
|
||||
<MkA to="/about-misskey" @click.passive="close()" v-click-anime>
|
||||
<i class="fas fa-info-circle icon"></i>
|
||||
<img src="/static-assets/favicon.png" class="icon"/>
|
||||
<div class="text">{{ $ts.aboutMisskey }}</div>
|
||||
</MkA>
|
||||
</div>
|
||||
|
|
@ -101,6 +101,7 @@ export default defineComponent({
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: bottom;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: var(--radius);
|
||||
|
|
@ -117,6 +118,7 @@ export default defineComponent({
|
|||
|
||||
> .icon {
|
||||
font-size: 26px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
> .text {
|
||||
|
|
|
|||
|
|
@ -1,39 +1,57 @@
|
|||
<template>
|
||||
<FormBase class="mmnnbwxb" v-if="meta">
|
||||
<div class="_formItem logo">
|
||||
<img v-if="meta.logoImageUrl" :src="meta.logoImageUrl">
|
||||
<span v-else class="text">{{ instanceName }}</span>
|
||||
<FormBase>
|
||||
<div class="_formItem">
|
||||
<div class="_formPanel fwhjspax">
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
|
||||
<span class="name">{{ $instance.name || host }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FormTextarea readonly :value="$instance.description">
|
||||
</FormTextarea>
|
||||
|
||||
<FormGroup>
|
||||
<FormKeyValueView>
|
||||
<template #key>Misskey</template>
|
||||
<template #value>v{{ version }}</template>
|
||||
</FormKeyValueView>
|
||||
<FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<FormKeyValueView>
|
||||
<template #key>{{ $ts.administrator }}</template>
|
||||
<template #value>{{ meta.maintainerName }}</template>
|
||||
<template #value>{{ $instance.maintainerName }}</template>
|
||||
</FormKeyValueView>
|
||||
<FormKeyValueView>
|
||||
<template #key>{{ $ts.contact }}</template>
|
||||
<template #value>{{ meta.maintainerEmail }}</template>
|
||||
<template #value>{{ $instance.maintainerEmail }}</template>
|
||||
</FormKeyValueView>
|
||||
</FormGroup>
|
||||
|
||||
<FormLink v-if="meta.tosUrl" :to="meta.tosUrl" external>{{ $ts.tos }}</FormLink>
|
||||
<FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink>
|
||||
|
||||
<FormGroup v-if="stats">
|
||||
<template #label>{{ $ts.statistics }}</template>
|
||||
<FormKeyValueView>
|
||||
<template #key>{{ $ts.users }}</template>
|
||||
<template #value>{{ number(stats.originalUsersCount) }}</template>
|
||||
</FormKeyValueView>
|
||||
<FormKeyValueView>
|
||||
<template #key>{{ $ts.notes }}</template>
|
||||
<template #value>{{ number(stats.originalNotesCount) }}</template>
|
||||
</FormKeyValueView>
|
||||
<FormSuspense :p="initStats">
|
||||
<FormGroup>
|
||||
<template #label>{{ $ts.statistics }}</template>
|
||||
<FormKeyValueView>
|
||||
<template #key>{{ $ts.users }}</template>
|
||||
<template #value>{{ number(stats.originalUsersCount) }}</template>
|
||||
</FormKeyValueView>
|
||||
<FormKeyValueView>
|
||||
<template #key>{{ $ts.notes }}</template>
|
||||
<template #value>{{ number(stats.originalNotesCount) }}</template>
|
||||
</FormKeyValueView>
|
||||
</FormGroup>
|
||||
</FormSuspense>
|
||||
|
||||
<FormGroup>
|
||||
<template #label>Well-known resources</template>
|
||||
<FormLink :to="`/.well-known/host-meta`" external>host-meta</FormLink>
|
||||
<FormLink :to="`/.well-known/host-meta.json`" external>host-meta.json</FormLink>
|
||||
<FormLink :to="`/.well-known/nodeinfo`" external>nodeinfo</FormLink>
|
||||
<FormLink :to="`/robots.txt`" external>robots.txt</FormLink>
|
||||
<FormLink :to="`/manifest.json`" external>manifest.json</FormLink>
|
||||
</FormGroup>
|
||||
</FormBase>
|
||||
</template>
|
||||
|
|
@ -45,9 +63,12 @@ import FormLink from '@client/components/form/link.vue';
|
|||
import FormBase from '@client/components/form/base.vue';
|
||||
import FormGroup from '@client/components/form/group.vue';
|
||||
import FormKeyValueView from '@client/components/form/key-value-view.vue';
|
||||
import FormTextarea from '@client/components/form/textarea.vue';
|
||||
import FormSuspense from '@client/components/form/suspense.vue';
|
||||
import * as os from '@client/os';
|
||||
import number from '@client/filters/number';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { host } from '@client/config';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -55,6 +76,8 @@ export default defineComponent({
|
|||
FormGroup,
|
||||
FormLink,
|
||||
FormKeyValueView,
|
||||
FormTextarea,
|
||||
FormSuspense,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -63,24 +86,17 @@ export default defineComponent({
|
|||
title: this.$ts.instanceInfo,
|
||||
icon: 'fas fa-info-circle'
|
||||
},
|
||||
host,
|
||||
version,
|
||||
instanceName,
|
||||
stats: null,
|
||||
initStats: () => os.api('stats', {
|
||||
}).then((stats) => {
|
||||
this.stats = stats;
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
meta() {
|
||||
return this.$instance;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
os.api('stats').then(stats => {
|
||||
this.stats = stats;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
number
|
||||
}
|
||||
|
|
@ -88,18 +104,20 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mmnnbwxb {
|
||||
max-width: 800px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
.fwhjspax {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
|
||||
> .logo {
|
||||
text-align: center;
|
||||
> .icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
> img {
|
||||
vertical-align: bottom;
|
||||
max-height: 100px;
|
||||
}
|
||||
> .name {
|
||||
display: block;
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -147,7 +147,6 @@ import * as os from '@client/os';
|
|||
import number from '@client/filters/number';
|
||||
import bytes from '@client/filters/bytes';
|
||||
import * as symbols from '@client/symbols';
|
||||
import { url } from '@client/config';
|
||||
|
||||
const chartLimit = 90;
|
||||
const sum = (...arr) => arr.reduce((r, a) => r.map((b, i) => a[i] + b));
|
||||
|
|
@ -449,7 +448,7 @@ export default defineComponent({
|
|||
.fnfelxur {
|
||||
padding: 16px;
|
||||
|
||||
> img {
|
||||
> .icon {
|
||||
display: block;
|
||||
margin: auto;
|
||||
height: 64px;
|
||||
|
|
|
|||
|
|
@ -31,8 +31,10 @@
|
|||
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
|
||||
</MkA>
|
||||
<div class="divider"></div>
|
||||
<div class="foo">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮"/>
|
||||
<div class="about">
|
||||
<MkA class="link" to="/about" v-click-anime>
|
||||
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" class="_ghost"/>
|
||||
</MkA>
|
||||
</div>
|
||||
<!--<MisskeyLogo class="misskey"/>-->
|
||||
</div>
|
||||
|
|
@ -260,14 +262,21 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> .misskey {
|
||||
> .about {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
> .foo {
|
||||
text-align: center;
|
||||
padding: 8px 0 16px 0;
|
||||
opacity: 0.5;
|
||||
text-align: center;
|
||||
|
||||
> .link {
|
||||
display: block;
|
||||
width: 32px;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .item {
|
||||
|
|
|
|||
Loading…
Reference in a new issue