alignment fixes

This commit is contained in:
Henry Jameson 2020-06-06 23:08:52 +03:00
parent de3a376beb
commit ebf2ce84fd
3 changed files with 54 additions and 22 deletions

View file

@ -36,6 +36,8 @@
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
word-wrap: break-word;
word-break: break-word;
&:hover .animated.avatar { &:hover .animated.avatar {
canvas { canvas {
@ -46,10 +48,6 @@
} }
} }
.muted {
padding: .25em .6em;
}
.non-mention { .non-mention {
display: flex; display: flex;
flex: 1; flex: 1;

View file

@ -17,7 +17,7 @@
</div> </div>
<template v-if="muted && !isPreview"> <template v-if="muted && !isPreview">
<div class="media status container muted"> <div class="media status container muted">
<small> <small class="username">
<i <i
v-if="muted && retweet" v-if="muted && retweet"
class="button-icon icon-retweet" class="button-icon icon-retweet"
@ -27,18 +27,23 @@
</router-link> </router-link>
</small> </small>
<small <small
v-if="showReasonMutedThread && muteWordHits.length === 0" v-if="showReasonMutedThread"
class="muted-thread" class="mute-thread"
> >
{{ $t('status.thread_muted') }} {{ $t('status.thread_muted') }}
</small> </small>
<small <small
v-if="showReasonMutedThread && muteWordHits.length > 0" v-if="showReasonMutedThread && muteWordHits.length > 0"
class="muted-Thread" class="mute-thread"
> >
{{ $t('status.thread_muted_and_words') }} {{ $t('status.thread_muted_and_words') }}
</small> </small>
<small class="mute-words">{{ muteWordHits.join(', ') }}</small> <small
class="mute-words"
:title="muteWordHits.join(', ')"
>
{{ muteWordHits.join(', ') }}
</small>
<a <a
href="#" href="#"
class="unmute" class="unmute"
@ -653,19 +658,48 @@ $status-margin: 0.75em;
} }
.muted { .muted {
padding: 0.25em 0.5em; padding: .25em .6em;
button { 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;
}
.username, .mute-words {
text-overflow: ellipsis;
overflow: hidden;
}
.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; margin-left: auto;
}
.muted-thread, .mute-words {
margin-left: 10px;
}
}
a.unmute {
display: block; display: block;
margin-left: auto; margin-left: auto;
}
} }
.reply-body { .reply-body {

View file

@ -622,8 +622,8 @@
"unmute_conversation": "Unmute conversation", "unmute_conversation": "Unmute conversation",
"status_unavailable": "Status unavailable", "status_unavailable": "Status unavailable",
"copy_link": "Copy link to status", "copy_link": "Copy link to status",
"thread_muted": "Conversation muted", "thread_muted": "Thread muted",
"thread_muted_and_words": "Conversation muted, contains filtered words:" "thread_muted_and_words": ", has words:"
}, },
"user_card": { "user_card": {
"approve": "Approve", "approve": "Approve",