[Client] ✌️
This commit is contained in:
syuilo
parent
7c6357c633
commit
b2f696bdde
1 changed files with 24 additions and 17 deletions
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue