mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-12 05:38:55 +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

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

@ -4,7 +4,6 @@
<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>
@ -12,7 +11,6 @@
<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,13 +322,12 @@ root(isDark)
border-radius 4px border-radius 4px
> .renote > .renote
color #9dbb00 display flex
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%) align-items baseline
> p
margin 0
padding 16px 32px padding 16px 32px
line-height 28px line-height 28px
color #9dbb00
background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%)
.avatar-anchor .avatar-anchor
display inline-block display inline-block
@ -345,15 +342,24 @@ root(isDark)
[data-fa] [data-fa]
margin-right 4px margin-right 4px
> span
flex-shrink 0
&:last-of-type
margin-right 8px
.name .name
overflow hidden
flex-shrink 1
text-overflow ellipsis
white-space nowrap
font-weight bold 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

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

@ -4,7 +4,6 @@
<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>
@ -12,7 +11,6 @@
<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,13 +249,12 @@ export default Vue.extend({
font-size 16px font-size 16px
> .renote > .renote
color #9dbb00 display flex
background linear-gradient(to bottom, #edfde2 0%, #fff 100%) align-items baseline
> p
margin 0
padding 8px 16px padding 8px 16px
line-height 28px line-height 28px
color #9dbb00
background linear-gradient(to bottom, #edfde2 0%, #fff 100%)
@media (min-width 500px) @media (min-width 500px)
padding 16px padding 16px
@ -275,18 +272,24 @@ export default Vue.extend({
[data-fa] [data-fa]
margin-right 4px margin-right 4px
> span
flex-shrink 0
&:last-of-type
margin-right 8px
.name .name
overflow hidden
flex-shrink 1
text-overflow ellipsis
white-space nowrap
font-weight bold 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