diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/avatar_list/avatar_list.vue | 49 | ||||
| -rw-r--r-- | src/components/status/status.vue | 30 |
2 files changed, 22 insertions, 57 deletions
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue index 077d002d..fc5abf01 100644 --- a/src/components/avatar_list/avatar_list.vue +++ b/src/components/avatar_list/avatar_list.vue @@ -1,7 +1,7 @@ <template> - <ul class="avatars" :class="{ 'transparent-avatar': slicedAvatars.length == 15 }"> - <li class="avatars-item" v-for="(avatar, index) in slicedAvatars" :key="`avatar-${index}`"> - <UserAvatar :src="avatar.profile_image_url" class="avatars-img" /> + <ul class="avatars"> + <li class="avatars-item" v-for="avatar in slicedAvatars"> + <UserAvatar :src="avatar.profile_image_url" class="avatar-small" /> </li> </ul> </template> @@ -10,53 +10,28 @@ <style lang="scss"> @import '../../_variables.scss'; + .avatars { - display: inline-flex; /* Causes LI items to display in row. */ - list-style-type: none; + display: flex; margin: 0; padding: 0; + // For hiding overflowing elements + flex-wrap: wrap; + height: 24px; + li.avatars-item { - height: 24px; - width: 24px; - margin: 0 5px 0 0; + margin: 0 0 5px 5px; &:first-child { - padding-left: 12px; + padding-left: 10px; } - &:last-child { - margin-right: 0; - } - - .avatars-img { + .avatar-small { border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); height: 24px; width: 24px; - background-color: $fallback--lightText; - background-color: var(--lightText, $fallback--lightText); - } - } -} - -.transparent-avatar { - .avatars-item { - &:first-child { - position: relative; - - .avatars-img { - &::after { - content: ''; - position: absolute; - width: 100%; - height: 100%; - background-color: $fallback--faint; - background-color: var(--faint, $fallback--faint); - left: 0; - top: 0; - } - } } } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index b0882964..d79bb2b9 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -135,19 +135,19 @@ <transition name="fade"> <div class="favs-repeated-users" v-if="combinedFavsAndRepeatsAvatars.length > 0 && isFocused"> - <ul class="stats"> - <li class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"> + <div class="stats"> + <div class="stat-count" v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"> <a class="stat-title">{{ $t('settings.notification_visibility_repeats') }}</a> <div class="stat-number">{{ statusFromGlobalRepository.rebloggedBy.length }}</div> - </li> - <li class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"> + </div> + <div class="stat-count" v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"> <a class="stat-title">{{ $t('user_card.favorites') }}</a> <div class="stat-number">{{ statusFromGlobalRepository.favoritedBy.length }}</div> - </li> - <li class="avatar-row"> + </div> + <div class="avatar-row"> <AvatarList :avatars='combinedFavsAndRepeatsAvatars'></AvatarList> - </li> - </ul> + </div> + </div> </div> </transition> @@ -631,19 +631,15 @@ a.unmute { } .favs-repeated-users { - margin-top: 0.75em; + margin-top: $status-margin; .stats { width: 100%; - margin: 0; - list-style: none; - overflow: hidden; - padding: 0; display: flex; line-height: 1em; .stat-count { - margin-right: 10px; + margin-right: 0.8em; .stat-title { color: var(--faint, $fallback--faint); @@ -651,13 +647,7 @@ a.unmute { text-transform: uppercase; position: relative; margin-bottom: 3px; - cursor: pointer; line-height: 1em; - - &:hover, - &:focus { - text-decoration: underline; - } } .stat-number { |