sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

✌️

Browse Source
This commit is contained in:
syuilo
2018-06-23 22:55:32 +09:00
parent 488f36d491
commit 874411990b
5 changed files with 93 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/client/app/desktop/views/pages/user/user.header.vue
View File

@ -5,19 +5,32 @@
<div class="fade"></div>
<div class="title">
<p class="name">{{ user | userName }}</p>
<p class="username"><mk-acct :user="user"/></p>
<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
<div>
<template v-if="user.isBot">%fa:robot%</template>
<p class="username"><mk-acct :user="user"/></p>
<p class="location" v-if="user.host === null && user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
<p class="birthday" v-if="user.host === null && user.profile.birthday">%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)</p>
</div>
</div>
</div>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<div class="body">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
<div class="description">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div>
<div class="status">
<span class="notes-count"><b>{{ user.notesCount | number }}</b>%i18n:@posts%</span>
<span class="following clickable" @click="showFollowing"><b>{{ user.followingCount | number }}</b>%i18n:@following%</span>
<span class="followers clickable" @click="showFollowers"><b>{{ user.followersCount | number }}</b>%i18n:@followers%</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import MkFollowingWindow from '../../components/following-window.vue';
import MkFollowersWindow from '../../components/followers-window.vue';
export default Vue.extend({
props: ['user'],
@ -64,7 +77,19 @@ export default Vue.extend({
(this as any).apis.updateBanner().then(i => {
this.user.bannerUrl = i.bannerUrl;
});
}
},
showFollowing() {
(this as any).os.new(MkFollowingWindow, {
user: this.user
});
},
showFollowers() {
(this as any).os.new(MkFollowersWindow, {
user: this.user
});
},
}
});
</script>
@ -118,7 +143,6 @@ root(isDark)
width 100%
padding 0 0 8px 154px
color #5e6367
font-family '游ゴシック', 'YuGothic', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'Meiryo', 'メイリオ', sans-serif
> .name
display block
@ -127,15 +151,15 @@ root(isDark)
font-weight bold
font-size 1.8em
> .username
> .location
display inline-block
margin 0 16px 0 0
line-height 20px
opacity 0.8
> div
> *
display inline-block
margin 0 16px 0 0
line-height 20px
opacity 0.8
> i
margin-right 4px
> i
margin-right 4px
> .avatar
display block
@ -151,6 +175,32 @@ root(isDark)
padding 16px 16px 16px 154px
color isDark ? #c5ced6 : #555
> .status
margin-top 16px
padding-top 16px
border-top solid 1px rgba(#000, isDark ? 0.2 : 0.1)
font-size 80%
> *
display inline-block
padding-right 16px
margin-right 16px
&:not(:last-child)
border-right solid 1px rgba(#000, isDark ? 0.2 : 0.1)
&.clickable
cursor pointer
&:hover
color isDark ? #fff : #000
> b
margin-right 4px
font-size 1rem
font-weight bold
color $theme-color
.header[data-darkmode]
root(true)