forked from srxl/akkoma-fe
Fixes to notification style issues mostly
This commit is contained in:
shpuld
parent
8835c98529
commit
6a5116c349
4 changed files with 162 additions and 143 deletions
|
|
@ -391,6 +391,11 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
.faint {
|
||||
color: $fallback--faint;
|
||||
color: var($fallback--faint, --faint);
|
||||
}
|
||||
|
||||
@media all and (max-width: 959px) {
|
||||
.mobile-hidden {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,35 @@
|
|||
<template>
|
||||
<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
|
||||
<div class="non-mention" v-else>
|
||||
<a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
|
||||
<a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
|
||||
<StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
|
||||
</a>
|
||||
<div class='notification-right'>
|
||||
<div class="base03-border usercard" v-if="userExpanded">
|
||||
<div class="usercard notification-usercard" v-if="userExpanded">
|
||||
<user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
|
||||
</div>
|
||||
<span class="notification-details">
|
||||
<span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<span v-if="notification.type === 'favorite'">
|
||||
<i class="fa icon-star lit"></i>
|
||||
<small>{{$t('notifications.favorited_you')}}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'repeat'">
|
||||
<i class="fa icon-retweet lit"></i>
|
||||
<small>{{$t('notifications.repeated_you')}}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'follow'">
|
||||
<i class="fa icon-user-plus lit"></i>
|
||||
<small>{{$t('notifications.followed_you')}}</small>
|
||||
</span>
|
||||
<div class="name-and-action">
|
||||
<span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<span v-if="notification.type === 'favorite'">
|
||||
<i class="fa icon-star lit"></i>
|
||||
<small>{{$t('notifications.favorited_you')}}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'repeat'">
|
||||
<i class="fa icon-retweet lit"></i>
|
||||
<small>{{$t('notifications.repeated_you')}}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'follow'">
|
||||
<i class="fa icon-user-plus lit"></i>
|
||||
<small>{{$t('notifications.followed_you')}}</small>
|
||||
</span>
|
||||
</div>
|
||||
<small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
||||
</span>
|
||||
<div class="follow-text" v-if="notification.type === 'follow'">
|
||||
<router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
|
||||
</div>
|
||||
<status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
|
||||
<status v-else class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -46,138 +46,23 @@
|
|||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
line-height: 1.3em;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding-left: 4px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: inherit;
|
||||
|
||||
.non-mention {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0.6em;
|
||||
min-width: 0;
|
||||
.status-el {
|
||||
.status {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
padding: 0;
|
||||
.status-content.media-body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.follow-text {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.status-el {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notification-right {
|
||||
flex: 1;
|
||||
padding-left: 0.8em;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notification-details {
|
||||
min-width: 0px;
|
||||
word-wrap: break-word;
|
||||
line-height:18px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.username {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.timeago {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.icon-retweet.lit {
|
||||
color: $fallback--cGreen;
|
||||
color: var(--cGreen, $fallback--cGreen);
|
||||
}
|
||||
|
||||
.icon-user-plus.lit {
|
||||
color: $fallback--cBlue;
|
||||
color: var(--cBlue, $fallback--cBlue);
|
||||
}
|
||||
|
||||
.icon-reply.lit {
|
||||
color: $fallback--cBlue;
|
||||
color: var(--cBlue, $fallback--cBlue);
|
||||
}
|
||||
|
||||
.icon-star.lit {
|
||||
color: orange;
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
}
|
||||
|
||||
.status-content {
|
||||
margin: 0;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
word-break: break-all;
|
||||
margin: 0 0 0.3em;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
line-height:20px;
|
||||
small {
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
max-height: 12em;
|
||||
overflow-y: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.unseen {
|
||||
border-left: 4px solid $fallback--cRed;
|
||||
border-left: 4px solid var(--cRed, $fallback--cRed);
|
||||
padding-left: 6px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: inherit;
|
||||
padding-left: 4px;
|
||||
|
||||
.avatar-compact {
|
||||
margin-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
|
|
@ -188,7 +73,6 @@
|
|||
&.animated::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover .animated.avatar {
|
||||
|
|
@ -201,6 +85,128 @@
|
|||
}
|
||||
|
||||
.notification-usercard {
|
||||
margin-left: 0.8em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.non-mention {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0.6em;
|
||||
min-width: 0;
|
||||
.avatar-container {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.status-el {
|
||||
.status {
|
||||
padding: 0.25em 0;
|
||||
color: $fallback--faint;
|
||||
color: var($fallback--faint, --faint);
|
||||
}
|
||||
padding: 0;
|
||||
.status-content.media-body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.follow-text {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.status-el {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
time {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.notification-right {
|
||||
flex: 1;
|
||||
padding-left: 0.8em;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notification-details {
|
||||
min-width: 0px;
|
||||
word-wrap: break-word;
|
||||
line-height:18px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.name-and-action {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.timeago {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.icon-retweet.lit {
|
||||
color: $fallback--cGreen;
|
||||
color: var(--cGreen, $fallback--cGreen);
|
||||
}
|
||||
|
||||
.icon-user-plus.lit {
|
||||
color: $fallback--cBlue;
|
||||
color: var(--cBlue, $fallback--cBlue);
|
||||
}
|
||||
|
||||
.icon-reply.lit {
|
||||
color: $fallback--cBlue;
|
||||
color: var(--cBlue, $fallback--cBlue);
|
||||
}
|
||||
|
||||
.icon-star.lit {
|
||||
color: orange;
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
}
|
||||
|
||||
.status-content {
|
||||
margin: 0;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
word-break: break-all;
|
||||
margin: 0 0 0.3em;
|
||||
padding: 0;
|
||||
font-size: 1em;
|
||||
line-height:20px;
|
||||
small {
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
max-height: 12em;
|
||||
overflow-y: hidden;
|
||||
//text-overflow: ellipsis;
|
||||
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<template v-else>
|
||||
<div v-if="retweet && !noHeading" class="media container retweet-info">
|
||||
<StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
|
||||
<div class="media-body">
|
||||
<div class="media-body faint">
|
||||
<a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
|
||||
<i class='fa icon-retweet retweeted'></i>
|
||||
{{$t('timeline.repeated')}}
|
||||
|
|
@ -134,12 +134,13 @@
|
|||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
|
||||
margin-top: 0.5em;
|
||||
margin-left: 1em;
|
||||
margin-top: 0.25em;
|
||||
margin-left: 0.5em;
|
||||
z-index: 50;
|
||||
.status {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
min-width: 15em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -439,6 +440,11 @@ a.unmute {
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.status .avatar-compact {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue