jormungandr-bite/src/web/app/mobile/views/pages/user.vue

<template>
<mk-ui :func="fn" func-icon="%fa:pencil-alt%">
	<span slot="header">%fa:user% {{user.name}}</span>
	<div v-if="!fetching" :class="$style.user">
		<header>
			<div class="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=1024)` : ''"></div>
			<div class="body">
				<div class="top">
					<a class="avatar">
						<img :src="`${user.avatar_url}?thumbnail&size=200`" alt="avatar"/>
					</a>
					<mk-follow-button v-if="$root.$data.os.isSignedIn && $root.$data.os.i.id != user.id" :user="user"/>
				</div>
				<div class="title">
					<h1>{{ user.name }}</h1>
					<span class="username">@{{ user.username }}</span>
					<span class="followed" v-if="user.is_followed">%i18n:mobile.tags.mk-user.follows-you%</span>
				</div>
				<div class="description">{{ user.description }}</div>
				<div class="info">
					<p class="location" v-if="user.profile.location">
						%fa:map-marker%{{ user.profile.location }}
					</p>
					<p class="birthday" v-if="user.profile.birthday">
						%fa:birthday-cake%{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }}歳)
					</p>
				</div>
				<div class="status">
				  <a>
				    <b>{{ user.posts_count }}</b>
						<i>%i18n:mobile.tags.mk-user.posts%</i>
					</a>
					<a :href="`${user.username}/following`">
						<b>{{ user.following_count }}</b>
						<i>%i18n:mobile.tags.mk-user.following%</i>
					</a>
					<a :href="`${user.username}/followers`">
						<b>{{ user.followers_count }}</b>
						<i>%i18n:mobile.tags.mk-user.followers%</i>
					</a>
				</div>
			</div>
			<nav>
				<a :data-is-active=" page == 'home' " @click="page = 'home'">%i18n:mobile.tags.mk-user.overview%</a>
				<a :data-is-active=" page == 'posts' " @click="page = 'posts'">%i18n:mobile.tags.mk-user.timeline%</a>
				<a :data-is-active=" page == 'media' " @click="page = 'media'">%i18n:mobile.tags.mk-user.media%</a>
			</nav>
		</header>
		<div class="body">
			<mk-user-home v-if="page == 'home'" :user="user"/>
			<mk-user-timeline v-if="page == 'posts'" :user="user"/>
			<mk-user-timeline v-if="page == 'media'" :user="user" with-media/>
		</div>
	</div>
</mk-ui>
</template>

<script lang="ts">
import Vue from 'vue';
const age = require('s-age');

export default Vue.extend({
	props: {
		username: {
			type: String,
			required: true
		},
		page: {
			default: 'home'
		}
	},
	data() {
		return {
			fetching: true,
			user: null
		};
	},
	computed: {
		age(): number {
			return age(this.user.profile.birthday);
		}
	},
	mounted() {
		this.$root.$data.os.api('users/show', {
			username: this.username
		}).then(user => {
			this.fetching = false;
			this.user = user;
			this.$emit('loaded', user);
		});
	}
});
</script>

<style lang="stylus" module>
.user
	> header
		box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)

		> .banner
			padding-bottom 33.3%
			background-color #1b1b1b
			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%
						border 2px solid #313a42
						border-radius 6px

						@media (min-width 500px)
							left -4px
							bottom -4px
							border 4px solid #313a42
							border-radius 12px

				> mk-follow-button
					float right
					height 40px

			> .title
				margin 8px 0

				> h1
					margin 0
					line-height 22px
					font-size 20px
					color #fff

				> .username
					display inline-block
					line-height 20px
					font-size 16px
					font-weight bold
					color #657786

				> .followed
					margin-left 8px
					padding 2px 4px
					font-size 12px
					color #657786
					background #f8f8f8
					border-radius 4px

			> .description
				margin 8px 0
				color #fff

			> .info
				margin 8px 0

				> p
					display inline
					margin 0 16px 0 0
					color #a9b9c1

					> i
						margin-right 4px

			> .status
				> a
					color #657786

					&:not(:last-child)
						margin-right 16px

					> b
						margin-right 4px
						font-size 16px
						color #fff

					> i
						font-size 14px

			> mk-activity-table
				margin 12px 0 0 0

		> nav
			display flex
			justify-content center
			margin 0 auto
			max-width 600px

			> a
				display block
				flex 1 1
				text-align center
				line-height 52px
				font-size 14px
				text-decoration none
				color #657786
				border-bottom solid 2px transparent

				&[data-is-active]
					font-weight bold
					color $theme-color
					border-color $theme-color

	> .body
		padding 8px

		@media (min-width 500px)
			padding 16px

</style>