From 08e6e6664218d20cf3dd1b00823720505fb08fe7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 2 Nov 2020 20:51:38 +0200
Subject: [PATCH] fix chat badge and unify styles across all badges including
follow request count.
---
src/App.scss | 21 ++++++++++-------
.../chat_list_item/chat_list_item.vue | 12 +++++-----
src/components/nav_panel/nav_panel.vue | 23 +++----------------
src/components/side_drawer/side_drawer.vue | 11 ++-------
4 files changed, 24 insertions(+), 43 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 1800d8163..ca7d33cd9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -603,19 +603,24 @@ nav {
flex-grow: 0;
}
}
+
.badge {
+ box-sizing: border-box;
display: inline-block;
border-radius: 99px;
- min-width: 22px;
- max-width: 22px;
- min-height: 22px;
- max-height: 22px;
- font-size: 15px;
- line-height: 22px;
- text-align: center;
+ max-width: 10em;
+ min-width: 1.7em;
+ height: 1.3em;
+ padding: 0.15em 0.15em;
vertical-align: middle;
+ font-weight: normal;
+ font-style: normal;
+ font-size: 0.9em;
+ line-height: 1;
+ text-align: center;
white-space: nowrap;
- padding: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
&.badge-notification {
background-color: $fallback--cRed;
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 1f8ecdf6a..cd3f436e2 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -21,6 +21,12 @@
/>
</span>
<span class="heading-right" />
+ <div class="time-wrapper">
+ <Timeago
+ :time="chat.updated_at"
+ :auto-update="60"
+ />
+ </div>
</div>
<div class="chat-preview">
<StatusContent
@@ -35,12 +41,6 @@
</div>
</div>
</div>
- <div class="time-wrapper">
- <Timeago
- :time="chat.updated_at"
- :auto-update="60"
- />
- </div>
</div>
</template>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 0f02a6815..0c83d0fe2 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -27,7 +27,7 @@
<router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
<div
v-if="unreadChatCount"
- class="badge badge-notification unread-chat-count"
+ class="badge badge-notification"
>
{{ unreadChatCount }}
</div>
@@ -47,7 +47,7 @@
/>{{ $t("nav.friend_requests") }}
<span
v-if="followRequestCount > 0"
- class="badge follow-request-count"
+ class="badge badge-notification"
>
{{ followRequestCount }}
</span>
@@ -84,12 +84,6 @@
padding: 0;
}
- .follow-request-count {
- vertical-align: baseline;
- background-color: $fallback--bg;
- background-color: var(--input, $fallback--faint);
- }
-
li {
position: relative;
border-bottom: 1px solid;
@@ -156,21 +150,10 @@
margin-right: 0.8em;
}
- .unread-chat-count {
- font-size: 0.9em;
- font-weight: bolder;
- font-style: normal;
+ .badge {
position: absolute;
right: 0.6rem;
top: 1.25em;
- padding: 0 0.3em;
- min-width: 1.3rem;
- min-height: 1.3rem;
- max-height: 1.3rem;
- line-height: 1.3rem;
- max-width: 10em;
- overflow: hidden;
- text-overflow: ellipsis;
}
}
</style>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index ed1ccb7db..149f11cb4 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -70,7 +70,7 @@
/> {{ $t("nav.chats") }}
<span
v-if="unreadChatCount"
- class="badge badge-notification unread-chat-count"
+ class="badge badge-notification"
>
{{ unreadChatCount }}
</span>
@@ -99,7 +99,7 @@
/> {{ $t("nav.friend_requests") }}
<span
v-if="followRequestCount > 0"
- class="badge follow-request-count"
+ class="badge badge-notification"
>
{{ followRequestCount }}
</span>
@@ -271,13 +271,6 @@
--faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon);
-
- .follow-request-count {
- vertical-align: baseline;
- background-color: $fallback--bg;
- background-color: var(--input, $fallback--faint);
- }
-
}
.side-drawer-logo-wrapper {
--
GitLab