diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/user_list_popover/user_list_popover.vue | 47 |
1 files changed, 22 insertions, 25 deletions
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index b6b7ab95..6bd786b3 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -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; + + .user-list-names { + display: flex; + flex-direction: column; + margin-left: 0.5em; + min-width: 5em; - img { - width: 1em; - height: 1em; + img { + width: 1em; + height: 1em; + } } - } - .reacted-user-screen-name { - font-size: 9px; + .user-list-screen-name { + font-size: 9px; + } } } |