Skip to content
Snippets Groups Projects
Commit 6a5116c3 authored by Shpuld Shpludson's avatar Shpuld Shpludson
Browse files

Fixes to notification style issues mostly

parent 8835c985
No related branches found
No related tags found
1 merge request!223Rewrite status and notifications and preview, graceful handling of linkless attachments
Pipeline #
Hide whitespace changes
Inline Side-by-side
src/App.scss
+ 5
− 0
View file @ 6a5116c3
......@@ -391,6 +391,11 @@ nav {
}
}
.faint {
color: $fallback--faint;
color: var($fallback--faint, --faint);
}
@media all and (max-width: 959px) {
.mobile-hidden {
display: none;
......
src/components/notification/notification.vue
+ 18
− 16
View file @ 6a5116c3
<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>
......
src/components/notifications/notifications.scss
+ 127
− 121
View file @ 6a5116c3
......@@ -46,161 +46,167 @@
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;
.unseen {
border-left: 4px solid $fallback--cRed;
border-left: 4px solid var(--cRed, $fallback--cRed);
padding-left: 0;
}
}
.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;
}
}
}
.notification {
box-sizing: border-box;
display: flex;
border-bottom: 1px solid;
border-bottom-color: inherit;
padding-left: 4px;
.follow-text {
padding: 0.5em 0;
}
.avatar-compact {
width: 32px;
height: 32px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
overflow: hidden;
line-height: 0;
.status-el {
flex: 1;
&.animated::before {
display: none;
}
}
time {
white-space: nowrap;
&:hover .animated.avatar {
canvas {
display: none;
}
.notification-right {
flex: 1;
padding-left: 0.8em;
min-width: 0;
img {
visibility: visible;
}
}
.notification-details {
min-width: 0px;
word-wrap: break-word;
line-height:18px;
position: relative;
overflow: hidden;
width: 100%;
flex: 1;
flex-wrap: nowrap;
.notification-usercard {
margin: 0;
}
.username {
font-weight: bolder;
.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);
}
.timeago {
float: right;
font-size: 12px;
padding: 0;
.status-content.media-body {
margin: 0;
}
}
}
.icon-retweet.lit {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
.follow-text {
padding: 0.5em 0;
}
.icon-user-plus.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
.status-el {
flex: 1;
}
.icon-reply.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
time {
white-space: nowrap;
}
.icon-star.lit {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
.notification-right {
flex: 1;
padding-left: 0.8em;
min-width: 0;
}
.status-content {
margin: 0;
max-height: 300px;
}
.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;
h1 {
word-break: break-all;
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
small {
font-weight: lighter;
}
}
.name-and-action {
flex: 1;
}
p {
margin: 0;
margin-top: 0;
margin-bottom: 0.3em;
}
.username {
font-weight: bolder;
}
.timeago {
float: right;
font-size: 12px;
}
&:last-child {
border-bottom: none;
.icon-retweet.lit {
color: $fallback--cGreen;
color: var(--cGreen, $fallback--cGreen);
}
}
.notification-content {
max-height: 12em;
overflow-y: hidden;
//text-overflow: ellipsis;
.icon-user-plus.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
img {
object-fit: contain;
.icon-reply.lit {
color: $fallback--cBlue;
color: var(--cBlue, $fallback--cBlue);
}
}
.unseen {
border-left: 4px solid $fallback--cRed;
border-left: 4px solid var(--cRed, $fallback--cRed);
padding-left: 6px;
}
}
.icon-star.lit {
color: orange;
color: $fallback--cOrange;
color: var(--cOrange, $fallback--cOrange);
}
.notification {
.avatar-compact {
margin-top: 0.3em;
width: 32px;
height: 32px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
overflow: hidden;
line-height: 0;
.status-content {
margin: 0;
max-height: 300px;
}
&.animated::before {
display: none;
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;
}
}
&:hover .animated.avatar {
canvas {
display: none;
}
img {
visibility: visible;
}
&:last-child {
border-bottom: none;
}
}
.notification-usercard {
margin-left: 0.8em;
.notification-content {
max-height: 12em;
overflow-y: hidden;
//text-overflow: ellipsis;
img {
object-fit: contain;
}
}
src/components/status/status.vue
+ 9
− 3
View file @ 6a5116c3
......@@ -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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment