From 08e6e6664218d20cf3dd1b00823720505fb08fe7 Mon Sep 17 00:00:00 2001 From: Henry Jameson 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 1800d816..ca7d33cd 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 1f8ecdf6..cd3f436e 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 @@ /> +
+ +
-
- -
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 0f02a681..0c83d0fe 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -27,7 +27,7 @@
{{ unreadChatCount }}
@@ -47,7 +47,7 @@ />{{ $t("nav.friend_requests") }} @@ -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; } } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index ed1ccb7d..149f11cb 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -70,7 +70,7 @@ /> {{ $t("nav.chats") }} {{ unreadChatCount }} @@ -99,7 +99,7 @@ /> {{ $t("nav.friend_requests") }} @@ -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 {