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

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,16 +42,15 @@
<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; display: flex;
flex-direction: row; flex-direction: row;
.reacted-user-names { .user-list-names {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 0.5em; margin-left: 0.5em;
@ -66,9 +62,10 @@
} }
} }
.reacted-user-screen-name { .user-list-screen-name {
font-size: 9px; font-size: 9px;
} }
}
} }
</style> </style>