Improve following/followers view

Closes 
This commit is contained in:
syuilo 2018-09-13 02:08:17 +09:00
parent b4a30e2a25
commit 8a8c079b2f
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
2 changed files with 74 additions and 80 deletions
src/client/app/desktop/views/components

View file

@ -1,94 +1,86 @@
<template> <template>
<div class="root item"> <div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
<mk-avatar class="avatar" :user="user"/> <div class="banner" :style="bannerStyle"></div>
<div class="main"> <mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<header>
<router-link class="name" :to="user | userPage" v-user-preview="user.id">{{ user | userName }}</router-link>
<span class="username">@{{ user | acct }}</span>
</header>
<div class="body"> <div class="body">
<router-link :to="user | userPage" class="name">{{ user | userName }}</router-link>
<span class="username">@{{ user | acct }}</span>
<div class="description">
<misskey-flavored-markdown v-if="user.description" :text="user.description" :i="$store.state.i"/>
</div>
<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p> <p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
<div class="description">{{ user.description }}</div> <mk-follow-button :user="user" :size="'big'"/>
</div> </div>
</div> </div>
<mk-follow-button :user="user"/>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
props: ['user'] props: ['user'],
computed: {
bannerStyle(): any {
if (this.user.bannerUrl == null) return {};
return {
backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
backgroundImage: `url(${ this.user.bannerUrl })`
};
}
},
}); });
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.root.item .zvdbznxvfixtmujpsigoccczftvpiwqh
padding 16px $bg = #fff
font-size 16px
&:after margin 16px auto
content "" max-width calc(100% - 32px)
display block font-size 16px
clear both text-align center
background $bg
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
> .banner
height 100px
background-color #f9f4f4
background-position center
background-size cover
> .avatar > .avatar
display block display block
float left margin -40px auto 0 auto
margin 0 16px 0 0 width 80px
width 58px height 80px
height 58px border-radius 100%
border-radius 8px border solid 4px $bg
> .main
float left
width calc(100% - 74px)
> header
margin-bottom 2px
> .name
display inline
margin 0
padding 0
color #777
font-size 1em
font-weight 700
text-align left
text-decoration none
&:hover
text-decoration underline
> .username
text-align left
margin 0 0 0 8px
color #ccc
> .body > .body
padding 4px 32px 32px 32px
@media (max-width 400px)
padding 4px 16px 16px 16px
> .name
font-size 20px
font-weight bold
> .username
display block
opacity 0.7
> .description
margin 16px 0
> .followed > .followed
display inline-block margin 0 0 16px 0
margin 0 0 4px 0 padding 0
padding 2px 8px line-height 24px
vertical-align top font-size 0.8em
font-size 10px
color #71afc7 color #71afc7
background #eefaff background #eefaff
border-radius 4px border-radius 4px
> .description
cursor default
display block
margin 0
padding 0
overflow-wrap break-word
font-size 1.1em
color #717171
> .mk-follow-button
position absolute
top 16px
right 16px
</style> </style>

View file

@ -33,7 +33,7 @@ export default Vue.extend({
props: ['fetch', 'count', 'youKnowCount'], props: ['fetch', 'count', 'youKnowCount'],
data() { data() {
return { return {
limit: 30, limit: 20,
mode: 'all', mode: 'all',
fetching: true, fetching: true,
moreFetching: false, moreFetching: false,
@ -73,10 +73,14 @@ export default Vue.extend({
.mk-users-list .mk-users-list
height 100% height 100%
background #fff overflow auto
background #eee
> nav > nav
z-index 1 z-index 10
position sticky
top 0
background #fff
box-shadow 0 1px 0 rgba(#000, 0.1) box-shadow 0 1px 0 rgba(#000, 0.1)
> div > div
@ -114,16 +118,14 @@ export default Vue.extend({
background #eee background #eee
border-radius 20px border-radius 20px
> .users > button
height calc(100% - 54px) display block
overflow auto width calc(100% - 32px)
margin 16px
padding 16px
> * &:hover
border-bottom solid 1px rgba(#000, 0.05) background rgba(#000, 0.1)
> *
max-width 600px
margin 0 auto
> .no > .no
margin 0 margin 0