非ログイン時のユーザーページにインスタンスの紹介を表示するように

This commit is contained in:
syuilo 2018-09-23 19:55:15 +09:00
parent 61e05cb50e
commit a2e2d5ba77
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
3 changed files with 64 additions and 0 deletions

View file

@ -1,5 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import instance from './instance.vue';
import cwButton from './cw-button.vue'; import cwButton from './cw-button.vue';
import tagCloud from './tag-cloud.vue'; import tagCloud from './tag-cloud.vue';
import trends from './trends.vue'; import trends from './trends.vue';
@ -43,6 +44,7 @@ import uiSelect from './ui/select.vue';
import formButton from './ui/form/button.vue'; import formButton from './ui/form/button.vue';
import formRadio from './ui/form/radio.vue'; import formRadio from './ui/form/radio.vue';
Vue.component('mk-instance', instance);
Vue.component('mk-cw-button', cwButton); Vue.component('mk-cw-button', cwButton);
Vue.component('mk-tag-cloud', tagCloud); Vue.component('mk-tag-cloud', tagCloud);
Vue.component('mk-trends', trends); Vue.component('mk-trends', trends);

View file

@ -0,0 +1,57 @@
<template>
<div class="nhasjydimbopojusarffqjyktglcuxjy" v-if="meta">
<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
<h1>{{ meta.name }}</h1>
<p v-html="meta.description || '%i18n:common.about%'"></p>
<router-link to="/">%i18n:@start%</router-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
meta: null
}
},
created() {
(this as any).os.getMeta().then(meta => {
this.meta = meta;
});
}
});
</script>
<style lang="stylus" scoped>
root(isDark)
color isDark ? #fff : #5b646f
background isDark ? #21242f : #fff
text-align center
> .banner
height 100px
background-position center
background-size cover
> h1
margin 16px
font-size 16px
> p
margin 16px
font-size 14px
> a
display block
padding-bottom 16px
.nhasjydimbopojusarffqjyktglcuxjy[data-darkmode]
root(true)
.nhasjydimbopojusarffqjyktglcuxjy:not([data-darkmode])
root(false)
</style>

View file

@ -10,6 +10,7 @@
<x-timeline class="timeline" ref="tl" :user="user"/> <x-timeline class="timeline" ref="tl" :user="user"/>
</div> </div>
<div class="side"> <div class="side">
<div class="instance" v-if="!$store.getters.isSignedIn"><mk-instance/></div>
<x-profile :user="user"/> <x-profile :user="user"/>
<x-twitter :user="user" v-if="user.host === null && user.twitter"/> <x-twitter :user="user" v-if="user.host === null && user.twitter"/>
<mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/> <mk-calendar @chosen="warp" :start="new Date(user.createdAt)"/>
@ -131,6 +132,10 @@ root(isDark)
font-size 0.8em font-size 0.8em
color #aaa color #aaa
> .instance
box-shadow var(--shadow)
border-radius var(--round)
> .nav > .nav
padding 16px padding 16px
font-size 12px font-size 12px