diff --git a/src/web/app/common/tags/signin.tag b/src/web/app/common/tags/signin.tag index 0aac32991..f25d99974 100644 --- a/src/web/app/common/tags/signin.tag +++ b/src/web/app/common/tags/signin.tag @@ -24,7 +24,7 @@ display block margin 12px 0 - i + [data-fa] display block pointer-events none position absolute diff --git a/src/web/app/common/tags/signup.tag b/src/web/app/common/tags/signup.tag index 67b8796a6..3c9810872 100644 --- a/src/web/app/common/tags/signup.tag +++ b/src/web/app/common/tags/signup.tag @@ -182,7 +182,7 @@ this.passwordRetypeState = null; this.recaptchaed = false; - window.onEecaptchaed = () => { + window.onRecaptchaed = () => { this.recaptchaed = true; this.update(); }; diff --git a/src/web/app/common/tags/url.tag b/src/web/app/common/tags/url.tag index 330acf821..2690afc5d 100644 --- a/src/web/app/common/tags/url.tag +++ b/src/web/app/common/tags/url.tag @@ -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> :scope word-break break-all > a - &:after - content "\f14c" - display inline-block + > [data-fa] padding-left 2px - font-family FontAwesome font-size .9em font-weight 400 font-style normal diff --git a/src/web/app/desktop/tags/notifications.tag b/src/web/app/desktop/tags/notifications.tag index d0e994063..65334ddb2 100644 --- a/src/web/app/desktop/tags/notifications.tag +++ b/src/web/app/desktop/tags/notifications.tag @@ -8,7 +8,10 @@ <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> </a> <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> </virtual> <virtual if={ notification.type == 'repost' }> @@ -16,7 +19,10 @@ <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> </a> <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> </virtual> <virtual if={ notification.type == 'quote' }> @@ -24,7 +30,8 @@ <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> </a> <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> </virtual> <virtual if={ notification.type == 'follow' }> @@ -40,7 +47,8 @@ <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> </a> <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> </virtual> <virtual if={ notification.type == 'mention' }> @@ -48,7 +56,8 @@ <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> </a> <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> </virtual> <virtual if={ notification.type == 'poll_vote' }> @@ -56,11 +65,17 @@ <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/> </a> <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> </virtual> </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> </div> <button class="more { fetching: fetchingMoreNotifications }" if={ moreNotifications } onclick={ fetchMoreNotifications } disabled={ fetchingMoreNotifications }> @@ -129,20 +144,13 @@ .post-ref color rgba(0, 0, 0, 0.7) - &:before, &:after - font-family FontAwesome + [data-fa] font-size 1em font-weight normal font-style normal display inline-block margin-right 3px - &:before - content "\f10d" - - &:after - content "\f10e" - &.repost, &.quote .text p i color #77B255 @@ -168,7 +176,7 @@ span margin 0 16px - i + [data-fa] margin-right 8px > .more diff --git a/src/web/app/desktop/tags/post-detail.tag b/src/web/app/desktop/tags/post-detail.tag index d91585650..386e57baf 100644 --- a/src/web/app/desktop/tags/post-detail.tag +++ b/src/web/app/desktop/tags/post-detail.tag @@ -124,7 +124,7 @@ margin 0 8px 0 0 border-radius 6px - i + [data-fa] margin-right 4px .name @@ -205,16 +205,6 @@ font-size 1.5em 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 margin-top 8px diff --git a/src/web/app/desktop/tags/timeline.tag b/src/web/app/desktop/tags/timeline.tag index 81c16591f..08e658a3c 100644 --- a/src/web/app/desktop/tags/timeline.tag +++ b/src/web/app/desktop/tags/timeline.tag @@ -23,7 +23,7 @@ span margin 0 16px - i + [data-fa] margin-right 8px > footer @@ -203,7 +203,7 @@ margin 0 8px 0 0 border-radius 6px - i + [data-fa] margin-right 4px .name @@ -324,16 +324,6 @@ mk-url-preview 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 margin 0 diff --git a/src/web/app/desktop/tags/ui.tag b/src/web/app/desktop/tags/ui.tag index cb5b1ec72..039880918 100644 --- a/src/web/app/desktop/tags/ui.tag +++ b/src/web/app/desktop/tags/ui.tag @@ -678,7 +678,7 @@ font-family Meiryo, sans-serif text-decoration none - i + [data-fa] margin-left 8px > .avatar diff --git a/src/web/app/mobile/tags/notification-preview.tag b/src/web/app/mobile/tags/notification-preview.tag index 373b1f157..ab923ea9d 100644 --- a/src/web/app/mobile/tags/notification-preview.tag +++ b/src/web/app/mobile/tags/notification-preview.tag @@ -3,14 +3,14 @@ <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <div class="text"> <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> </virtual> <virtual if={ notification.type == 'repost' }> <img class="avatar" src={ notification.post.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <div class="text"> <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> </virtual> <virtual if={ notification.type == 'quote' }> @@ -44,7 +44,7 @@ <img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/> <div class="text"> <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> </virtual> <style> @@ -82,20 +82,13 @@ .post-ref - &:before, &:after - font-family FontAwesome + [data-fa] font-size 1em font-weight normal font-style normal display inline-block margin-right 3px - &:before - content "\f10d" - - &:after - content "\f10e" - &.repost, &.quote .text p i color #77B255 diff --git a/src/web/app/mobile/tags/notification.tag b/src/web/app/mobile/tags/notification.tag index de98f2554..de44caea2 100644 --- a/src/web/app/mobile/tags/notification.tag +++ b/src/web/app/mobile/tags/notification.tag @@ -9,7 +9,9 @@ <mk-reaction-icon reaction={ notification.reaction }/> <a href={ '/' + notification.user.username }>{ notification.user.name }</a> </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> </virtual> <virtual if={ notification.type == 'repost' }> @@ -21,7 +23,9 @@ %fa:retweet% <a href={ '/' + notification.post.user.username }>{ notification.post.user.name }</a> </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> </virtual> <virtual if={ notification.type == 'quote' }> @@ -80,7 +84,9 @@ %fa:chart-pie% <a href={ '/' + notification.user.username }>{ notification.user.name }</a> </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> </virtual> <style> @@ -132,20 +138,13 @@ .post-ref color rgba(0, 0, 0, 0.7) - &:before, &:after - font-family FontAwesome + [data-fa] font-size 1em font-weight normal font-style normal display inline-block margin-right 3px - &:before - content "\f10d" - - &:after - content "\f10e" - &.repost, &.quote .text p i color #77B255 diff --git a/src/web/app/mobile/tags/post-detail.tag b/src/web/app/mobile/tags/post-detail.tag index cfc5ee2f4..ceac56340 100644 --- a/src/web/app/mobile/tags/post-detail.tag +++ b/src/web/app/mobile/tags/post-detail.tag @@ -126,7 +126,7 @@ margin 0 8px 0 0 border-radius 6px - i + [data-fa] margin-right 4px .name @@ -208,16 +208,6 @@ @media (min-width 500px) 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 margin-top 8px diff --git a/src/web/app/mobile/tags/timeline.tag b/src/web/app/mobile/tags/timeline.tag index 47d71d3d4..0f86a42ae 100644 --- a/src/web/app/mobile/tags/timeline.tag +++ b/src/web/app/mobile/tags/timeline.tag @@ -59,7 +59,7 @@ span margin 0 16px - i + [data-fa] margin-right 8px > footer @@ -242,7 +242,7 @@ margin 0 8px 0 0 border-radius 6px - i + [data-fa] margin-right 4px .name @@ -361,16 +361,6 @@ > .dummy 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 margin-top 8px