misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
syuilo 2018-02-22 17:32:58 +09:00
parent 463a38d606
commit 47efc83f16
10 changed files with 133 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/web/app/mobile/views/pages/user.vue
View file

@ -1,8 +1,8 @@
<template>
<mk-ui :func="fn">
<mk-ui>
<span slot="header" v-if="!fetching">%fa:user% {{ user.name }}</span>
<template slot="funcIcon">%fa:pencil-alt%</template>
<div v-if="!fetching" :class="$style.user">
<main v-if="!fetching">
<header>
<div class="banner" :style="user.banner_url ? `background-image: url(${user.banner_url}?thumbnail&size=1024)` : ''"></div>
<div class="body">
@ -48,11 +48,11 @@
</nav>
</header>
<div class="body">
<mk-user-home v-if="page == 'home'" :user="user"/>
<x-home v-if="page == 'home'" :user="user"/>
<mk-user-timeline v-if="page == 'posts'" :user="user"/>
<mk-user-timeline v-if="page == 'media'" :user="user" with-media/>
</div>
</div>
</main>
</mk-ui>
</template>
@ -60,8 +60,12 @@
import Vue from 'vue';
import age from 's-age';
import Progress from '../../../common/scripts/loading';
import XHome from './user/home.vue';
export default Vue.extend({
components: {
XHome
},
props: {
page: {
default: 'home'
@ -86,7 +90,6 @@ export default Vue.extend({
},
mounted() {
document.documentElement.style.background = '#313a42';
(this as any).api('users/show', {
},
methods: {
fetch() {
@ -106,8 +109,8 @@ export default Vue.extend({
});
</script>
<style lang="stylus" module>
.user
<style lang="stylus" scoped>
main
> header
box-shadow 0 4px 4px rgba(0, 0, 0, 0.3)
@ -140,7 +143,7 @@ export default Vue.extend({
left -2px
bottom -2px
width 100%
border 2px solid #313a42
border 3px solid #313a42
border-radius 6px
@media (min-width 500px)

8
src/web/app/mobile/views/pages/user/home-activity.vue → src/web/app/mobile/views/pages/user/home.activity.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="mk-user-home-activity">
<div class="root activity">
<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
<g v-for="(d, i) in data.reverse()">
<g v-for="(d, i) in data">
<rect width="0.8" :height="d.postsH"
:x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH"
fill="#41ddde"/>
@ -39,6 +39,7 @@ export default Vue.extend({
d.repliesH = d.replies / this.peak;
d.repostsH = d.reposts / this.peak;
});
data.reverse();
this.data = data;
});
}
@ -46,8 +47,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-home-activity
display block
.root.activity
max-width 600px
margin 0 auto

4
src/web/app/mobile/views/pages/user/followers-you-know.vue → src/web/app/mobile/views/pages/user/home.followers-you-know.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="mk-user-home-followers-you-know">
<div class="root followers-you-know">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-followers-you-know.loading%<mk-ellipsis/></p>
<div v-if="!fetching && users.length > 0">
<a v-for="user in users" :key="user.id" :href="`/${user.username}`">
@ -34,7 +34,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-home-followers-you-know
.root.followers-you-know
> div
padding 4px

8
src/web/app/mobile/views/pages/user/home-friends.vue → src/web/app/mobile/views/pages/user/home.friends.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="mk-user-home-friends">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-frequently-replied-users.loading%<mk-ellipsis/></p>
<div class="root friends">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-frequently-replied-users.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>
@ -30,7 +30,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-home-friends
.root.friends
> div
overflow-x scroll
-webkit-overflow-scrolling touch
@ -41,7 +41,7 @@ export default Vue.extend({
&:not(:last-child)
margin-right 8px
> .initializing
> .fetching
> .empty
margin 0
padding 16px

4
src/web/app/mobile/views/pages/user/home-photos.vue → src/web/app/mobile/views/pages/user/home.photos.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="mk-user-home-photos">
<div class="root photos">
<p class="initializing" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-photos.loading%<mk-ellipsis/></p>
<div class="stream" v-if="!fetching && images.length > 0">
<a v-for="image in images" :key="image.id"
@ -43,7 +43,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-home-photos
.root.photos
> .stream
display -webkit-flex

12
src/web/app/mobile/views/pages/user/home-posts.vue → src/web/app/mobile/views/pages/user/home.posts.vue
View file

@ -1,10 +1,10 @@
<template>
<div class="mk-user-home-posts">
<p class="initializing" v-if="initializing">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
<div v-if="!initializing && posts.length > 0">
<div class="root posts">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:mobile.tags.mk-user-overview-posts.loading%<mk-ellipsis/></p>
<div v-if="!fetching && posts.length > 0">
<mk-post-card v-for="post in posts" :key="post.id" :post="post"/>
</div>
<p class="empty" v-if="!initializing && posts.length == 0">%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p>
<p class="empty" v-if="!fetching && posts.length == 0">%i18n:mobile.tags.mk-user-overview-posts.no-posts%</p>
</div>
</template>
@ -30,7 +30,7 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
.mk-user-home-posts
.root.posts
> div
overflow-x scroll
@ -44,7 +44,7 @@ export default Vue.extend({
&:not(:last-child)
margin-right 8px
> .initializing
> .fetching
> .empty
margin 0
padding 16px

39
src/web/app/mobile/views/pages/user/home.vue
View file

@ -1,46 +1,34 @@
<template>
<div class="mk-user-home">
<div class="root home">
<mk-post-detail v-if="user.pinned_post" :post="user.pinned_post" compact/>
<section class="recent-posts">
<h2>%fa:R comments%%i18n:mobile.tags.mk-user-overview.recent-posts%</h2>
<div>
<mk-user-home-posts :user="user"/>
<x-posts :user="user"/>
</div>
</section>
<section class="images">
<h2>%fa:image%%i18n:mobile.tags.mk-user-overview.images%</h2>
<div>
<mk-user-home-photos :user="user"/>
<x-photos :user="user"/>
</div>
</section>
<section class="activity">
<h2>%fa:chart-bar%%i18n:mobile.tags.mk-user-overview.activity%</h2>
<div>
<mk-user-home-activity-chart :user="user"/>
</div>
</section>
<section class="keywords">
<h2>%fa:R comment%%i18n:mobile.tags.mk-user-overview.keywords%</h2>
<div>
<mk-user-home-keywords :user="user"/>
</div>
</section>
<section class="domains">
<h2>%fa:globe%%i18n:mobile.tags.mk-user-overview.domains%</h2>
<div>
<mk-user-home-domains :user="user"/>
<x-activity :user="user"/>
</div>
</section>
<section class="frequently-replied-users">
<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.frequently-replied-users%</h2>
<div>
<mk-user-home-frequently-replied-users :user="user"/>
<x-friends :user="user"/>
</div>
</section>
<section class="followers-you-know" v-if="os.isSignedIn && os.i.id !== user.id">
<h2>%fa:users%%i18n:mobile.tags.mk-user-overview.followers-you-know%</h2>
<div>
<mk-user-home-followers-you-know :user="user"/>
<x-followers-you-know :user="user"/>
</div>
</section>
<p>%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p>
@ -49,13 +37,26 @@
<script lang="ts">
import Vue from 'vue';
import XPosts from './home.posts.vue';
import XPhotos from './home.photos.vue';
import XFriends from './home.friends.vue';
import XFollowersYouKnow from './home.followers-you-know.vue';
import XActivity from './home.activity.vue';
export default Vue.extend({
components: {
XPosts,
XPhotos,
XFriends,
XFollowersYouKnow,
XActivity
},
props: ['user']
});
</script>
<style lang="stylus" scoped>
.mk-user-home
.root.home
max-width 600px
margin 0 auto