294 lines
6.4 KiB
Vue
294 lines
6.4 KiB
Vue
<template>
|
|
<mk-ui>
|
|
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
|
|
<main v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
|
|
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
|
|
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
|
|
<header>
|
|
<div class="banner" :style="style"></div>
|
|
<div class="body">
|
|
<div class="top">
|
|
<a class="avatar">
|
|
<img :src="user.avatarUrl" alt="avatar"/>
|
|
</a>
|
|
<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
|
|
</div>
|
|
<div class="title">
|
|
<h1>{{ user | userName }}</h1>
|
|
<span class="username"><mk-acct :user="user"/></span>
|
|
<span class="followed" v-if="user.isFollowed">%i18n:@follows-you%</span>
|
|
</div>
|
|
<div class="description">
|
|
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
|
|
</div>
|
|
<div class="info">
|
|
<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 class="status">
|
|
<a>
|
|
<b>{{ user.notesCount | number }}</b>
|
|
<i>%i18n:@notes%</i>
|
|
</a>
|
|
<a :href="user | userPage('following')">
|
|
<b>{{ user.followingCount | number }}</b>
|
|
<i>%i18n:@following%</i>
|
|
</a>
|
|
<a :href="user | userPage('followers')">
|
|
<b>{{ user.followersCount | number }}</b>
|
|
<i>%i18n:@followers%</i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<nav>
|
|
<div class="nav-container">
|
|
<a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a>
|
|
<a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a>
|
|
<a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a>
|
|
</div>
|
|
</nav>
|
|
<div class="body">
|
|
<x-home v-if="page == 'home'" :user="user"/>
|
|
<mk-user-timeline v-if="page == 'notes'" :user="user" key="tl"/>
|
|
<mk-user-timeline v-if="page == 'media'" :user="user" :with-media="true" key="media"/>
|
|
</div>
|
|
</main>
|
|
</mk-ui>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import * as age from 's-age';
|
|
import parseAcct from '../../../../../misc/acct/parse';
|
|
import Progress from '../../../common/scripts/loading';
|
|
import XHome from './user/home.vue';
|
|
|
|
export default Vue.extend({
|
|
components: {
|
|
XHome
|
|
},
|
|
data() {
|
|
return {
|
|
fetching: true,
|
|
user: null,
|
|
page: 'home'
|
|
};
|
|
},
|
|
computed: {
|
|
age(): number {
|
|
return age(this.user.profile.birthday);
|
|
},
|
|
style(): any {
|
|
if (this.user.bannerUrl == null) return {};
|
|
return {
|
|
backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
|
|
backgroundImage: `url(${ this.user.bannerUrl })`
|
|
};
|
|
}
|
|
},
|
|
watch: {
|
|
$route: 'fetch'
|
|
},
|
|
created() {
|
|
this.fetch();
|
|
},
|
|
methods: {
|
|
fetch() {
|
|
Progress.start();
|
|
|
|
(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
|
|
this.user = user;
|
|
this.fetching = false;
|
|
|
|
Progress.done();
|
|
document.title = Vue.filter('userName')(this.user) + ' | %i18n:common.name%';
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~const.styl'
|
|
|
|
root(isDark)
|
|
$bg = isDark ? #22252f : #f7f7f7
|
|
|
|
> .is-suspended
|
|
> .is-remote
|
|
&.is-suspended
|
|
color #570808
|
|
background #ffdbdb
|
|
|
|
&.is-remote
|
|
color #573c08
|
|
background #fff0db
|
|
|
|
> p
|
|
margin 0 auto
|
|
padding 14px
|
|
max-width 600px
|
|
font-size 14px
|
|
|
|
> a
|
|
font-weight bold
|
|
|
|
@media (max-width 500px)
|
|
padding 12px
|
|
font-size 12px
|
|
|
|
> header
|
|
background $bg
|
|
|
|
> .banner
|
|
padding-bottom 33.3%
|
|
background-color isDark ? #5f7273 : #cacaca
|
|
background-size cover
|
|
background-position center
|
|
|
|
> .body
|
|
padding 12px
|
|
margin 0 auto
|
|
max-width 600px
|
|
|
|
> .top
|
|
&:after
|
|
content ''
|
|
display block
|
|
clear both
|
|
|
|
> .avatar
|
|
display block
|
|
float left
|
|
width 25%
|
|
height 40px
|
|
|
|
> img
|
|
display block
|
|
position absolute
|
|
left -2px
|
|
bottom -2px
|
|
width 100%
|
|
background $bg
|
|
border 3px solid $bg
|
|
border-radius 6px
|
|
|
|
@media (min-width 500px)
|
|
left -4px
|
|
bottom -4px
|
|
border 4px solid $bg
|
|
border-radius 12px
|
|
|
|
> .mk-follow-button
|
|
float right
|
|
|
|
> .title
|
|
margin 8px 0
|
|
|
|
> h1
|
|
margin 0
|
|
line-height 22px
|
|
font-size 20px
|
|
color isDark ? #fff : #757c82
|
|
|
|
> .username
|
|
display inline-block
|
|
line-height 20px
|
|
font-size 16px
|
|
font-weight bold
|
|
color isDark ? #657786 : #969ea5
|
|
|
|
> .followed
|
|
margin-left 8px
|
|
padding 2px 4px
|
|
font-size 12px
|
|
color isDark ? #657786 : #fff
|
|
background isDark ? #f8f8f8 : #a7bec7
|
|
border-radius 4px
|
|
|
|
> .description
|
|
margin 8px 0
|
|
color isDark ? #fff : #757c82
|
|
|
|
> .info
|
|
margin 8px 0
|
|
|
|
> p
|
|
display inline
|
|
margin 0 16px 0 0
|
|
color isDark ? #a9b9c1 : #90989c
|
|
|
|
> i
|
|
margin-right 4px
|
|
|
|
> .status
|
|
> a
|
|
color isDark ? #657786 : #818a92
|
|
|
|
&:not(:last-child)
|
|
margin-right 16px
|
|
|
|
> b
|
|
margin-right 4px
|
|
font-size 16px
|
|
color isDark ? #fff : #787e86
|
|
|
|
> i
|
|
font-size 14px
|
|
|
|
> nav
|
|
position -webkit-sticky
|
|
position sticky
|
|
top 47px
|
|
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
|
|
background-color $bg
|
|
z-index 1
|
|
|
|
> .nav-container
|
|
display flex
|
|
justify-content center
|
|
margin 0 auto
|
|
max-width 600px
|
|
|
|
> a
|
|
display block
|
|
flex 1 1
|
|
text-align center
|
|
line-height 48px
|
|
font-size 12px
|
|
text-decoration none
|
|
color isDark ? #657786 : #9ca1a5
|
|
border-bottom solid 2px transparent
|
|
|
|
@media (min-width 400px)
|
|
line-height 52px
|
|
font-size 14px
|
|
|
|
&[data-active]
|
|
font-weight bold
|
|
color $theme-color
|
|
border-color $theme-color
|
|
|
|
> .body
|
|
max-width 680px
|
|
margin 0 auto
|
|
padding 8px
|
|
|
|
@media (min-width 500px)
|
|
padding 16px
|
|
|
|
@media (min-width 600px)
|
|
padding 32px
|
|
|
|
main[data-darkmode]
|
|
root(true)
|
|
|
|
main:not([data-darkmode])
|
|
root(false)
|
|
|
|
</style>
|