mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-12 05:38:55 +09:00
Better renote annotation rendering
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
parent
93898b7a5f
commit
c80b288db3
@ -4,15 +4,13 @@
|
|||||||
<x-sub :note="p.reply"/>
|
<x-sub :note="p.reply"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="renote" v-if="isRenote">
|
<div class="renote" v-if="isRenote">
|
||||||
<p>
|
<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
|
||||||
<router-link class="avatar-anchor" :to="note.user | userPage" v-user-preview="note.userId">
|
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
|
||||||
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=32`" alt="avatar"/>
|
</router-link>
|
||||||
</router-link>
|
%fa:retweet%
|
||||||
%fa:retweet%
|
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
|
||||||
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
|
<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
|
||||||
<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
|
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
|
||||||
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
|
|
||||||
</p>
|
|
||||||
<mk-time :time="note.createdAt"/>
|
<mk-time :time="note.createdAt"/>
|
||||||
</div>
|
</div>
|
||||||
<article>
|
<article>
|
||||||
@ -324,36 +322,44 @@ root(isDark)
|
|||||||
border-radius 4px
|
border-radius 4px
|
||||||
|
|
||||||
> .renote
|
> .renote
|
||||||
|
display flex
|
||||||
|
align-items baseline
|
||||||
|
padding 16px 32px
|
||||||
|
line-height 28px
|
||||||
color #9dbb00
|
color #9dbb00
|
||||||
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||||
|
|
||||||
> p
|
.avatar-anchor
|
||||||
margin 0
|
display inline-block
|
||||||
padding 16px 32px
|
|
||||||
line-height 28px
|
|
||||||
|
|
||||||
.avatar-anchor
|
.avatar
|
||||||
display inline-block
|
vertical-align bottom
|
||||||
|
width 28px
|
||||||
|
height 28px
|
||||||
|
margin 0 8px 0 0
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
.avatar
|
[data-fa]
|
||||||
vertical-align bottom
|
margin-right 4px
|
||||||
width 28px
|
|
||||||
height 28px
|
|
||||||
margin 0 8px 0 0
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
[data-fa]
|
> span
|
||||||
margin-right 4px
|
flex-shrink 0
|
||||||
|
|
||||||
.name
|
&:last-of-type
|
||||||
font-weight bold
|
margin-right 8px
|
||||||
|
|
||||||
|
.name
|
||||||
|
overflow hidden
|
||||||
|
flex-shrink 1
|
||||||
|
text-overflow ellipsis
|
||||||
|
white-space nowrap
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
> .mk-time
|
> .mk-time
|
||||||
position absolute
|
display block
|
||||||
top 16px
|
margin-left auto
|
||||||
right 32px
|
flex-shrink 0
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
line-height 28px
|
|
||||||
|
|
||||||
& + article
|
& + article
|
||||||
padding-top 8px
|
padding-top 8px
|
||||||
|
@ -4,15 +4,13 @@
|
|||||||
<x-sub :note="p.reply"/>
|
<x-sub :note="p.reply"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="renote" v-if="isRenote">
|
<div class="renote" v-if="isRenote">
|
||||||
<p>
|
<router-link class="avatar-anchor" :to="note.user | userPage">
|
||||||
<router-link class="avatar-anchor" :to="note.user | userPage">
|
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
||||||
<img class="avatar" :src="`${note.user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
|
</router-link>
|
||||||
</router-link>
|
%fa:retweet%
|
||||||
%fa:retweet%
|
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
|
||||||
<span>{{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }}</span>
|
<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
|
||||||
<router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link>
|
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
|
||||||
<span>{{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}</span>
|
|
||||||
</p>
|
|
||||||
<mk-time :time="note.createdAt"/>
|
<mk-time :time="note.createdAt"/>
|
||||||
</div>
|
</div>
|
||||||
<article>
|
<article>
|
||||||
@ -251,42 +249,47 @@ export default Vue.extend({
|
|||||||
font-size 16px
|
font-size 16px
|
||||||
|
|
||||||
> .renote
|
> .renote
|
||||||
|
display flex
|
||||||
|
align-items baseline
|
||||||
|
padding 8px 16px
|
||||||
|
line-height 28px
|
||||||
color #9dbb00
|
color #9dbb00
|
||||||
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
|
||||||
|
|
||||||
> p
|
@media (min-width 500px)
|
||||||
margin 0
|
padding 16px
|
||||||
padding 8px 16px
|
|
||||||
line-height 28px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
.avatar-anchor
|
||||||
padding 16px
|
display inline-block
|
||||||
|
|
||||||
.avatar-anchor
|
.avatar
|
||||||
display inline-block
|
vertical-align bottom
|
||||||
|
width 28px
|
||||||
|
height 28px
|
||||||
|
margin 0 8px 0 0
|
||||||
|
border-radius 6px
|
||||||
|
|
||||||
.avatar
|
[data-fa]
|
||||||
vertical-align bottom
|
margin-right 4px
|
||||||
width 28px
|
|
||||||
height 28px
|
|
||||||
margin 0 8px 0 0
|
|
||||||
border-radius 6px
|
|
||||||
|
|
||||||
[data-fa]
|
> span
|
||||||
margin-right 4px
|
flex-shrink 0
|
||||||
|
|
||||||
.name
|
&:last-of-type
|
||||||
font-weight bold
|
margin-right 8px
|
||||||
|
|
||||||
|
.name
|
||||||
|
overflow hidden
|
||||||
|
flex-shrink 1
|
||||||
|
text-overflow ellipsis
|
||||||
|
white-space nowrap
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
> .mk-time
|
> .mk-time
|
||||||
position absolute
|
display block
|
||||||
top 8px
|
margin-left auto
|
||||||
right 16px
|
flex-shrink 0
|
||||||
font-size 0.9em
|
font-size 0.9em
|
||||||
line-height 28px
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
top 16px
|
|
||||||
|
|
||||||
& + article
|
& + article
|
||||||
padding-top 8px
|
padding-top 8px
|
||||||
|
Loading…
Reference in New Issue
Block a user