誰もフォローしていない状態でホームTLを表示したときにexploreページへ誘導するように

This commit is contained in:
syuilo 2019-02-18 04:45:16 +09:00
parent 3bdd8a2d90
commit a766a57af9
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
8 changed files with 40 additions and 321 deletions

View file

@ -66,6 +66,10 @@ common:
following: "フォロー中" following: "フォロー中"
followers: "フォロワー" followers: "フォロワー"
empty-timeline-info:
follow-users-to-make-your-timeline: "ユーザーをフォローすると投稿がタイムラインに表示されます。"
explore: "ユーザーを探索する"
weekday-short: weekday-short:
sunday: "日" sunday: "日"
monday: "月" monday: "月"
@ -776,13 +780,6 @@ desktop/views/components/following-window.vue:
desktop/views/components/following.vue: desktop/views/components/following.vue:
empty: "フォロー中のユーザーはいないようです。" empty: "フォロー中のユーザーはいないようです。"
desktop/views/components/friends-maker.vue:
title: "気になるユーザーをフォロー:"
empty: "おすすめのユーザーは見つかりませんでした。"
fetching: "読み込んでいます"
refresh: "もっと見る"
close: "閉じる"
desktop/views/components/game-window.vue: desktop/views/components/game-window.vue:
game: "リバーシ" game: "リバーシ"
@ -1591,13 +1588,6 @@ common/views/components/follow-button.vue:
follow-processing: "フォロー処理中" follow-processing: "フォロー処理中"
follow-request: "フォロー申請" follow-request: "フォロー申請"
mobile/views/components/friends-maker.vue:
title: "気になるユーザーをフォロー"
empty: "おすすめのユーザーは見つかりませんでした。"
fetching: "読み込んでいます"
refresh: "もっと見る"
close: "閉じる"
mobile/views/components/note.vue: mobile/views/components/note.vue:
private: "この投稿は非公開です" private: "この投稿は非公開です"
deleted: "この投稿は削除されました" deleted: "この投稿は削除されました"

View file

@ -1,166 +0,0 @@
<template>
<div class="mk-friends-maker">
<p class="title">{{ $t('title') }}</p>
<div class="users" v-if="!fetching && users.length > 0">
<div class="user" v-for="user in users" :key="user.id">
<mk-avatar class="avatar" :user="user" target="_blank"/>
<div class="body">
<router-link class="name" :to="user | userPage" v-user-preview="user.id">
<mk-user-name :user="user"/>
</router-link>
<p class="username">@{{ user | acct }}</p>
</div>
</div>
</div>
<p class="empty" v-if="!fetching && users.length == 0">{{ $t('empty') }}</p>
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('fetching') }}<mk-ellipsis/></p>
<a class="refresh" @click="refresh">{{ $t('refresh') }}</a>
<button class="close" @click="destroyDom()" :title="$t('title')"><fa icon="times"/></button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('desktop/views/components/friends-maker.vue'),
data() {
return {
users: [],
fetching: true,
limit: 6,
page: 0
};
},
mounted() {
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
this.users = [];
this.$root.api('users/recommendation', {
limit: this.limit,
offset: this.limit * this.page
}).then(users => {
this.users = users;
this.fetching = false;
});
},
refresh() {
if (this.users.length < this.limit) {
this.page = 0;
} else {
this.page++;
}
this.fetch();
}
}
});
</script>
<style lang="stylus" scoped>
.mk-friends-maker
padding 24px
> .title
margin 0 0 12px 0
font-size 1em
font-weight bold
color #888
> .users
&:after
content ""
display block
clear both
> .user
padding 16px
width 238px
float left
&:after
content ""
display block
clear both
> .avatar
display block
float left
margin 0 12px 0 0
width 42px
height 42px
border-radius 8px
> .body
float left
width calc(100% - 54px)
> .name
margin 0
font-size 16px
line-height 24px
color #555
> .username
margin 0
font-size 15px
line-height 16px
color #ccc
> .mk-follow-button
position absolute
top 16px
right 16px
> .empty
margin 0
padding 16px
text-align center
color var(--text)
> .fetching
margin 0
padding 16px
text-align center
color var(--text)
> [data-icon]
margin-right 4px
> .refresh
display block
margin 0 8px 0 0
text-align right
font-size 0.9em
color #999
> .close
cursor pointer
display block
position absolute
top 6px
right 6px
z-index 1
margin 0
padding 0
font-size 1.2em
color #999
border none
outline none
background transparent
&:hover
color #555
&:active
color #222
> [data-icon]
box-sizing initial
padding 14px
</style>

