misskey-awawa/src/client/app/desktop/views/components/users-list.item.vue

87 lines
1.8 KiB
Vue
Raw Normal View History

2018-02-15 04:24:46 +00:00
<template>
<div class="zvdbznxvfixtmujpsigoccczftvpiwqh">
<div class="banner" :style="bannerStyle"></div>
<mk-avatar class="avatar" :user="user" :disable-preview="true"/>
<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"/>
2018-02-15 04:24:46 +00:00
</div>
<p class="followed" v-if="user.isFollowed">%i18n:@followed%</p>
<mk-follow-button :user="user" :size="'big'"/>
2018-02-15 04:24:46 +00:00
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-03-27 07:51:12 +00:00
2018-02-15 04:24:46 +00:00
export default Vue.extend({
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 })`
};
}
},
2018-02-15 04:24:46 +00:00
});
</script>
<style lang="stylus" scoped>
.zvdbznxvfixtmujpsigoccczftvpiwqh
$bg = #fff
margin 16px auto
max-width calc(100% - 32px)
2018-02-15 04:24:46 +00:00
font-size 16px
text-align center
background $bg
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
2018-02-15 04:24:46 +00:00
> .banner
height 100px
background-color #f9f4f4
background-position center
background-size cover
2018-02-15 04:24:46 +00:00
2018-04-29 08:17:15 +00:00
> .avatar
2018-02-15 04:24:46 +00:00
display block
margin -40px auto 0 auto
width 80px
height 80px
border-radius 100%
border solid 4px $bg
2018-02-15 04:24:46 +00:00
> .body
padding 4px 32px 32px 32px
2018-02-15 04:24:46 +00:00
@media (max-width 400px)
padding 4px 16px 16px 16px
2018-02-15 04:24:46 +00:00
> .name
font-size 20px
font-weight bold
2018-02-15 04:24:46 +00:00
> .username
display block
opacity 0.7
2018-02-15 04:24:46 +00:00
> .description
margin 16px 0
2018-02-15 04:24:46 +00:00
> .followed
margin 0 0 16px 0
padding 0
line-height 24px
font-size 0.8em
color #71afc7
background #eefaff
border-radius 4px
2018-02-15 04:24:46 +00:00
</style>