kaslo/pawkey-sk
1
0
Fork 0
Code Packages Activity

wip

Browse Source
This commit is contained in:
syuilo
2018-02-15 18:33:34 +09:00
parent 43d9d81b53
commit 4980b86d64
18 changed files with 761 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/app/mobile/views/pages/user/followers-you-know.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div class="mk-user-home-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}`">
<img :src="`${user.avatar_url}?thumbnail&size=64`" :alt="user.name"/>
</a>
</div>
<p class="empty" v-if="!fetching && users.length == 0">%i18n:mobile.tags.mk-user-overview-followers-you-know.no-users%</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
data() {
return {
fetching: true,
users: []
};
},
mounted() {
this.$root.$data.os.api('users/followers', {
user_id: this.user.id,
iknow: true,
limit: 30
}).then(res => {
this.fetching = false;
this.users = res.users;
});
}
});
</script>
<style lang="stylus" scoped>
.mk-user-home-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 #aaa
> i
margin-right 4px
</style>
src/web/app/mobile/views/pages/user/home-activity.vue
+62
View File
@@ -0,0 +1,62 @@
<template>
<div class="mk-user-home-activity">
<svg v-if="data" ref="canvas" viewBox="0 0 30 1" preserveAspectRatio="none">
<g v-for="(d, i) in data.reverse()" :key="i">
<rect width="0.8" :height="d.postsH"
:x="i + 0.1" :y="1 - d.postsH - d.repliesH - d.repostsH"
fill="#41ddde"/>
<rect width="0.8" :height="d.repliesH"
:x="i + 0.1" :y="1 - d.repliesH - d.repostsH"
fill="#f7796c"/>
<rect width="0.8" :height="d.repostsH"
:x="i + 0.1" :y="1 - d.repostsH"
fill="#a1de41"/>
</g>
</svg>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
data() {
return {
fetching: true,
data: [],
peak: null
};
},
mounted() {
this.$root.$data.os.api('aggregation/users/activity', {
user_id: this.user.id,
limit: 30
}).then(data => {
data.forEach(d => d.total = d.posts + d.replies + d.reposts);
this.peak = Math.max.apply(null, data.map(d => d.total));
data.forEach(d => {
d.postsH = d.posts / this.peak;
d.repliesH = d.replies / this.peak;
d.repostsH = d.reposts / this.peak;
});
this.data = data;
});
}
});
</script>
<style lang="stylus" scoped>
.mk-user-home-activity
display block
max-width 600px
margin 0 auto
> svg
display block
width 100%
height 80px
> rect
transform-origin center
</style>
src/web/app/mobile/views/pages/user/home-friends.vue
+54
View File
@@ -0,0 +1,54 @@
<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 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">%i18n:mobile.tags.mk-user-overview-frequently-replied-users.no-users%</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
data() {
return {
fetching: true,
users: []
};
},
mounted() {
this.$root.$data.os.api('users/get_frequently_replied_users', {
user_id: this.user.id
}).then(res => {
this.fetching = false;
this.users = res.map(x => x.user);
});
}
});
</script>
<style lang="stylus" scoped>
.mk-user-home-friends
> div
overflow-x scroll
-webkit-overflow-scrolling touch
white-space nowrap
padding 8px
> mk-user-card
&:not(:last-child)
margin-right 8px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
</style>
src/web/app/mobile/views/pages/user/home-photos.vue
+78
View File
@@ -0,0 +1,78 @@
<template>
<div class="mk-user-home-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"
class="img"
:style="`background-image: url(${image.media.url}?thumbnail&size=256)`"
:href="`/${image.post.user.username}/${image.post.id}`"
></a>
</div>
<p class="empty" v-if="!fetching && images.length == 0">%i18n:mobile.tags.mk-user-overview-photos.no-photos%</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
data() {
return {
fetching: true,
images: []
};
},
mounted() {
this.$root.$data.os.api('users/posts', {
user_id: this.user.id,
with_media: true,
limit: 6
}).then(posts => {
this.fetching = false;
posts.forEach(post => {
post.media.forEach(media => {
if (this.images.length < 9) this.images.push({
post,
media
});
});
});
});
}
});
</script>
<style lang="stylus" scoped>
.mk-user-home-photos
> .stream
display -webkit-flex
display -moz-flex
display -ms-flex
display flex
justify-content center
flex-wrap wrap
padding 8px
> .img
flex 1 1 33%
width 33%
height 80px
background-position center center
background-size cover
background-clip content-box
border solid 2px transparent
border-radius 4px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
</style>
src/web/app/mobile/views/pages/user/home-posts.vue
+57
View File
@@ -0,0 +1,57 @@
<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">
<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>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user'],
data() {
return {
fetching: true,
posts: []
};
},
mounted() {
this.$root.$data.os.api('users/posts', {
user_id: this.user.id
}).then(posts => {
this.fetching = false;
this.posts = posts;
});
}
});
</script>
<style lang="stylus" scoped>
.mk-user-home-posts
> div
overflow-x scroll
-webkit-overflow-scrolling touch
white-space nowrap
padding 8px
> *
vertical-align top
&:not(:last-child)
margin-right 8px
> .initializing
> .empty
margin 0
padding 16px
text-align center
color #aaa
> i
margin-right 4px
</style>
src/web/app/mobile/views/pages/user/home.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<div class="mk-user-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"/>
</div>
</section>
<section class="images">
<h2>%fa:image%%i18n:mobile.tags.mk-user-overview.images%</h2>
<div>
<mk-user-home-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"/>
</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"/>
</div>
</section>
<section class="followers-you-know" v-if="$root.$data.os.isSignedIn && $root.$data.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"/>
</div>
</section>
<p>%i18n:mobile.tags.mk-user-overview.last-used-at%: <b><mk-time :time="user.last_used_at"/></b></p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['user']
});
</script>
<style lang="stylus" scoped>
.mk-user-home
max-width 600px
margin 0 auto
> mk-post-detail
margin 0 0 8px 0
> section
background #eee
border-radius 8px
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
&:not(:last-child)
margin-bottom 8px
> h2
margin 0
padding 8px 10px
font-size 15px
font-weight normal
color #465258
background #fff
border-radius 8px 8px 0 0
> i
margin-right 6px
> .activity
> div
padding 8px
> p
display block
margin 16px
text-align center
color #cad2da
</style>