commit: 0260693f5162ea8a73d2b359940781049a1b3e76
parent 394fd462dc48654ba7743bb9c2ac378f98f75bd4
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 10 Jun 2021 13:22:36 +0300
stylistic improvements for single-line mentions
Diffstat:
4 files changed, 62 insertions(+), 85 deletions(-)
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
@@ -32,6 +32,8 @@
& .short,
& .full {
+ white-space: nowrap;
+
&::before {
content: '@';
}
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -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 {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -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="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 }"
>
- <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 }"
+ <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>
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
@@ -54,7 +54,6 @@
<MentionsLine
v-if="!hideFirstMentions"
:mentions="mentions"
- class="mentions-line"
/>
</template>
</RichContent>
