diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 2d02ca03..f21770ce 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -6,7 +6,7 @@ -
+
{{user.name}}
@@ -18,12 +18,14 @@
- - @{{user.screen_name}} +
+ + @{{user.screen_name}} {{visibleRole}} - + + {{dailyAvg}} {{ $t('user_card.per_day') }} - +
@@ -232,7 +234,7 @@ opacity: .8; } - .name-and-screen-name { + .user-summary { display: block; margin-left: 0.6em; text-align: left; @@ -249,6 +251,7 @@ vertical-align: middle; object-fit: contain } + .top-line { display: flex; } @@ -269,40 +272,42 @@ } } - .user-screen-name { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - display: inline-block; + .bottom-line { + display: flex; font-weight: light; font-size: 15px; padding-right: 0.1em; width: 100%; - display: flex; + } - .dailyAvg { - min-width: 1px; - flex: 0 0 auto; - margin-left: 1em; - font-size: 0.7em; - color: $fallback--text; - color: var(--text, $fallback--text); - } + .user-screen-name-role { + min-width: 1px; + flex: 0 1 auto; + text-overflow: ellipsis; + overflow: hidden; + } - .handle { - min-width: 1px; - flex: 0 1 auto; - text-overflow: ellipsis; - overflow: hidden; - } + .user-screen-name { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } - // TODO use proper colors - .staff { - text-transform: capitalize; - color: $fallback--text; - color: var(--btnText, $fallback--text); - background-color: $fallback--fg; - background-color: var(--btn, $fallback--fg); - } + .dailyAvg { + min-width: 1px; + flex: 0 0 auto; + margin-left: 1em; + font-size: 0.7em; + color: $fallback--text; + color: var(--text, $fallback--text); + } + + // TODO use proper colors + .staff { + text-transform: capitalize; + color: $fallback--text; + color: var(--btnText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--btn, $fallback--fg); } .user-meta {