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