整理した

3 files changed, 101 insertions, 0 deletions

diff --git a/src/client/app/mobile/views/widgets/activity.vue b/src/client/app/mobile/views/widgets/activity.vue
new file mode 100644
index 0000000000..48dcafb3ed
--- /dev/null
+++ b/src/client/app/mobile/views/widgets/activity.vue
@@ -0,0 +1,32 @@
+<template>
+<div class="mkw-activity">
+	<mk-widget-container :show-header="!props.compact">
+		<template slot="header">%fa:chart-bar%アクティビティ</template>
+		<div :class="$style.body">
+			<mk-activity :user="os.i"/>
+		</div>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+
+export default define({
+	name: 'activity',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	methods: {
+		func() {
+			this.props.compact = !this.props.compact;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.body
+	padding 8px
+</style>
diff --git a/src/client/app/mobile/views/widgets/index.ts b/src/client/app/mobile/views/widgets/index.ts
new file mode 100644
index 0000000000..4de912b64c
--- /dev/null
+++ b/src/client/app/mobile/views/widgets/index.ts
@@ -0,0 +1,7 @@
+import Vue from 'vue';
+
+import wActivity from './activity.vue';
+import wProfile from './profile.vue';
+
+Vue.component('mkw-activity', wActivity);
+Vue.component('mkw-profile', wProfile);
diff --git a/src/client/app/mobile/views/widgets/profile.vue b/src/client/app/mobile/views/widgets/profile.vue
new file mode 100644
index 0000000000..f1d283e45a
--- /dev/null
+++ b/src/client/app/mobile/views/widgets/profile.vue
@@ -0,0 +1,62 @@
+<template>
+<div class="mkw-profile">
+	<mk-widget-container>
+		<div :class="$style.banner"
+			:style="os.i.bannerUrl ? `background-image: url(${os.i.bannerUrl}?thumbnail&size=256)` : ''"
+		></div>
+		<img :class="$style.avatar"
+			:src="`${os.i.avatarUrl}?thumbnail&size=96`"
+			alt="avatar"
+		/>
+		<router-link :class="$style.name" :to="`/@${os.i.username}`">{{ os.i.name }}</router-link>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../../common/define-widget';
+export default define({
+	name: 'profile'
+});
+</script>
+
+<style lang="stylus" module>
+.banner
+	height 100px
+	background-color #f5f5f5
+	background-size cover
+	background-position center
+	cursor pointer
+
+.banner:before
+	content ""
+	display block
+	width 100%
+	height 100%
+	background rgba(0, 0, 0, 0.5)
+
+.avatar
+	display block
+	position absolute
+	width 58px
+	height 58px
+	margin 0
+	vertical-align bottom
+	top ((100px - 58px) / 2)
+	left ((100px - 58px) / 2)
+	border none
+	border-radius 100%
+	box-shadow 0 0 16px rgba(0, 0, 0, 0.5)
+
+.name
+	display block
+	position absolute
+	top 0
+	left 92px
+	margin 0
+	line-height 100px
+	color #fff
+	font-weight bold
+	text-shadow 0 0 8px rgba(0, 0, 0, 0.5)
+
+</style>