From c80b288db30cc15aff78314373f7fd97494d86bf Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 21 Apr 2018 13:48:56 +0900 Subject: [PATCH] Better renote annotation rendering Co-Authored-By: tamaina --- .../desktop/views/components/notes.note.vue | 64 +++++++++-------- .../app/mobile/views/components/note.vue | 71 ++++++++++--------- 2 files changed, 72 insertions(+), 63 deletions(-) diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index d430eefb7..59cdc7a20 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -4,15 +4,13 @@
-

- - avatar - - %fa:retweet% - {{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }} - {{ note.user | userName }} - {{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }} -

+ + avatar + + %fa:retweet% + {{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }} + {{ note.user | userName }} + {{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}
@@ -324,36 +322,44 @@ root(isDark) border-radius 4px > .renote + display flex + align-items baseline + padding 16px 32px + line-height 28px color #9dbb00 background isDark ? linear-gradient(to bottom, #314027 0%, #282c37 100%) : linear-gradient(to bottom, #edfde2 0%, #fff 100%) - > p - margin 0 - padding 16px 32px - line-height 28px + .avatar-anchor + display inline-block - .avatar-anchor - display inline-block + .avatar + vertical-align bottom + width 28px + height 28px + margin 0 8px 0 0 + border-radius 6px - .avatar - vertical-align bottom - width 28px - height 28px - margin 0 8px 0 0 - border-radius 6px + [data-fa] + margin-right 4px - [data-fa] - margin-right 4px + > span + flex-shrink 0 - .name - font-weight bold + &:last-of-type + margin-right 8px + + .name + overflow hidden + flex-shrink 1 + text-overflow ellipsis + white-space nowrap + font-weight bold > .mk-time - position absolute - top 16px - right 32px + display block + margin-left auto + flex-shrink 0 font-size 0.9em - line-height 28px & + article padding-top 8px diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index 71fa43aea..6b7c64f04 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -4,15 +4,13 @@
-

- - avatar - - %fa:retweet% - {{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }} - {{ note.user | userName }} - {{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }} -

+ + avatar + + %fa:retweet% + {{ '%i18n:!@reposted-by%'.substr(0, '%i18n:!@reposted-by%'.indexOf('{')) }} + {{ note.user | userName }} + {{ '%i18n:!@reposted-by%'.substr('%i18n:!@reposted-by%'.indexOf('}') + 1) }}
@@ -251,42 +249,47 @@ export default Vue.extend({ font-size 16px > .renote + display flex + align-items baseline + padding 8px 16px + line-height 28px color #9dbb00 background linear-gradient(to bottom, #edfde2 0%, #fff 100%) - > p - margin 0 - padding 8px 16px - line-height 28px + @media (min-width 500px) + padding 16px - @media (min-width 500px) - padding 16px + .avatar-anchor + display inline-block - .avatar-anchor - display inline-block + .avatar + vertical-align bottom + width 28px + height 28px + margin 0 8px 0 0 + border-radius 6px - .avatar - vertical-align bottom - width 28px - height 28px - margin 0 8px 0 0 - border-radius 6px + [data-fa] + margin-right 4px - [data-fa] - margin-right 4px + > span + flex-shrink 0 - .name - font-weight bold + &:last-of-type + margin-right 8px + + .name + overflow hidden + flex-shrink 1 + text-overflow ellipsis + white-space nowrap + font-weight bold > .mk-time - position absolute - top 8px - right 16px + display block + margin-left auto + flex-shrink 0 font-size 0.9em - line-height 28px - - @media (min-width 500px) - top 16px & + article padding-top 8px