Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Update BasicUserCard template and add a slot for customization

Browse source
This commit is contained in:
taehoon 2019-02-13 14:31:02 -05:00
parent 94e6de11b7
commit 5d6e1864a5
1 changed files with 60 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
src/components/basic_user_card/basic_user_card.vue
View file

@ -1,20 +1,25 @@
<template> <template>
<div class="card"> <div class="user-card">
<router-link :to="userProfileLink(user)"> <router-link :to="userProfileLink(user)">
<UserAvatar class="avatar" :compact="true" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/> <UserAvatar class="avatar" :compact="true" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/>
</router-link> </router-link>
<div class="usercard" v-if="userExpanded"> <div class="user-card-expanded-content" v-if="userExpanded">
<user-card-content :user="user" :switcher="false"></user-card-content> <user-card-content :user="user" :switcher="false"></user-card-content>
</div> </div>
<div class="name-and-screen-name" v-else> <div class="user-card-collapsed-content" v-else>
<div :title="user.name" class="user-name"> <div class="user-card-primary-area">
<span v-if="user.name_html" v-html="user.name_html"></span> <div :title="user.name" class="user-name">
<span v-else>{{ user.name }}</span> <span v-if="user.name_html" v-html="user.name_html"></span>
<span v-else>{{ user.name }}</span>
</div>
<div>
<router-link class='user-screen-name' :to="userProfileLink(user)">
@{{user.screen_name}}
</router-link>
</div>
</div> </div>
<div class="user-link-action"> <div class="user-card-secondary-area">
<router-link class='user-screen-name' :to="userProfileLink(user)"> <slot name="secondary-area"></slot>
@{{user.screen_name}}
</router-link>
</div> </div>
</div> </div>
</div> </div>
@ -25,35 +30,7 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.name-and-screen-name { .user-card {
margin-left: 0.7em;
margin-top:0.0em;
text-align: left;
width: 100%;
.user-name {
display: flex;
justify-content: space-between;
img {
object-fit: contain;
height: 16px;
width: 16px;
vertical-align: middle;
}
}
.user-link-action {
display: flex;
align-items: flex-start;
justify-content: space-between;
button {
margin-top: 3px;
}
}
}
.card {
display: flex; display: flex;
flex: 1 0; flex: 1 0;
padding-top: 0.6em; padding-top: 0.6em;
@ -65,30 +42,52 @@
border-bottom-color: $fallback--border; border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);
.avatar { &-collapsed-content {
padding: 0; margin-left: 0.7em;
} margin-top:0.0em;
} text-align: left;
flex: 1;
.usercard { display: flex;
width: fill-available; align-items: flex-start;
margin: 0.2em 0 0 0.7em; justify-content: space-between;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-width: 1px;
overflow: hidden;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
} }
p { &-primary-area {
margin-bottom: 0; flex: 1;
.user-name {
img {
object-fit: contain;
height: 16px;
width: 16px;
vertical-align: middle;
}
}
}
&-secondary-area {
flex: none;
}
&-expanded-content {
flex: 1;
margin: 0.2em 0 0 0.7em;
border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid;
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
border-width: 1px;
overflow: hidden;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
p {
margin-bottom: 0;
}
} }
} }
</style> </style>