diff options
| -rw-r--r-- | src/components/avatar_list/avatar_list.vue | 2 | ||||
| -rw-r--r-- | src/components/status/status.vue | 61 |
2 files changed, 51 insertions, 12 deletions
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index d7ac22dd..dcffb7cd 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -20,10 +20,8 @@ height: 24px; width: 24px; margin: 0 5px 0 0; - padding: 11px 0; &:first-child { - border-left: 1px solid var(--faint, $fallback--faint); padding-left: 12px !important; } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 8d95343d..9be6b2b9 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -135,11 +135,13 @@ <div class="favs-repeated-users" v-if="combinedFavsAndRepeatsAvatars.length > 0" :class="{ 'status-fadein': combinedFavsAndRepeatsAvatars.length > 0 }"> <ul class="stats"> - <li class="stat-count" v-if="statusoid.favoritedBy && statusoid.favoritedBy.length > 0"> - <a class="request-favorited-popup"><strong>{{statusoid.favoritedBy.length}}</strong> {{ $t('user_card.favorites') }}</a> - </li> <li class="stat-count" v-if="statusoid.rebloggedBy && statusoid.rebloggedBy.length > 0"> - <a class="request-favorited-popup"><strong>{{statusoid.rebloggedBy.length}}</strong> {{ $t('settings.notification_visibility_repeats') }}</a> + <div class="stat-title">{{ $t('settings.notification_visibility_repeats') }}</div> + <div class="stat-number">{{ statusoid.rebloggedBy.length }}</div> + </li> + <li class="stat-count" v-if="statusoid.favoritedBy && statusoid.favoritedBy.length > 0"> + <div class="stat-title">{{ $t('user_card.favorites') }}</div> + <div class="stat-number">{{ statusoid.favoritedBy.length }}</div> </li> <li class="avatar-row"> <AvatarList :avatars='combinedFavsAndRepeatsAvatars'></AvatarList> @@ -627,25 +629,52 @@ a.unmute { } .favs-repeated-users { - margin-top: 10px; + margin-top: 0.75em; .stats { - border-bottom: 1px solid var(--faint, $fallback--faint); - border-top: 1px solid var(--faint, $fallback--faint); width: 100%; margin: 0; list-style: none; overflow: hidden; padding: 0; display: flex; + line-height: 1em; .stat-count { margin-right: 10px; + .stat-title { + color: var(--faint, rgba(185, 185, 186, 0.5)); + font-weight: lighter; + font-size: 12px; + text-transform: uppercase; + position: relative; + margin-bottom: 3px; + cursor: pointer; + line-height: 1em; + + &:hover, + &:focus { + &::after { + content: ''; + position: absolute; + left: 0; + top: 100%; + width: 100%; + height: 1px; + background-color: var(--faint, $fallback--faint); + } + } + } + + .stat-number { + font-weight: bolder; + font-size: 16px; + line-height: 1em; + } + a { cursor: pointer; - padding-top: 14px; - float: left; color: var(--faint, $fallback--faint); strong { @@ -662,10 +691,22 @@ a.unmute { .avatar-row { flex: 1; overflow: hidden; + position: relative; + + &::before { + content: ''; + position: absolute; + height: 100%; + width: 1px; + left: 0; + background-color: var(--faint, $fallback--faint); + } } li { - display: block; + display: flex; + flex-direction: column; + justify-content: center; } } } |