From 2fa82bde1602502a7649241882c7fadab1aae086 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Mon, 21 May 2018 14:57:27 +0900 Subject: [PATCH] :art: --- .../views/components/notes.note.sub.vue | 18 +++++++++- .../app/mobile/views/components/note.sub.vue | 36 +++++++++++++++++-- .../app/mobile/views/components/note.vue | 1 + 3 files changed, 52 insertions(+), 3 deletions(-) diff --git a/src/client/app/desktop/views/components/notes.note.sub.vue b/src/client/app/desktop/views/components/notes.note.sub.vue index 503982b1a8..5f0c46b4c6 100644 --- a/src/client/app/desktop/views/components/notes.note.sub.vue +++ b/src/client/app/desktop/views/components/notes.note.sub.vue @@ -4,6 +4,9 @@ <div class="main"> <header> <router-link class="name" :to="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</router-link> + <span class="is-admin" v-if="note.user.isAdmin">admin</span> + <span class="is-bot" v-if="note.user.isBot">bot</span> + <span class="is-cat" v-if="note.user.isCat">cat</span> <span class="username"><mk-acct :user="note.user"/></span> <div class="info"> <span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span> @@ -68,7 +71,6 @@ root(isDark) align-items baseline margin-bottom 2px white-space nowrap - line-height 21px > .name display block @@ -84,6 +86,20 @@ root(isDark) &:hover text-decoration underline + > .is-admin + > .is-bot + > .is-cat + margin 0 0.5em 0 0 + padding 1px 5px + font-size 10px + color isDark ? #758188 : #aaa + border solid 1px isDark ? #57616f : #ddd + border-radius 3px + + &.is-admin + border-color isDark ? #d42c41 : #f56a7b + color isDark ? #d42c41 : #f56a7b + > .username margin 0 .5em 0 0 color isDark ? #606984 : #d1d8da diff --git a/src/client/app/mobile/views/components/note.sub.vue b/src/client/app/mobile/views/components/note.sub.vue index 2fb3b2ffcc..149a78ecde 100644 --- a/src/client/app/mobile/views/components/note.sub.vue +++ b/src/client/app/mobile/views/components/note.sub.vue @@ -1,9 +1,13 @@ <template> -<div class="sub"> - <mk-avatar class="avatar" :user="note.user"/> +<div class="sub" :class="{ smart: $store.state.device.postStyle == 'smart' }"> + <mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle != 'smart'"/> <div class="main"> <header> + <mk-avatar class="avatar" :user="note.user" v-if="$store.state.device.postStyle == 'smart'"/> <router-link class="name" :to="note.user | userPage">{{ note.user | userName }}</router-link> + <span class="is-admin" v-if="note.user.isAdmin">admin</span> + <span class="is-bot" v-if="note.user.isBot">bot</span> + <span class="is-cat" v-if="note.user.isCat">cat</span> <span class="username"><mk-acct :user="note.user"/></span> <div class="info"> <span class="mobile" v-if="note.viaMobile">%fa:mobile-alt%</span> @@ -42,6 +46,13 @@ root(isDark) @media (min-width 600px) padding 24px 32px + &.smart + > .main + width 100% + + > header + align-items center + &:after content "" display block @@ -73,6 +84,13 @@ root(isDark) margin-bottom 2px white-space nowrap + > .avatar + flex-shrink 0 + margin-right 8px + width 18px + height 18px + border-radius 100% + > .name display block margin 0 0.5em 0 0 @@ -88,6 +106,20 @@ root(isDark) &:hover text-decoration underline + > .is-admin + > .is-bot + > .is-cat + margin 0 0.5em 0 0 + padding 1px 5px + font-size 10px + color isDark ? #758188 : #aaa + border solid 1px isDark ? #57616f : #ddd + border-radius 3px + + &.is-admin + border-color isDark ? #d42c41 : #f56a7b + color isDark ? #d42c41 : #f56a7b + > .username text-align left margin 0 diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index f947c9de37..de54daa99a 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -290,6 +290,7 @@ root(isDark) padding 16px 32px .avatar + flex-shrink 0 display inline-block width 20px height 20px