rudeshark.net/src/client/app/mobile/views/pages/user.vue

296 lines
6.4 KiB
Vue
Raw Normal View History

2018-02-15 10:33:34 +01:00
<template>
2018-02-22 09:32:58 +01:00
<mk-ui>
2018-07-24 16:43:14 +02:00
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
2018-05-23 22:28:46 +02:00
<main v-if="!fetching" :data-darkmode="$store.state.device.darkmode">
2018-04-19 11:54:34 +02:00
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
2018-04-17 15:25:51 +02:00
<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>
2018-02-15 10:33:34 +01:00
<header>
2018-05-07 10:05:05 +02:00
<div class="banner" :style="style"></div>
2018-02-15 10:33:34 +01:00
<div class="body">
<div class="top">
<a class="avatar">
<img :src="user.avatarUrl" alt="avatar"/>
2018-02-15 10:33:34 +01:00
</a>
2018-05-27 06:49:09 +02:00
<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
2018-02-15 10:33:34 +01:00
</div>
<div class="title">
2018-04-09 11:52:29 +02:00
<h1>{{ user | userName }}</h1>
2018-05-18 08:42:42 +02:00
<span class="username"><mk-acct :user="user"/></span>
2018-04-14 18:04:40 +02:00
<span class="followed" v-if="user.isFollowed">%i18n:@follows-you%</span>
2018-02-15 10:33:34 +01:00
</div>
2018-06-20 12:55:34 +02:00
<div class="description">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div>
2018-02-15 10:33:34 +01:00
<div class="info">
2018-04-07 20:58:11 +02:00
<p class="location" v-if="user.host === null && user.profile.location">
%fa:map-marker%{{ user.profile.location }}
2018-02-15 10:33:34 +01:00
</p>
2018-04-07 20:58:11 +02:00
<p class="birthday" v-if="user.host === null && user.profile.birthday">
%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }})
2018-02-15 10:33:34 +01:00
</p>
</div>
<div class="status">
2018-02-21 13:08:03 +01:00
<a>
2018-04-07 19:30:37 +02:00
<b>{{ user.notesCount | number }}</b>
2018-04-14 18:04:40 +02:00
<i>%i18n:@notes%</i>
2018-02-15 10:33:34 +01:00
</a>
2018-04-09 12:23:52 +02:00
<a :href="user | userPage('following')">
2018-03-29 07:48:47 +02:00
<b>{{ user.followingCount | number }}</b>
2018-04-14 18:04:40 +02:00
<i>%i18n:@following%</i>
2018-02-15 10:33:34 +01:00
</a>
2018-04-09 12:23:52 +02:00
<a :href="user | userPage('followers')">
2018-03-29 07:48:47 +02:00
<b>{{ user.followersCount | number }}</b>
2018-04-14 18:04:40 +02:00
<i>%i18n:@followers%</i>
2018-02-15 10:33:34 +01:00
</a>
</div>
</div>
</header>
<nav>
<div class="nav-container">
2018-04-27 14:33:18 +02:00
<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>
2018-02-15 10:33:34 +01:00
<div class="body">
2018-02-22 09:32:58 +01:00
<x-home v-if="page == 'home'" :user="user"/>
2018-04-16 08:13:31 +02:00
<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"/>
2018-02-15 10:33:34 +01:00
</div>
2018-02-22 09:32:58 +01:00
</main>
2018-02-15 10:33:34 +01:00
</mk-ui>
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-22 14:03:44 +01:00
import * as age from 's-age';
2018-07-07 12:19:00 +02:00
import parseAcct from '../../../../../misc/acct/parse';
2018-02-16 05:11:54 +01:00
import Progress from '../../../common/scripts/loading';
2018-02-22 09:32:58 +01:00
import XHome from './user/home.vue';
2018-08-07 06:25:50 +02:00
import * as config from '../../../config';
2018-02-15 10:33:34 +01:00
export default Vue.extend({
2018-02-22 09:32:58 +01:00
components: {
XHome
},
2018-02-15 10:33:34 +01:00
data() {
return {
fetching: true,
2018-02-23 00:07:30 +01:00
user: null,
2018-04-09 11:52:29 +02:00
page: 'home'
2018-02-15 10:33:34 +01:00
};
},
computed: {
age(): number {
2018-04-07 20:58:11 +02:00
return age(this.user.profile.birthday);
2018-05-07 10:05:05 +02:00
},
style(): any {
if (this.user.bannerUrl == null) return {};
return {
backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
2018-05-07 10:05:05 +02:00
backgroundImage: `url(${ this.user.bannerUrl })`
};
2018-02-15 10:33:34 +01:00
}
},
2018-02-22 09:06:19 +01:00
watch: {
$route: 'fetch'
},
2018-02-22 13:23:10 +01:00
created() {
this.fetch();
},
2018-02-22 09:06:19 +01:00
methods: {
fetch() {
Progress.start();
2018-03-27 09:51:12 +02:00
(this as any).api('users/show', parseAcct(this.$route.params.user)).then(user => {
2018-02-22 09:06:19 +01:00
this.user = user;
this.fetching = false;
2018-02-16 05:11:54 +01:00
2018-02-22 09:06:19 +01:00
Progress.done();
2018-08-07 06:25:50 +02:00
document.title = Vue.filter('userName')(this.user) + ' | ' + config.name;
2018-02-22 09:06:19 +01:00
});
}
2018-02-15 10:33:34 +01:00
}
});
</script>
2018-02-22 09:32:58 +01:00
<style lang="stylus" scoped>
2018-03-03 05:47:55 +01:00
@import '~const.styl'
2018-04-27 14:06:28 +02:00
root(isDark)
2018-04-28 03:59:37 +02:00
$bg = isDark ? #22252f : #f7f7f7
2018-04-19 11:54:34 +02:00
> .is-suspended
2018-04-15 11:38:40 +02:00
> .is-remote
2018-04-19 11:54:34 +02:00
&.is-suspended
color #570808
background #ffdbdb
&.is-remote
color #573c08
background #fff0db
2018-04-15 11:38:40 +02:00
> p
margin 0 auto
2018-04-19 19:09:53 +02:00
padding 14px
max-width 600px
2018-04-18 09:25:33 +02:00
font-size 14px
2018-04-15 11:38:40 +02:00
> a
font-weight bold
2018-04-16 08:17:20 +02:00
@media (max-width 500px)
2018-04-19 19:09:53 +02:00
padding 12px
2018-04-16 08:17:20 +02:00
font-size 12px
2018-02-15 10:33:34 +01:00
> header
2018-04-28 03:59:37 +02:00
background $bg
2018-02-15 10:33:34 +01:00
> .banner
padding-bottom 33.3%
background-color isDark ? #5f7273 : #cacaca
2018-02-15 10:33:34 +01:00
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%
2018-04-28 03:59:37 +02:00
background $bg
border 3px solid $bg
2018-02-15 10:33:34 +01:00
border-radius 6px
@media (min-width 500px)
left -4px
bottom -4px
2018-04-28 03:59:37 +02:00
border 4px solid $bg
2018-02-15 10:33:34 +01:00
border-radius 12px
2018-02-16 19:01:00 +01:00
> .mk-follow-button
2018-02-15 10:33:34 +01:00
float right
> .title
margin 8px 0
> h1
margin 0
line-height 22px
font-size 20px
2018-04-27 14:06:28 +02:00
color isDark ? #fff : #757c82
2018-02-15 10:33:34 +01:00
> .username
display inline-block
line-height 20px
font-size 16px
font-weight bold
2018-04-27 14:06:28 +02:00
color isDark ? #657786 : #969ea5
2018-02-15 10:33:34 +01:00
> .followed
margin-left 8px
padding 2px 4px
font-size 12px
color isDark ? #657786 : #fff
background isDark ? #f8f8f8 : #a7bec7
2018-02-15 10:33:34 +01:00
border-radius 4px
> .description
margin 8px 0
2018-04-27 14:33:18 +02:00
color isDark ? #fff : #757c82
2018-02-15 10:33:34 +01:00
> .info
margin 8px 0
> p
display inline
margin 0 16px 0 0
2018-04-27 14:33:18 +02:00
color isDark ? #a9b9c1 : #90989c
2018-02-15 10:33:34 +01:00
> i
margin-right 4px
> .status
> a
2018-04-27 14:06:28 +02:00
color isDark ? #657786 : #818a92
2018-02-15 10:33:34 +01:00
&:not(:last-child)
margin-right 16px
> b
margin-right 4px
font-size 16px
2018-04-27 14:06:28 +02:00
color isDark ? #fff : #787e86
2018-02-15 10:33:34 +01:00
> i
font-size 14px
> nav
2018-04-09 19:04:30 +02:00
position -webkit-sticky
position sticky
2018-04-27 14:06:28 +02:00
top 47px
box-shadow 0 4px 4px isDark ? rgba(#000, 0.3) : rgba(#000, 0.07)
2018-04-28 03:59:37 +02:00
background-color $bg
z-index 1
2018-04-09 19:04:30 +02:00
> .nav-container
2018-02-15 10:33:34 +01:00
display flex
justify-content center
margin 0 auto
max-width 600px
> a
display block
flex 1 1
text-align center
2018-04-28 03:59:37 +02:00
line-height 48px
font-size 12px
2018-02-15 10:33:34 +01:00
text-decoration none
2018-04-27 14:06:28 +02:00
color isDark ? #657786 : #9ca1a5
2018-02-15 10:33:34 +01:00
border-bottom solid 2px transparent
2018-04-28 03:59:37 +02:00
@media (min-width 400px)
line-height 52px
font-size 14px
2018-04-26 07:38:37 +02:00
&[data-active]
2018-02-15 10:33:34 +01:00
font-weight bold
color $theme-color
border-color $theme-color
> .body
2018-04-27 14:06:28 +02:00
max-width 680px
margin 0 auto
2018-02-15 10:33:34 +01:00
padding 8px
@media (min-width 500px)
padding 16px
2018-04-27 14:06:28 +02:00
@media (min-width 600px)
padding 32px
main[data-darkmode]
root(true)
main:not([data-darkmode])
root(false)
2018-02-15 10:33:34 +01:00
</style>