aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.scss5
-rw-r--r--src/components/notification/notification.vue34
-rw-r--r--src/components/notifications/notifications.scss248
-rw-r--r--src/components/status/status.vue12
4 files changed, 159 insertions, 140 deletions
diff --git a/src/App.scss b/src/App.scss
index e4b02017..5f03e2a1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -391,6 +391,11 @@ nav {
}
}
+.faint {
+ color: $fallback--faint;
+ color: var($fallback--faint, --faint);
+}
+
@media all and (max-width: 959px) {
.mobile-hidden {
display: none;
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 74563ff9..eed598a8 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -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>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 08420c86..9c9ea1d5 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -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;
}
}
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4d0b6f20..0dc33311 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -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>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 17:20:49 +0000