change class names to not have reacts in them

This commit is contained in:
Shpuld Shpuldson 2020-07-16 17:45:07 +03:00
parent 6079301ec4
commit 8e0414dc7c
1 changed files with 22 additions and 25 deletions

View File

@ -9,27 +9,24 @@
</template> </template>
<div <div
slot="content" slot="content"
class="reacted-users" class="user-list-popover"
> >
<div v-if="users.length"> <div v-if="users.length">
<div <div
v-for="(user) in users" v-for="(user) in users"
:key="user.id" :key="user.id"
class="reacted-user" class="user-list-row"
> >
<UserAvatar <UserAvatar
:user="user" :user="user"
class="avatar-small" class="avatar-small"
:compact="true" :compact="true"
/> />
<div class="reacted-user-names"> <div class="user-list-names">
<!-- eslint-disable vue/no-v-html --> <!-- eslint-disable vue/no-v-html -->
<span <span v-html="user.name_html" />
class="reacted-user-name"
v-html="user.name_html"
/>
<!-- eslint-enable vue/no-v-html --> <!-- eslint-enable vue/no-v-html -->
<span class="reacted-user-screen-name">{{ user.screen_name }}</span> <span class="user-list-screen-name">{{ user.screen_name }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -45,29 +42,29 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.reacted-users { .user-list-popover {
padding: 0.5em; padding: 0.5em;
}
.reacted-user { .user-list-row {
padding: 0.25em; padding: 0.25em;
display: flex;
flex-direction: row;
.reacted-user-names {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
margin-left: 0.5em;
min-width: 5em;
img { .user-list-names {
width: 1em; display: flex;
height: 1em; flex-direction: column;
margin-left: 0.5em;
min-width: 5em;
img {
width: 1em;
height: 1em;
}
} }
}
.reacted-user-screen-name { .user-list-screen-name {
font-size: 9px; font-size: 9px;
}
} }
} }