コンポーネント整理
This commit is contained in:
syuilo
parent
aeca115a37
commit
963b0db3d3
10 changed files with 43 additions and 450 deletions
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<div class="root followers-you-know">
|
||||
<p class="initializing" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
|
||||
<div v-if="!fetching && users.length > 0">
|
||||
<a v-for="user in users" :key="user.id" :href="user | userPage">
|
||||
<img :src="user.avatarUrl" :alt="user | userName"/>
|
||||
</a>
|
||||
</div>
|
||||
<p class="empty" v-if="!fetching && users.length == 0">{{ $t('no-users') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../../i18n';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/pages/user/home.followers-you-know.vue'),
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
users: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.api('users/followers', {
|
||||
userId: this.user.id,
|
||||
iknow: true,
|
||||
limit: 30
|
||||
}).then(res => {
|
||||
this.fetching = false;
|
||||
this.users = res.users;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.followers-you-know
|
||||
|
||||
> div
|
||||
padding 4px
|
||||
|
||||
> a
|
||||
display inline-block
|
||||
margin 4px
|
||||
|
||||
> img
|
||||
width 48px
|
||||
height 48px
|
||||
vertical-align bottom
|
||||
border-radius 100%
|
||||
|
||||
> .initializing
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color var(--text)
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<template>
|
||||
<div class="root friends">
|
||||
<p class="fetching" v-if="fetching"><fa icon="spinner" pulse fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
|
||||
<div 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('no-users') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import i18n from '../../../../i18n';
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/pages/user/home.friends.vue'),
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
fetching: true,
|
||||
users: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.api('users/get_frequently_replied_users', {
|
||||
userId: this.user.id
|
||||
}).then(res => {
|
||||
this.users = res.map(x => x.user);
|
||||
this.fetching = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.friends
|
||||
> div
|
||||
overflow-x scroll
|
||||
-webkit-overflow-scrolling touch
|
||||
white-space nowrap
|
||||
padding 8px
|
||||
|
||||
> .mk-user-card
|
||||
&:not(:last-child)
|
||||
margin-right 8px
|
||||
|
||||
> .fetching
|
||||
> .empty
|
||||
margin 0
|
||||
padding 16px
|
||||
text-align center
|
||||
color var(--text)
|
||||
|
||||
> i
|
||||
margin-right 4px
|
||||
|
||||
</style>
|
||||
|
|
@ -1,36 +1,26 @@
|
|||
<template>
|
||||
<div class="root home">
|
||||
<mk-note-detail v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
|
||||
<section class="recent-notes">
|
||||
<h2><fa :icon="['far', 'comments']"/>{{ $t('recent-notes') }}</h2>
|
||||
<div class="wojmldye">
|
||||
<mk-note-detail class="note" v-for="n in user.pinnedNotes" :key="n.id" :note="n" :compact="true"/>
|
||||
<ui-container :body-togglable="true">
|
||||
<template #header><fa :icon="['far', 'comments']"/>{{ $t('recent-notes') }}</template>
|
||||
<div>
|
||||
<x-notes :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="images">
|
||||
<h2><fa icon="image"/>{{ $t('images') }}</h2>
|
||||
</ui-container>
|
||||
<ui-container :body-togglable="true">
|
||||
<template #header><fa icon="image"/>{{ $t('images') }}</template>
|
||||
<div>
|
||||
<x-photos :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="activity">
|
||||
<h2><fa icon="chart-bar"/>{{ $t('activity') }}</h2>
|
||||
<div>
|
||||
</ui-container>
|
||||
<ui-container :body-togglable="true">
|
||||
<template #header><fa icon="chart-bar"/>{{ $t('activity') }}</template>
|
||||
<div style="padding:8px;">
|
||||
<x-activity :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="frequently-replied-users">
|
||||
<h2><fa icon="users"/>{{ $t('frequently-replied-users') }}</h2>
|
||||
<div>
|
||||
<x-friends :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="followers-you-know" v-if="$store.getters.isSignedIn && $store.state.i.id !== user.id">
|
||||
<h2><fa icon="users"/>{{ $t('followers-you-know') }}</h2>
|
||||
<div>
|
||||
<x-followers-you-know :user="user"/>
|
||||
</div>
|
||||
</section>
|
||||
</ui-container>
|
||||
<mk-user-list :make-promise="makeFrequentlyRepliedUsersPromise" :icon-only="true"><fa icon="users"/> {{ $t('frequently-replied-users') }}</mk-user-list>
|
||||
<mk-user-list v-if="$store.getters.isSignedIn && $store.state.i.id !== user.id" :make-promise="makeFollowersYouKnowPromise" :icon-only="true"><fa icon="users"/> {{ $t('followers-you-know') }}</mk-user-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -39,66 +29,36 @@ import Vue from 'vue';
|
|||
import i18n from '../../../../i18n';
|
||||
import XNotes from './home.notes.vue';
|
||||
import XPhotos from './home.photos.vue';
|
||||
import XFriends from './home.friends.vue';
|
||||
import XFollowersYouKnow from './home.followers-you-know.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('mobile/views/pages/user/home.vue'),
|
||||
components: {
|
||||
XNotes,
|
||||
XPhotos,
|
||||
XFriends,
|
||||
XFollowersYouKnow,
|
||||
XActivity: () => import('../../../../common/views/components/activity.vue').then(m => m.default)
|
||||
},
|
||||
props: ['user']
|
||||
props: ['user'],
|
||||
data() {
|
||||
return {
|
||||
makeFrequentlyRepliedUsersPromise: () => this.$root.api('users/get_frequently_replied_users', {
|
||||
userId: this.user.id
|
||||
}).then(res => res.map(x => x.user)),
|
||||
makeFollowersYouKnowPromise: () => this.$root.api('users/followers', {
|
||||
userId: this.user.id,
|
||||
iknow: true,
|
||||
limit: 30
|
||||
}).then(res => res.users),
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.root.home
|
||||
margin 0 auto
|
||||
|
||||
> .mk-note-detail
|
||||
.wojmldye
|
||||
> .note
|
||||
margin 0 0 8px 0
|
||||
|
||||
@media (min-width 500px)
|
||||
margin 0 0 16px 0
|
||||
|
||||
> section
|
||||
background var(--face)
|
||||
border-radius 8px
|
||||
box-shadow 0 4px 16px rgba(#000, 0.1)
|
||||
|
||||
&:not(:last-child)
|
||||
margin-bottom 8px
|
||||
|
||||
@media (min-width 500px)
|
||||
margin-bottom 16px
|
||||
|
||||
> h2
|
||||
margin 0
|
||||
padding 8px 10px
|
||||
font-size 15px
|
||||
font-weight normal
|
||||
color var(--text)
|
||||
background var(--faceHeader)
|
||||
border-radius 8px 8px 0 0
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 10px 16px
|
||||
|
||||
> [data-icon]
|
||||
margin-right 6px
|
||||
|
||||
> .activity
|
||||
> div
|
||||
padding 8px
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 16px
|
||||
text-align center
|
||||
color var(--text)
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue