diff options
| -rw-r--r-- | src/components/notifications/notifications.scss | 6 | ||||
| -rw-r--r-- | src/components/status/status.vue | 62 | ||||
| -rw-r--r-- | src/i18n/en.json | 4 |
3 files changed, 52 insertions, 20 deletions
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 9efcfcf8..b675af5a 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -36,6 +36,8 @@ border-bottom: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); + word-wrap: break-word; + word-break: break-word; &:hover .animated.avatar { canvas { @@ -46,10 +48,6 @@ } } - .muted { - padding: .25em .6em; - } - .non-mention { display: flex; flex: 1; 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 { diff --git a/src/i18n/en.json b/src/i18n/en.json index 61b818a6..5bcf074b 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -622,8 +622,8 @@ "unmute_conversation": "Unmute conversation", "status_unavailable": "Status unavailable", "copy_link": "Copy link to status", - "thread_muted": "Conversation muted", - "thread_muted_and_words": "Conversation muted, contains filtered words:" + "thread_muted": "Thread muted", + "thread_muted_and_words": ", has words:" }, "user_card": { "approve": "Approve", |