diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag index b4920ffc2..a6c239efd 100644 --- a/src/web/app/desktop/tags/notifications.tag +++ b/src/web/app/desktop/tags/notifications.tag @@ -3,36 +3,42 @@ <virtual each={ notification, i in notifications }> <div class="notification { notification.type }"> <mk-time time={ notification.created_at }></mk-time> - <div class="main" if={ notification.type == 'like' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> + <virtual if={ notification.type == 'like' }> + <a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> <div class="text"> <p><i class="fa fa-thumbs-o-up"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> </div> - </div> - <div class="main" if={ notification.type == 'repost' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> + </virtual> + <virtual if={ notification.type == 'repost' }> + <a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> <div class="text"> <p><i class="fa fa-retweet"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a> </div> - </div> - <div class="main" if={ notification.type == 'quote' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> + </virtual> + <virtual if={ notification.type == 'quote' }> + <a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> <div class="text"> <p><i class="fa fa-quote-left"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> </div> - </div> - <div class="main" if={ notification.type == 'follow' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> + </virtual> + <virtual if={ notification.type == 'follow' }> + <a class="avatar-anchor" href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }><img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> <div class="text"> <p><i class="fa fa-user-plus"></i><a href={ CONFIG.url + '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p> </div> - </div> - <div class="main" if={ notification.type == 'reply' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> + </virtual> + <virtual if={ notification.type == 'reply' }> + <a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> <div class="text"> <p><i class="fa fa-reply"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> </div> - </div> - <div class="main" if={ notification.type == 'mention' }><a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> + </virtual> + <virtual if={ notification.type == 'mention' }> + <a class="avatar-anchor" href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }><img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/></a> <div class="text"> <p><i class="fa fa-at"></i><a href={ CONFIG.url + '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ CONFIG.url + '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a> </div> - </div> + </virtual> </div> <p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span><i class="fa fa-angle-up"></i>{ notification._datetext }</span><span><i class="fa fa-angle-down"></i>{ notifications[i + 1]._datetext }</span></p> </virtual> @@ -49,6 +55,7 @@ > .notification margin 0 padding 16px + word-wrap break-word font-size 0.9em border-bottom solid 1px rgba(0, 0, 0, 0.05) @@ -64,17 +71,17 @@ color rgba(0, 0, 0, 0.6) font-size small - > .main - word-wrap break-word - &:after content "" display block clear both - .avatar-anchor + > .avatar-anchor display block float left + position -webkit-sticky + position sticky + top 16px img min-width 36px @@ -83,7 +90,7 @@ max-height 36px border-radius 6px - .text + > .text float right width calc(100% - 36px) padding-left 8px