diff options
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 62 |
1 files changed, 48 insertions, 14 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 3137cb9d..336f912a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -17,7 +17,7 @@ </div> <template v-if="muted && !isPreview"> <div class="media status container muted"> - <small> + <small class="username"> <i v-if="muted && retweet" class="button-icon icon-retweet" @@ -27,18 +27,23 @@ </router-link> </small> <small - v-if="showReasonMutedThread && muteWordHits.length === 0" - class="muted-thread" + v-if="showReasonMutedThread" + class="mute-thread" > {{ $t('status.thread_muted') }} </small> <small v-if="showReasonMutedThread && muteWordHits.length > 0" - class="muted-Thread" + class="mute-thread" > {{ $t('status.thread_muted_and_words') }} </small> - <small class="mute-words">{{ muteWordHits.join(', ') }}</small> + <small + class="mute-words" + :title="muteWordHits.join(', ')" + > + {{ muteWordHits.join(', ') }} + </small> <a href="#" class="unmute" @@ -653,19 +658,48 @@ $status-margin: 0.75em; } .muted { - padding: 0.25em 0.5em; - button { - margin-left: auto; + padding: .25em .6em; + height: 1.2em; + line-height: 1.2em; + text-overflow: ellipsis; + overflow: hidden; + display: flex; + flex-wrap: nowrap; + + .username, .mute-thread, .mute-words { + word-wrap: normal; + word-break: normal; + white-space: nowrap; } - .muted-thread, .mute-words { - margin-left: 10px; + .username, .mute-words { + text-overflow: ellipsis; + overflow: hidden; } -} -a.unmute { - display: block; - margin-left: auto; + .username { + flex: 0 1 auto; + margin-right: .2em; + } + + .mute-thread { + flex: 0 0 auto; + } + + .mute-words { + flex: 1 0 5em; + margin-left: .2em; + &::before { + content: ' ' + } + } + + .unmute { + flex: 0 0 auto; + margin-left: auto; + display: block; + margin-left: auto; + } } .reply-body { |