wip
This commit is contained in:
parent
25068f12f5
commit
7f3fb90b05
11 changed files with 58 additions and 92 deletions
|
@ -24,7 +24,7 @@
|
||||||
display block
|
display block
|
||||||
margin 12px 0
|
margin 12px 0
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
display block
|
display block
|
||||||
pointer-events none
|
pointer-events none
|
||||||
position absolute
|
position absolute
|
||||||
|
|
|
@ -182,7 +182,7 @@
|
||||||
this.passwordRetypeState = null;
|
this.passwordRetypeState = null;
|
||||||
this.recaptchaed = false;
|
this.recaptchaed = false;
|
||||||
|
|
||||||
window.onEecaptchaed = () => {
|
window.onRecaptchaed = () => {
|
||||||
this.recaptchaed = true;
|
this.recaptchaed = true;
|
||||||
this.update();
|
this.update();
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,14 +1,20 @@
|
||||||
<mk-url><a href={ url } target={ opts.target }><span class="schema">{ schema }//</span><span class="hostname">{ hostname }</span><span class="port" if={ port != '' }>:{ port }</span><span class="pathname" if={ pathname != '' }>{ pathname }</span><span class="query">{ query }</span><span class="hash">{ hash }</span></a>
|
<mk-url>
|
||||||
|
<a href={ url } target={ opts.target }>
|
||||||
|
<span class="schema">{ schema }//</span>
|
||||||
|
<span class="hostname">{ hostname }</span>
|
||||||
|
<span class="port" if={ port != '' }>:{ port }</span>
|
||||||
|
<span class="pathname" if={ pathname != '' }>{ pathname }</span>
|
||||||
|
<span class="query">{ query }</span>
|
||||||
|
<span class="hash">{ hash }</span>
|
||||||
|
%fa:external-link-square-alt%
|
||||||
|
</a>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
word-break break-all
|
word-break break-all
|
||||||
|
|
||||||
> a
|
> a
|
||||||
&:after
|
> [data-fa]
|
||||||
content "\f14c"
|
|
||||||
display inline-block
|
|
||||||
padding-left 2px
|
padding-left 2px
|
||||||
font-family FontAwesome
|
|
||||||
font-size .9em
|
font-size .9em
|
||||||
font-weight 400
|
font-weight 400
|
||||||
font-style normal
|
font-style normal
|
||||||
|
|
|
@ -8,7 +8,10 @@
|
||||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
|
||||||
|
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
|
||||||
|
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'repost' }>
|
<virtual if={ notification.type == 'repost' }>
|
||||||
|
@ -16,7 +19,10 @@
|
||||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
|
<p>%fa:retweet%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
|
||||||
|
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
|
||||||
|
%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'quote' }>
|
<virtual if={ notification.type == 'quote' }>
|
||||||
|
@ -24,7 +30,8 @@
|
||||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<p>%fa:quote-left%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
|
||||||
|
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'follow' }>
|
<virtual if={ notification.type == 'follow' }>
|
||||||
|
@ -40,7 +47,8 @@
|
||||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<p>%fa:reply%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
|
||||||
|
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'mention' }>
|
<virtual if={ notification.type == 'mention' }>
|
||||||
|
@ -48,7 +56,8 @@
|
||||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p><a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<p>%fa:at%<a href={ '/' + notification.post.user.username } data-user-preview={ notification.post.user_id }>{ notification.post.user.name }</a></p>
|
||||||
|
<a class="post-preview" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'poll_vote' }>
|
<virtual if={ notification.type == 'poll_vote' }>
|
||||||
|
@ -56,11 +65,17 @@
|
||||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<p>%fa:chart-pie%<a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p>
|
||||||
|
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
|
||||||
|
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
</div>
|
</div>
|
||||||
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }><span>%fa:angle-up%{ notification._datetext }</span><span>%fa:angle-down%{ notifications[i + 1]._datetext }</span></p>
|
<p class="date" if={ i != notifications.length - 1 && notification._date != notifications[i + 1]._date }>
|
||||||
|
<span>%fa:angle-up%{ notification._datetext }</span>
|
||||||
|
<span>%fa:angle-down%{ notifications[i + 1]._datetext }</span>
|
||||||
|
</p>
|
||||||
</virtual>
|
</virtual>
|
||||||
</div>
|
</div>
|
||||||
<button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
<button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }>
|
||||||
|
@ -129,20 +144,13 @@
|
||||||
.post-ref
|
.post-ref
|
||||||
color rgba(0, 0, 0, 0.7)
|
color rgba(0, 0, 0, 0.7)
|
||||||
|
|
||||||
&:before, &:after
|
[data-fa]
|
||||||
font-family FontAwesome
|
|
||||||
font-size 1em
|
font-size 1em
|
||||||
font-weight normal
|
font-weight normal
|
||||||
font-style normal
|
font-style normal
|
||||||
display inline-block
|
display inline-block
|
||||||
margin-right 3px
|
margin-right 3px
|
||||||
|
|
||||||
&:before
|
|
||||||
content "\f10d"
|
|
||||||
|
|
||||||
&:after
|
|
||||||
content "\f10e"
|
|
||||||
|
|
||||||
&.repost, &.quote
|
&.repost, &.quote
|
||||||
.text p i
|
.text p i
|
||||||
color #77B255
|
color #77B255
|
||||||
|
@ -168,7 +176,7 @@
|
||||||
span
|
span
|
||||||
margin 0 16px
|
margin 0 16px
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
||||||
> .more
|
> .more
|
||||||
|
|
|
@ -124,7 +124,7 @@
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
.name
|
.name
|
||||||
|
@ -205,16 +205,6 @@
|
||||||
font-size 1.5em
|
font-size 1.5em
|
||||||
color #717171
|
color #717171
|
||||||
|
|
||||||
.link
|
|
||||||
&:after
|
|
||||||
content "\f14c"
|
|
||||||
display inline-block
|
|
||||||
padding-left 2px
|
|
||||||
font-family FontAwesome
|
|
||||||
font-size .9em
|
|
||||||
font-weight 400
|
|
||||||
font-style normal
|
|
||||||
|
|
||||||
> mk-url-preview
|
> mk-url-preview
|
||||||
margin-top 8px
|
margin-top 8px
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
span
|
span
|
||||||
margin 0 16px
|
margin 0 16px
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
|
@ -203,7 +203,7 @@
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
.name
|
.name
|
||||||
|
@ -324,16 +324,6 @@
|
||||||
mk-url-preview
|
mk-url-preview
|
||||||
margin-top 8px
|
margin-top 8px
|
||||||
|
|
||||||
.link
|
|
||||||
&:after
|
|
||||||
content "\f14c"
|
|
||||||
display inline-block
|
|
||||||
padding-left 2px
|
|
||||||
font-family FontAwesome
|
|
||||||
font-size .9em
|
|
||||||
font-weight 400
|
|
||||||
font-style normal
|
|
||||||
|
|
||||||
> .channel
|
> .channel
|
||||||
margin 0
|
margin 0
|
||||||
|
|
||||||
|
|
|
@ -678,7 +678,7 @@
|
||||||
font-family Meiryo, sans-serif
|
font-family Meiryo, sans-serif
|
||||||
text-decoration none
|
text-decoration none
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-left 8px
|
margin-left 8px
|
||||||
|
|
||||||
> .avatar
|
> .avatar
|
||||||
|
|
|
@ -3,14 +3,14 @@
|
||||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p>
|
<p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p>
|
||||||
<p class="post-ref">{ getPostSummary(notification.post) }</p>
|
<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'repost' }>
|
<virtual if={ notification.type == 'repost' }>
|
||||||
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
<img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>%fa:retweet%{ notification.post.user.name }</p>
|
<p>%fa:retweet%{ notification.post.user.name }</p>
|
||||||
<p class="post-ref">{ getPostSummary(notification.post.repost) }</p>
|
<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%</p>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'quote' }>
|
<virtual if={ notification.type == 'quote' }>
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>%fa:chart-pie%{ notification.user.name }</p>
|
<p>%fa:chart-pie%{ notification.user.name }</p>
|
||||||
<p class="post-ref">{ getPostSummary(notification.post) }</p>
|
<p class="post-ref">%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%</p>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<style>
|
<style>
|
||||||
|
@ -82,20 +82,13 @@
|
||||||
|
|
||||||
.post-ref
|
.post-ref
|
||||||
|
|
||||||
&:before, &:after
|
[data-fa]
|
||||||
font-family FontAwesome
|
|
||||||
font-size 1em
|
font-size 1em
|
||||||
font-weight normal
|
font-weight normal
|
||||||
font-style normal
|
font-style normal
|
||||||
display inline-block
|
display inline-block
|
||||||
margin-right 3px
|
margin-right 3px
|
||||||
|
|
||||||
&:before
|
|
||||||
content "\f10d"
|
|
||||||
|
|
||||||
&:after
|
|
||||||
content "\f10e"
|
|
||||||
|
|
||||||
&.repost, &.quote
|
&.repost, &.quote
|
||||||
.text p i
|
.text p i
|
||||||
color #77B255
|
color #77B255
|
||||||
|
|
|
@ -9,7 +9,9 @@
|
||||||
<mk-reaction-icon reaction={ notification.reaction }/>
|
<mk-reaction-icon reaction={ notification.reaction }/>
|
||||||
<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
|
<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
|
||||||
</p>
|
</p>
|
||||||
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
|
||||||
|
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'repost' }>
|
<virtual if={ notification.type == 'repost' }>
|
||||||
|
@ -21,7 +23,9 @@
|
||||||
%fa:retweet%
|
%fa:retweet%
|
||||||
<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
|
<a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a>
|
||||||
</p>
|
</p>
|
||||||
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post.repost) }</a>
|
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
|
||||||
|
%fa:quote-left%{ getPostSummary(notification.post.repost) }%fa:quote-right%
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'quote' }>
|
<virtual if={ notification.type == 'quote' }>
|
||||||
|
@ -80,7 +84,9 @@
|
||||||
%fa:chart-pie%
|
%fa:chart-pie%
|
||||||
<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
|
<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
|
||||||
</p>
|
</p>
|
||||||
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>
|
||||||
|
%fa:quote-left%{ getPostSummary(notification.post) }%fa:quote-right%
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<style>
|
<style>
|
||||||
|
@ -132,20 +138,13 @@
|
||||||
.post-ref
|
.post-ref
|
||||||
color rgba(0, 0, 0, 0.7)
|
color rgba(0, 0, 0, 0.7)
|
||||||
|
|
||||||
&:before, &:after
|
[data-fa]
|
||||||
font-family FontAwesome
|
|
||||||
font-size 1em
|
font-size 1em
|
||||||
font-weight normal
|
font-weight normal
|
||||||
font-style normal
|
font-style normal
|
||||||
display inline-block
|
display inline-block
|
||||||
margin-right 3px
|
margin-right 3px
|
||||||
|
|
||||||
&:before
|
|
||||||
content "\f10d"
|
|
||||||
|
|
||||||
&:after
|
|
||||||
content "\f10e"
|
|
||||||
|
|
||||||
&.repost, &.quote
|
&.repost, &.quote
|
||||||
.text p i
|
.text p i
|
||||||
color #77B255
|
color #77B255
|
||||||
|
|
|
@ -126,7 +126,7 @@
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
.name
|
.name
|
||||||
|
@ -208,16 +208,6 @@
|
||||||
@media (min-width 500px)
|
@media (min-width 500px)
|
||||||
font-size 24px
|
font-size 24px
|
||||||
|
|
||||||
.link
|
|
||||||
&:after
|
|
||||||
content "\f14c"
|
|
||||||
display inline-block
|
|
||||||
padding-left 2px
|
|
||||||
font-family FontAwesome
|
|
||||||
font-size .9em
|
|
||||||
font-weight 400
|
|
||||||
font-style normal
|
|
||||||
|
|
||||||
> mk-url-preview
|
> mk-url-preview
|
||||||
margin-top 8px
|
margin-top 8px
|
||||||
|
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
span
|
span
|
||||||
margin 0 16px
|
margin 0 16px
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-right 8px
|
margin-right 8px
|
||||||
|
|
||||||
> footer
|
> footer
|
||||||
|
@ -242,7 +242,7 @@
|
||||||
margin 0 8px 0 0
|
margin 0 8px 0 0
|
||||||
border-radius 6px
|
border-radius 6px
|
||||||
|
|
||||||
i
|
[data-fa]
|
||||||
margin-right 4px
|
margin-right 4px
|
||||||
|
|
||||||
.name
|
.name
|
||||||
|
@ -361,16 +361,6 @@
|
||||||
> .dummy
|
> .dummy
|
||||||
display none
|
display none
|
||||||
|
|
||||||
.link
|
|
||||||
&:after
|
|
||||||
content "\f14c"
|
|
||||||
display inline-block
|
|
||||||
padding-left 2px
|
|
||||||
font-family FontAwesome
|
|
||||||
font-size .9em
|
|
||||||
font-weight 400
|
|
||||||
font-style normal
|
|
||||||
|
|
||||||
mk-url-preview
|
mk-url-preview
|
||||||
margin-top 8px
|
margin-top 8px
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue