mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-04 01:38:54 +09:00
Code

Better renote annotation rendering

Browse Source 
Co-Authored-By: tamaina <tamaina@hotmail.co.jp>
This commit is contained in:
syuilo 2018-04-21 13:48:56 +09:00
parent 93898b7a5f
commit c80b288db3
2 changed files with 72 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/client/app/desktop/views/components/notes.note.vue
View File

@ -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

71
src/client/app/mobile/views/components/note.vue
View File

@ -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