View file

@ -15,7 +15,6 @@ import notePreview from './note-preview.vue';
import noteDetail from './note-detail.vue'; import noteDetail from './note-detail.vue';
import calendar from './calendar.vue'; import calendar from './calendar.vue';
import activity from './activity.vue'; import activity from './activity.vue';
import friendsMaker from './friends-maker.vue';
import userCard from './user-card.vue'; import userCard from './user-card.vue';
import userListTimeline from './user-list-timeline.vue'; import userListTimeline from './user-list-timeline.vue';
import uiContainer from './ui-container.vue'; import uiContainer from './ui-container.vue';
@ -35,7 +34,6 @@ Vue.component('mk-note-preview', notePreview);
Vue.component('mk-note-detail', noteDetail); Vue.component('mk-note-detail', noteDetail);
Vue.component('mk-calendar', calendar); Vue.component('mk-calendar', calendar);
Vue.component('mk-activity', activity); Vue.component('mk-activity', activity);
Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-user-card', userCard); Vue.component('mk-user-card', userCard);
Vue.component('mk-user-list-timeline', userListTimeline); Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('ui-container', uiContainer); Vue.component('ui-container', uiContainer);

View file

@ -1,6 +1,9 @@
<template> <template>
<div class="mk-timeline-core"> <div class="ibpylqas">
<mk-friends-maker v-if="src == 'home' && alone"/> <div v-if="src == 'home' && alone" class="explore">
<p>{{ $t('@.empty-timeline-info.follow-users-to-make-your-timeline') }}</p>
<router-link to="/explore">{{ $t('@.empty-timeline-info.explore') }}</router-link>
</div>
<mk-notes ref="timeline" :more="existMore ? more : null"> <mk-notes ref="timeline" :more="existMore ? more : null">
<p :class="$style.empty" slot="empty"> <p :class="$style.empty" slot="empty">
@ -171,9 +174,16 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.mk-timeline-core .ibpylqas
> .mk-friends-maker > .explore
border-bottom solid var(--lineWidth) #eee padding 16px
text-align center
color var(--text)
border-bottom solid var(--lineWidth) var(--faceDivider)
font-size 14px
> p
margin 0 0 8px 0
</style> </style>

View file

