diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index b37bf66a49..0353598399 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -648,6 +648,7 @@ noteFavoritesCount: "お気に入りノートの数" pageLikesCount: "Pageにいいねした数" pageLikedCount: "Pageにいいねされた数" reversiCount: "リバーシの対局数" +contact: "連絡先" _aboutMisskey: about: "Misskeyはsyuiloによって2014年から開発されている、オープンソースのソフトウェアです。" diff --git a/src/client/pages/about.vue b/src/client/pages/about.vue index 7599ee693a..dd0be265f5 100644 --- a/src/client/pages/about.vue +++ b/src/client/pages/about.vue @@ -1,46 +1,55 @@ <template> -<div class="mmnnbwxb"> - <section class="_section info" v-if="meta"> - <div class="_title"><Fa :icon="faInfoCircle"/> {{ $t('instanceInfo') }}</div> - <div class="_content" v-if="meta.description"> - <div v-html="meta.description"></div> - </div> - <div class="_content table"> - <div><b>{{ $t('administrator') }}</b><span>{{ meta.maintainerName }}</span></div> - <div><b></b><span>{{ meta.maintainerEmail }}</span></div> - </div> - <div class="_content table"> - <div><b>Misskey</b><span>v{{ version }}</span></div> - </div> - </section> - - <div class="_section"> - <div class="_content"> - <MkInstanceStats/> - </div> +<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> </div> -</div> + <FormGroup> + <FormKeyValueView> + <template #key>Misskey</template> + <template #value>v{{ version }}</template> + </FormKeyValueView> + </FormGroup> + + <FormGroup> + <FormKeyValueView> + <template #key>{{ $t('administrator') }}</template> + <template #value>{{ meta.maintainerName }}</template> + </FormKeyValueView> + <FormKeyValueView> + <template #key>{{ $t('contact') }}</template> + <template #value>{{ meta.maintainerEmail }}</template> + </FormKeyValueView> + </FormGroup> +</FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; -import { version } from '@/config'; -import MkInstanceStats from '@/components/instance-stats.vue'; +import { version, instanceName } from '@/config'; +import FormLink from '@/components/form/link.vue'; +import FormBase from '@/components/form/base.vue'; +import FormGroup from '@/components/form/group.vue'; +import FormKeyValueView from '@/components/form/key-value-view.vue'; import * as os from '@/os'; export default defineComponent({ components: { - MkInstanceStats + FormBase, + FormGroup, + FormLink, + FormKeyValueView, }, data() { return { INFO: { - title: this.$t('about'), + title: this.$t('instanceInfo'), icon: faInfoCircle }, version, + instanceName, serverInfo: null, faInfoCircle } @@ -56,15 +65,16 @@ export default defineComponent({ <style lang="scss" scoped> .mmnnbwxb { - > .info { - > .table { - > div { - display: flex; + max-width: 800px; + box-sizing: border-box; + margin: 0 auto; - > * { - flex: 1; - } - } + > .logo { + text-align: center; + + > img { + vertical-align: bottom; + max-height: 100px; } } }