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