diff options
Diffstat (limited to 'packages/client/src/pages/about.vue')
| -rw-r--r-- | packages/client/src/pages/about.vue | 154 |
1 files changed, 86 insertions, 68 deletions
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index dbdf0f6d91..a3a3d3cfb7 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -1,70 +1,80 @@ <template> -<FormBase> - <div class="_debobigegoItem"> - <div class="_debobigegoPanel fwhjspax"> - <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/> - <span class="name">{{ $instance.name || host }}</span> +<MkSpacer :content-max="600" :margin-min="20"> + <div class="_formRoot"> + <div class="_formBlock fwhjspax" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"> + <div class="content"> + <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/> + <div class="name"> + <b>{{ $instance.name || host }}</b> + </div> + </div> </div> - </div> - <FormTextarea readonly :value="$instance.description"> - </FormTextarea> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.description }}</template> + <template #value>{{ $instance.description }}</template> + </MkKeyValue> - <FormGroup> - <FormKeyValueView> - <template #key>Misskey</template> - <template #value>v{{ version }}</template> - </FormKeyValueView> - <FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink> - </FormGroup> + <FormSection> + <MkKeyValue class="_formBlock" :copy="version"> + <template #key>Misskey</template> + <template #value>{{ version }}</template> + </MkKeyValue> + <FormLink to="/about-misskey">{{ $ts.aboutMisskey }}</FormLink> + </FormSection> - <FormGroup> - <FormKeyValueView> - <template #key>{{ $ts.administrator }}</template> - <template #value>{{ $instance.maintainerName }}</template> - </FormKeyValueView> - <FormKeyValueView> - <template #key>{{ $ts.contact }}</template> - <template #value>{{ $instance.maintainerEmail }}</template> - </FormKeyValueView> - </FormGroup> + <FormSection> + <div class="_inputSplit"> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.administrator }}</template> + <template #value>{{ $instance.maintainerName }}</template> + </MkKeyValue> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.contact }}</template> + <template #value>{{ $instance.maintainerEmail }}</template> + </MkKeyValue> + </div> + </FormSection> - <FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink> + <FormLink v-if="$instance.tosUrl" :to="$instance.tosUrl" external>{{ $ts.tos }}</FormLink> - <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> + <FormSuspense :p="initStats"> + <FormSection> + <template #label>{{ $ts.statistics }}</template> + <div class="_inputSplit"> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.users }}</template> + <template #value>{{ number(stats.originalUsersCount) }}</template> + </MkKeyValue> + <MkKeyValue class="_formBlock"> + <template #key>{{ $ts.notes }}</template> + <template #value>{{ number(stats.originalNotesCount) }}</template> + </MkKeyValue> + </div> + </FormSection> + </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> + <FormSection> + <template #label>Well-known resources</template> + <div class="_formLinks"> + <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> + </div> + </FormSection> + </div> +</MkSpacer> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { version, instanceName } from '@/config'; -import FormLink from '@/components/debobigego/link.vue'; -import FormBase from '@/components/debobigego/base.vue'; -import FormGroup from '@/components/debobigego/group.vue'; -import FormKeyValueView from '@/components/debobigego/key-value-view.vue'; -import FormTextarea from '@/components/debobigego/textarea.vue'; -import FormSuspense from '@/components/debobigego/suspense.vue'; +import FormLink from '@/components/form/link.vue'; +import FormSection from '@/components/form/section.vue'; +import FormSuspense from '@/components/form/suspense.vue'; +import MkKeyValue from '@/components/key-value.vue'; import * as os from '@/os'; import number from '@/filters/number'; import * as symbols from '@/symbols'; @@ -72,11 +82,9 @@ import { host } from '@/config'; export default defineComponent({ components: { - FormBase, - FormGroup, + MkKeyValue, + FormSection, FormLink, - FormKeyValueView, - FormTextarea, FormSuspense, }, @@ -105,19 +113,29 @@ export default defineComponent({ <style lang="scss" scoped> .fwhjspax { - padding: 16px; text-align: center; + border-radius: 10px; + overflow: clip; + background-size: cover; + background-position: center center; - > .icon { - display: block; - margin: auto; - height: 64px; - border-radius: 8px; - } + > .content { + overflow: hidden; - > .name { - display: block; - margin-top: 12px; + > .icon { + display: block; + margin: 16px auto 0 auto; + height: 64px; + border-radius: 8px; + } + + > .name { + display: block; + padding: 16px; + color: #fff; + text-shadow: 0 0 8px #000; + background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); + } } } </style> |