@ -1,130 +0,0 @@
<template>
<div class="mk-friends-maker">
<p class="title">{{ $t('title') }}:</p>
<div class="users" v-if="!fetching && users.length > 0">
<mk-user-card v-for="user in users" :key="user.id" :user="user"/>
</div>
<p class="empty" v-if="!fetching && users.length == 0">{{ $t('empty') }}</p>
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('fetching') }}<mk-ellipsis/></p>
<a class="refresh" @click="refresh">{{ $t('refresh') }}</a>
<button class="close" @click="close" :title="$t('title')"><fa icon="times"/></button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('mobile/views/components/friends-maker.vue'),
data() {
return {
users: [],
fetching: true,
limit: 6,
page: 0
};
},
mounted() {
this.fetch();
},
methods: {
fetch() {
this.fetching = true;
this.users = [];
this.$root.api('users/recommendation', {
limit: this.limit,
offset: this.limit * this.page
}).then(users => {
this.users = users;
this.fetching = false;
});
},
refresh() {
if (this.users.length < this.limit) {
this.page = 0;
} else {
this.page++;
}
this.fetch();
},
close() {
this.destroyDom();
}
}
});
</script>
<style lang="stylus" scoped>
.mk-friends-maker
background #fff
border-radius 8px
box-shadow 0 0 0 1px rgba(#000, 0.2)
> .title
margin 0
padding 8px 16px
font-size 1em
font-weight bold
color #888
> .users
overflow-x scroll
-webkit-overflow-scrolling touch
white-space nowrap
padding 16px
background #eee
> .mk-user-card
&:not(:last-child)
margin-right 16px
> .empty
margin 0
padding 16px
text-align center
color var(--text)
> .fetching
margin 0
padding 16px
text-align center
color var(--text)
> [data-icon]
margin-right 4px
> .refresh
display block
margin 0
padding 8px 16px
text-align right
font-size 0.9em
color #999
> .close
cursor pointer
display block
position absolute
top 0
right 0
z-index 1
margin 0
padding 0
font-size 1.2em
color #999
border none
outline none
background transparent
&:hover
color #555
&:active
color #222
> [data-icon]
box-sizing initial
padding 10px
</style>

View file

@ -9,7 +9,6 @@ import subNoteContent from './sub-note-content.vue';
import noteCard from './note-card.vue'; import noteCard from './note-card.vue';
import userCard from './user-card.vue'; import userCard from './user-card.vue';
import noteDetail from './note-detail.vue'; import noteDetail from './note-detail.vue';
import friendsMaker from './friends-maker.vue';
import notification from './notification.vue'; import notification from './notification.vue';
import notifications from './notifications.vue'; import notifications from './notifications.vue';
import notificationPreview from './notification-preview.vue'; import notificationPreview from './notification-preview.vue';
@ -28,7 +27,6 @@ Vue.component('mk-sub-note-content', subNoteContent);
Vue.component('mk-note-card', noteCard); Vue.component('mk-note-card', noteCard);
Vue.component('mk-user-card', userCard); Vue.component('mk-user-card', userCard);
Vue.component('mk-note-detail', noteDetail); Vue.component('mk-note-detail', noteDetail);
Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-notification', notification); Vue.component('mk-notification', notification);
Vue.component('mk-notifications', notifications); Vue.component('mk-notifications', notifications);
Vue.component('mk-notification-preview', notificationPreview); Vue.component('mk-notification-preview', notificationPreview);

View file

@ -83,4 +83,7 @@ export default Vue.extend({
font-size 15px font-size 15px
color var(--faceTextButton) color var(--faceTextButton)
> div
color var(--text)
</style> </style>

View file

@ -1,6 +1,11 @@
<template> <template>
<div> <div>
<mk-friends-maker v-if="src == 'home' && alone" style="margin-bottom:8px"/> <ui-container v-if="src == 'home' && alone" :show-header="false" style="margin-bottom:8px;">
<div class="zrzngnxs">
<p>{{ $t('@.empty-timeline-info.follow-users-to-make-your-timeline') }}</p>
<router-link to="/explore">{{ $t('@.empty-timeline-info.explore') }}</router-link>
</div>
</ui-container>
<mk-notes ref="timeline" :more="existMore ? more : null"> <mk-notes ref="timeline" :more="existMore ? more : null">
<div slot="empty"> <div slot="empty">
@ -18,7 +23,7 @@ const fetchLimit = 10;
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/pages/home.timeline.vue'), i18n: i18n('mobile/views/pages/home.timeline.vue'),
props: { props: {
src: { src: {
type: String, type: String,
@ -172,3 +177,14 @@ export default Vue.extend({
} }
}); });
</script> </script>
<style lang="stylus" scoped>
.zrzngnxs
padding 16px
text-align center
font-size 14px
> p
margin 0 0 8px 0
</style>