wip

src/web/app/desktop/views/components/index.ts

@@ -26,6 +26,7 @@ import postDetail from './post-detail.vue';
 import settings from './settings.vue';
 import calendar from './calendar.vue';
 import activity from './activity.vue';
+import friendsMaker from './friends-maker.vue';
 import wNav from './widgets/nav.vue';
 import wCalendar from './widgets/calendar.vue';
 import wPhotoStream from './widgets/photo-stream.vue';
@@ -74,6 +75,7 @@ Vue.component('mk-post-detail', postDetail);
 Vue.component('mk-settings', settings);
 Vue.component('mk-calendar', calendar);
 Vue.component('mk-activity', activity);
+Vue.component('mk-friends-maker', friendsMaker);
 Vue.component('mkw-nav', wNav);
 Vue.component('mkw-calendar', wCalendar);
 Vue.component('mkw-photo-stream', wPhotoStream);

src/web/app/mobile/views/components/friends-maker.vue

@@ -2,9 +2,7 @@
 <div class="mk-friends-maker">
 	<p class="title">気になるユーザーをフォロー:</p>
 	<div class="users" v-if="!fetching && users.length > 0">
-		<template each={ users }>
-			<mk-user-card user={ this } />
-		</template>
+		<mk-user-card v-for="user in users" :key="user.id" :user="user"/>
 	</div>
 	<p class="empty" v-if="!fetching && users.length == 0">おすすめのユーザーは見つかりませんでした。</p>
 	<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%読み込んでいます<mk-ellipsis/></p>
@@ -47,6 +45,9 @@ export default Vue.extend({
 				this.page++;
 			}
 			this.fetch();
+		},
+		close() {
+			this.$destroy();
 		}
 	}
 });

src/web/app/mobile/views/components/index.ts

@@ -12,6 +12,7 @@ import postCard from './post-card.vue';
 import userCard from './user-card.vue';
 import postDetail from './post-detail.vue';
 import followButton from './follow-button.vue';
+import friendsMaker from './friends-maker.vue';
 
 Vue.component('mk-ui', ui);
 Vue.component('mk-home', home);
@@ -25,3 +26,4 @@ Vue.component('mk-post-card', postCard);
 Vue.component('mk-user-card', userCard);
 Vue.component('mk-post-detail', postDetail);
 Vue.component('mk-follow-button', followButton);
+Vue.component('mk-friends-maker', friendsMaker);

src/web/app/mobile/views/components/posts.vue

@@ -1,6 +1,7 @@
 <template>
 <div class="mk-posts">
 	<slot name="head"></slot>
+	<slot></slot>
 	<template v-for="(post, i) in _posts">
 		<x-post :post="post" :key="post.id"/>
 		<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
@@ -91,6 +92,9 @@ export default Vue.extend({
 		border-bottom-left-radius 4px
 		border-bottom-right-radius 4px
 
+		&:empty
+			display none
+
 		> button
 			margin 0
 			padding 16px

src/web/app/mobile/views/components/timeline.vue

@@ -1,7 +1,7 @@
 <template>
 <div class="mk-timeline">
 	<mk-friends-maker v-if="alone"/>
-	<mk-posts ref="timeline" :posts="posts">
+	<mk-posts :posts="posts">
 		<div class="init" v-if="fetching">
 			%fa:spinner .pulse%%i18n:common.loading%
 		</div>
@@ -9,7 +9,7 @@
 			%fa:R comments%
 			%i18n:mobile.tags.mk-home-timeline.empty-timeline%
 		</div>
-		<button @click="more" :disabled="fetching" slot="tail">
+		<button v-if="!fetching && posts.length != 0" @click="more" :disabled="fetching" slot="tail">
 			<span v-if="!fetching">%i18n:mobile.tags.mk-timeline.load-more%</span>
 			<span v-if="fetching">%i18n:common.loading%<mk-ellipsis/></span>
 		</button>
@@ -88,3 +88,8 @@ export default Vue.extend({
 	}
 });
 </script>
+
+<style lang="stylus" scoped>
+.mk-friends-maker
+	margin-bottom 8px
+</style>