tea/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Add third slot area to BasicUserCard

Browse source
This commit is contained in:
taehoon 2019-02-25 22:50:34 -05:00
parent 784523b8ec
commit 1337e42b2d
1 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,19 +7,24 @@
<user-card-content :user="user" :switcher="false"></user-card-content> <user-card-content :user="user" :switcher="false"></user-card-content>
</div> </div>
<div class="user-card-collapsed-content" v-else> <div class="user-card-collapsed-content" v-else>
<div class="user-card-primary-area"> <div class="user-card-primary-secondary-wrapper">
<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> <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 class="user-card-secondary-area"> <div class="user-card-third-area">
<slot name="secondary-area"></slot> <slot name="third-area"></slot>
</div> </div>
</div> </div>
</div> </div>
@ -46,6 +51,9 @@
margin-left: 0.7em; margin-left: 0.7em;
text-align: left; text-align: left;
flex: 1; flex: 1;
}
&-primary-secondary-wrapper {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
@ -67,9 +75,13 @@
flex: none; flex: none;
} }
&-third-area {
margin-top: .2em;
}
&-expanded-content { &-expanded-content {
flex: 1; flex: 1;
margin: 0.2em 0 0 0.7em; margin-left: 0.7em;
border-radius: $fallback--panelRadius; border-radius: $fallback--panelRadius;
border-radius: var(--panelRadius, $fallback--panelRadius); border-radius: var(--panelRadius, $fallback--panelRadius);
border-style: solid; border-style: solid;