Skip to content
Snippets Groups Projects
Unverified Commit a766a57a authored by syuilo's avatar syuilo
Browse files

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

parent 3bdd8a2d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 40 additions and 321 deletions
locales/ja-JP.yml
+ 4
− 14
View file @ a766a57a
......@@ -66,6 +66,10 @@ common:
following: "フォロー中"
followers: "フォロワー"
empty-timeline-info:
follow-users-to-make-your-timeline: "ユーザーをフォローすると投稿がタイムラインに表示されます。"
explore: "ユーザーを探索する"
weekday-short:
sunday: "日"
monday: "月"
......@@ -776,13 +780,6 @@ desktop/views/components/following-window.vue:
desktop/views/components/following.vue:
empty: "フォロー中のユーザーはいないようです。"
desktop/views/components/friends-maker.vue:
title: "気になるユーザーをフォロー:"
empty: "おすすめのユーザーは見つかりませんでした。"
fetching: "読み込んでいます"
refresh: "もっと見る"
close: "閉じる"
desktop/views/components/game-window.vue:
game: "リバーシ"
......@@ -1591,13 +1588,6 @@ common/views/components/follow-button.vue:
follow-processing: "フォロー処理中"
follow-request: "フォロー申請"
mobile/views/components/friends-maker.vue:
title: "気になるユーザーをフォロー"
empty: "おすすめのユーザーは見つかりませんでした。"
fetching: "読み込んでいます"
refresh: "もっと見る"
close: "閉じる"
mobile/views/components/note.vue:
private: "この投稿は非公開です"
deleted: "この投稿は削除されました"
......
src/client/app/desktop/views/components/friends-maker.vue deleted 100644 → 0
+ 0
− 166
View file @ 3bdd8a2d
<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>
src/client/app/desktop/views/components/index.ts
+ 0
− 2
View file @ a766a57a
......@@ -15,7 +15,6 @@ import notePreview from './note-preview.vue';
import noteDetail from './note-detail.vue';
import calendar from './calendar.vue';
import activity from './activity.vue';
import friendsMaker from './friends-maker.vue';
import userCard from './user-card.vue';
import userListTimeline from './user-list-timeline.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-calendar', calendar);
Vue.component('mk-activity', activity);
Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-user-card', userCard);
Vue.component('mk-user-list-timeline', userListTimeline);
Vue.component('ui-container', uiContainer);
src/client/app/desktop/views/home/timeline.core.vue
+ 15
− 5
View file @ a766a57a
<template>
<div class="mk-timeline-core">
<mk-friends-maker v-if="src == 'home' && alone"/>
<div class="ibpylqas">
<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">
<p :class="$style.empty" slot="empty">
......@@ -171,9 +174,16 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-timeline-core
> .mk-friends-maker
border-bottom solid var(--lineWidth) #eee
.ibpylqas
> .explore
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>
......
src/client/app/mobile/views/components/friends-maker.vue deleted 100644 → 0
+ 0
− 130
View file @ 3bdd8a2d
<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>
src/client/app/mobile/views/components/index.ts
+ 0
− 2
View file @ a766a57a
......@@ -9,7 +9,6 @@ import subNoteContent from './sub-note-content.vue';
import noteCard from './note-card.vue';
import userCard from './user-card.vue';
import noteDetail from './note-detail.vue';
import friendsMaker from './friends-maker.vue';
import notification from './notification.vue';
import notifications from './notifications.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-user-card', userCard);
Vue.component('mk-note-detail', noteDetail);
Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-notification', notification);
Vue.component('mk-notifications', notifications);
Vue.component('mk-notification-preview', notificationPreview);
......
src/client/app/mobile/views/components/ui-container.vue
+ 3
− 0
View file @ a766a57a
......@@ -83,4 +83,7 @@ export default Vue.extend({
font-size 15px
color var(--faceTextButton)
> div
color var(--text)
</style>
src/client/app/mobile/views/pages/home.timeline.vue
+ 18
− 2
View file @ a766a57a
<template>
<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">
<div slot="empty">
......@@ -18,7 +23,7 @@ const fetchLimit = 10;
export default Vue.extend({
i18n: i18n('mobile/views/pages/home.timeline.vue'),
props: {
src: {
type: String,
......@@ -172,3 +177,14 @@ export default Vue.extend({
}
});
</script>
<style lang="stylus" scoped>
.zrzngnxs
padding 16px
text-align center
font-size 14px
> p
margin 0 0 8px 0
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment