stylistic improvements for single-line mentions
This commit is contained in:
Henry Jameson
parent
394fd462dc
commit
0260693f51
4 changed files with 62 additions and 85 deletions
|
|
@ -32,6 +32,8 @@
|
|||
|
||||
& .short,
|
||||
& .full {
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
content: '@';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -155,32 +155,17 @@ $status-margin: 0.75em;
|
|||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
& .heading-mentions-row,
|
||||
& .heading-reply-row {
|
||||
position: relative;
|
||||
align-content: baseline;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
line-height: 160%;
|
||||
max-width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.reply-to-and-accountname {
|
||||
display: flex;
|
||||
height: 18px;
|
||||
margin-right: 0.5em;
|
||||
max-width: 100%;
|
||||
|
||||
.reply-to-link {
|
||||
white-space: nowrap;
|
||||
word-break: break-word;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
& .reply-to-popover,
|
||||
& .reply-to-no-popover {
|
||||
min-width: 0;
|
||||
|
|
@ -219,6 +204,7 @@ $status-margin: 0.75em;
|
|||
|
||||
& .mentions,
|
||||
& .reply-to {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -228,8 +214,8 @@ $status-margin: 0.75em;
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mentions-separator {
|
||||
margin-left: 0.4em;
|
||||
.mentions-line {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.replies {
|
||||
|
|
|
|||
|
|
@ -221,81 +221,71 @@
|
|||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="heading-reply-row">
|
||||
<div
|
||||
v-if="isReply"
|
||||
class="reply-to-and-accountname"
|
||||
<div
|
||||
class="heading-reply-row"
|
||||
v-if="isReply || hasMentionsLine"
|
||||
>
|
||||
<StatusPopover
|
||||
v-if="!isPreview"
|
||||
:status-id="status.parent_visible && status.in_reply_to_status_id"
|
||||
class="reply-to-popover"
|
||||
style="min-width: 0"
|
||||
:class="{ '-strikethrough': !status.parent_visible }"
|
||||
<StatusPopover
|
||||
v-if="isReply && !isPreview"
|
||||
:status-id="status.parent_visible && status.in_reply_to_status_id"
|
||||
class="reply-to-popover"
|
||||
style="min-width: 0"
|
||||
:class="{ '-strikethrough': !status.parent_visible }"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled reply-to"
|
||||
:aria-label="$t('tool_tip.reply')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled reply-to"
|
||||
:aria-label="$t('tool_tip.reply')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="reply"
|
||||
flip="horizontal"
|
||||
/>
|
||||
<span
|
||||
class="faint-link reply-to-text"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="reply"
|
||||
flip="horizontal"
|
||||
/>
|
||||
<span
|
||||
class="faint-link reply-to-text"
|
||||
>
|
||||
{{ $t('status.reply_to') }}
|
||||
</span>
|
||||
</button>
|
||||
</StatusPopover>
|
||||
{{ $t('status.reply_to') }}
|
||||
</span>
|
||||
</button>
|
||||
</StatusPopover>
|
||||
|
||||
<span
|
||||
v-else
|
||||
class="reply-to-no-popover"
|
||||
>
|
||||
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="isReply"
|
||||
class="reply-to-no-popover"
|
||||
>
|
||||
<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
|
||||
</span>
|
||||
|
||||
<MentionLink
|
||||
class="mention-link"
|
||||
:content="replyToName"
|
||||
:url="replyProfileLink"
|
||||
:user-id="status.in_reply_to_user_id"
|
||||
:user-screen-name="status.in_reply_to_screen_name"
|
||||
:first-mention="false"
|
||||
<MentionLink
|
||||
:content="replyToName"
|
||||
:url="replyProfileLink"
|
||||
:user-id="status.in_reply_to_user_id"
|
||||
:user-screen-name="status.in_reply_to_screen_name"
|
||||
:first-mention="false"
|
||||
/>
|
||||
|
||||
<span
|
||||
v-if="hasMentionsLine"
|
||||
class="mentions"
|
||||
:aria-label="$t('tool_tip.mentions')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="at"
|
||||
/>
|
||||
<span
|
||||
v-if="isReply && hasMentionsLine"
|
||||
class="faint mentions-separator"
|
||||
class="faint-link mentions-text"
|
||||
>
|
||||
-
|
||||
{{ $t('status.mentions') }}
|
||||
</span>
|
||||
<span
|
||||
v-if="hasMentionsLine"
|
||||
>
|
||||
<span
|
||||
class="button-unstyled mentions"
|
||||
:aria-label="$t('tool_tip.reply')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="at"
|
||||
/>
|
||||
<span
|
||||
class="faint-link mentions-text"
|
||||
>
|
||||
{{ $t('status.mentions') }}
|
||||
</span>
|
||||
</span>
|
||||
<MentionsLine
|
||||
:mentions="mentionsLine"
|
||||
class="mentions-line"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<MentionsLine
|
||||
v-if="hasMentionsLine"
|
||||
:mentions="mentionsLine"
|
||||
class="mentions-line"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,6 @@
|
|||
<MentionsLine
|
||||
v-if="!hideFirstMentions"
|
||||
:mentions="mentions"
|
||||
class="mentions-line"
|
||||
/>
|
||||
</template>
|
||||
</RichContent>
|
||||
|
|
|
|||
Loading…
Reference in a new issue