Sharkey/src/client/app/mobile/views/pages/user/home.vue

110 lines
2.1 KiB
Vue
Raw Normal View History

2018-02-15 11:33:34 +02:00
<template>
2018-02-22 10:32:58 +02:00
<div class="root home">
2018-04-07 20:30:37 +03:00
<mk-note-detail v-if="user.pinnedNote" :note="user.pinnedNote" :compact="true"/>
<section class="recent-notes">
2018-04-14 19:04:40 +03:00
<h2>%fa:R comments%%i18n:@recent-notes%</h2>
2018-02-15 11:33:34 +02:00
<div>
2018-04-07 20:30:37 +03:00
<x-notes :user="user"/>
2018-02-15 11:33:34 +02:00
</div>
</section>
<section class="images">
2018-04-14 19:04:40 +03:00
<h2>%fa:image%%i18n:@images%</h2>
2018-02-15 11:33:34 +02:00
<div>
2018-02-22 10:32:58 +02:00
<x-photos :user="user"/>
2018-02-15 11:33:34 +02:00
</div>
</section>
<section class="activity">
2018-04-14 19:04:40 +03:00
<h2>%fa:chart-bar%%i18n:@activity%</h2>
2018-02-15 11:33:34 +02:00
<div>
2018-02-23 19:46:09 +02:00
<mk-activity :user="user"/>
2018-02-15 11:33:34 +02:00
</div>
</section>
<section class="frequently-replied-users">
2018-04-14 19:04:40 +03:00
<h2>%fa:users%%i18n:@frequently-replied-users%</h2>
2018-02-15 11:33:34 +02:00
<div>
2018-02-22 10:32:58 +02:00
<x-friends :user="user"/>
2018-02-15 11:33:34 +02:00
</div>
</section>
2018-02-18 05:35:18 +02:00
<section class="followers-you-know" v-if="os.isSignedIn && os.i.id !== user.id">
2018-04-14 19:04:40 +03:00
<h2>%fa:users%%i18n:@followers-you-know%</h2>
2018-02-15 11:33:34 +02:00
<div>
2018-02-22 10:32:58 +02:00
<x-followers-you-know :user="user"/>
2018-02-15 11:33:34 +02:00
</div>
</section>
2018-04-14 19:04:40 +03:00
<p v-if="user.host === null">%i18n:@last-used-at%: <b><mk-time :time="user.lastUsedAt"/></b></p>
2018-02-15 11:33:34 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-04-07 20:30:37 +03:00
import XNotes from './home.notes.vue';
2018-02-22 10:32:58 +02:00
import XPhotos from './home.photos.vue';
import XFriends from './home.friends.vue';
import XFollowersYouKnow from './home.followers-you-know.vue';
2018-02-15 11:33:34 +02:00
export default Vue.extend({
2018-02-22 10:32:58 +02:00
components: {
2018-04-07 20:30:37 +03:00
XNotes,
2018-02-22 10:32:58 +02:00
XPhotos,
XFriends,
2018-02-23 19:46:09 +02:00
XFollowersYouKnow
2018-02-22 10:32:58 +02:00
},
2018-02-15 11:33:34 +02:00
props: ['user']
});
</script>
<style lang="stylus" scoped>
2018-04-28 04:59:37 +03:00
root(isDark)
2018-02-15 11:33:34 +02:00
max-width 600px
margin 0 auto
2018-04-07 20:30:37 +03:00
> .mk-note-detail
2018-02-15 11:33:34 +02:00
margin 0 0 8px 0
@media (min-width 500px)
margin 0 0 16px 0
2018-02-15 11:33:34 +02:00
> section
2018-04-28 04:59:37 +03:00
background isDark ? #21242f : #eee
2018-02-15 11:33:34 +02:00
border-radius 8px
2018-04-27 15:33:18 +03:00
box-shadow 0 4px 16px rgba(#000, 0.1)
2018-02-15 11:33:34 +02:00
&:not(:last-child)
margin-bottom 8px
2018-04-27 15:33:18 +03:00
@media (min-width 500px)
margin-bottom 16px
2018-02-15 11:33:34 +02:00
> h2
margin 0
padding 8px 10px
font-size 15px
font-weight normal
2018-04-28 04:59:37 +03:00
color isDark ? #b8c5cc : #465258
background isDark ? #282c37 : #fff
2018-02-15 11:33:34 +02:00
border-radius 8px 8px 0 0
2018-04-28 04:59:37 +03:00
@media (min-width 500px)
padding 10px 16px
2018-02-15 11:33:34 +02:00
> i
margin-right 6px
> .activity
> div
padding 8px
> p
display block
margin 16px
text-align center
2018-04-28 04:59:37 +03:00
color isDark ? #cad2da : #929aa0
.root.home[data-darkmode]
root(true)
.root.home:not([data-darkmode])
root(false)
2018-02-15 11:33:34 +02:00
</style>