fix chat badge and unify styles across all badges including follow

request count.
This commit is contained in:
Henry Jameson 2020-11-02 20:51:38 +02:00
parent f0a66448ee
commit 08e6e66642
4 changed files with 24 additions and 43 deletions

View file

@ -603,19 +603,24 @@ nav {
flex-grow: 0; flex-grow: 0;
} }
} }
.badge { .badge {
box-sizing: border-box;
display: inline-block; display: inline-block;
border-radius: 99px; border-radius: 99px;
min-width: 22px; max-width: 10em;
max-width: 22px; min-width: 1.7em;
min-height: 22px; height: 1.3em;
max-height: 22px; padding: 0.15em 0.15em;
font-size: 15px;
line-height: 22px;
text-align: center;
vertical-align: middle; vertical-align: middle;
font-weight: normal;
font-style: normal;
font-size: 0.9em;
line-height: 1;
text-align: center;
white-space: nowrap; white-space: nowrap;
padding: 0; overflow: hidden;
text-overflow: ellipsis;
&.badge-notification { &.badge-notification {
background-color: $fallback--cRed; background-color: $fallback--cRed;

View file

@ -21,6 +21,12 @@
/> />
</span> </span>
<span class="heading-right" /> <span class="heading-right" />
<div class="time-wrapper">
<Timeago
:time="chat.updated_at"
:auto-update="60"
/>
</div>
</div> </div>
<div class="chat-preview"> <div class="chat-preview">
<StatusContent <StatusContent
@ -35,12 +41,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="time-wrapper">
<Timeago
:time="chat.updated_at"
:auto-update="60"
/>
</div>
</div> </div>
</template> </template>

View file

@ -27,7 +27,7 @@
<router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }">
<div <div
v-if="unreadChatCount" v-if="unreadChatCount"
class="badge badge-notification unread-chat-count" class="badge badge-notification"
> >
{{ unreadChatCount }} {{ unreadChatCount }}
</div> </div>
@ -47,7 +47,7 @@
/>{{ $t("nav.friend_requests") }} />{{ $t("nav.friend_requests") }}
<span <span
v-if="followRequestCount > 0" v-if="followRequestCount > 0"
class="badge follow-request-count" class="badge badge-notification"
> >
{{ followRequestCount }} {{ followRequestCount }}
</span> </span>
@ -84,12 +84,6 @@
padding: 0; padding: 0;
} }
.follow-request-count {
vertical-align: baseline;
background-color: $fallback--bg;
background-color: var(--input, $fallback--faint);
}
li { li {
position: relative; position: relative;
border-bottom: 1px solid; border-bottom: 1px solid;
@ -156,21 +150,10 @@
margin-right: 0.8em; margin-right: 0.8em;
} }
.unread-chat-count { .badge {
font-size: 0.9em;
font-weight: bolder;
font-style: normal;
position: absolute; position: absolute;
right: 0.6rem; right: 0.6rem;
top: 1.25em; 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> </style>

View file

@ -70,7 +70,7 @@
/> {{ $t("nav.chats") }} /> {{ $t("nav.chats") }}
<span <span
v-if="unreadChatCount" v-if="unreadChatCount"
class="badge badge-notification unread-chat-count" class="badge badge-notification"
> >
{{ unreadChatCount }} {{ unreadChatCount }}
</span> </span>
@ -99,7 +99,7 @@
/> {{ $t("nav.friend_requests") }} /> {{ $t("nav.friend_requests") }}
<span <span
v-if="followRequestCount > 0" v-if="followRequestCount > 0"
class="badge follow-request-count" class="badge badge-notification"
> >
{{ followRequestCount }} {{ followRequestCount }}
</span> </span>
@ -271,13 +271,6 @@
--faintLink: var(--popoverFaintLink, $fallback--faint); --faintLink: var(--popoverFaintLink, $fallback--faint);
--lightText: var(--popoverLightText, $fallback--lightText); --lightText: var(--popoverLightText, $fallback--lightText);
--icon: var(--popoverIcon, $fallback--icon); --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 { .side-drawer-logo-wrapper {