forked from AkkomaGang/akkoma-fe
Merge branch 'fix-chat-badge' into 'develop'
Few more minor fixes See merge request pleroma/pleroma-fe!1275
This commit is contained in:
commit
b485d21ba9
6 changed files with 50 additions and 42 deletions
21
src/App.scss
21
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;
|
||||
|
|
|
@ -138,11 +138,21 @@
|
|||
}
|
||||
|
||||
.chat-view-heading {
|
||||
box-sizing: border-box;
|
||||
position: static;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
border-radius: 0;
|
||||
|
||||
/* This practically overlays the panel heading color over panel background
|
||||
* color. This is needed because we allow transparent panel background and
|
||||
* it doesn't work well in this "disjointed panel header" case
|
||||
*/
|
||||
background:
|
||||
linear-gradient(to top, var(--panel), var(--panel)),
|
||||
linear-gradient(to top, var(--bg), var(--bg));
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.scrollable-message-list {
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -110,12 +110,23 @@
|
|||
}
|
||||
|
||||
.mobile-nav-button {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 0 1em;
|
||||
padding: 0 1em;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
padding: 0 .3em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item {
|
||||
/* moslty just to get rid of extra whitespaces */
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.alert-dot {
|
||||
border-radius: 100%;
|
||||
height: 8px;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
@ -272,12 +272,11 @@
|
|||
--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);
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 0.7rem;
|
||||
top: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.side-drawer-logo-wrapper {
|
||||
|
|
Loading…
Reference in a new issue