forked from AkkomaGang/akkoma-fe
shuffle around status.vue so it looks better on mobile
This commit is contained in:
parent
ef41494bad
commit
a4c9f05808
2 changed files with 114 additions and 144 deletions
|
|
@ -83,7 +83,7 @@
|
|||
.status-username {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 85%;
|
||||
max-width: 100%;
|
||||
font-weight: bold;
|
||||
flex-shrink: 1;
|
||||
margin-right: 0.4em;
|
||||
|
|
|
|||
|
|
@ -166,18 +166,6 @@
|
|||
>
|
||||
{{ status.user.name }}
|
||||
</h4>
|
||||
<router-link
|
||||
class="account-name"
|
||||
:title="status.user.screen_name_ui"
|
||||
:to="userProfileLink"
|
||||
>
|
||||
{{ status.user.screen_name_ui }}
|
||||
</router-link>
|
||||
<img
|
||||
v-if="!!(status.user && status.user.favicon)"
|
||||
class="status-favicon"
|
||||
:src="status.user.favicon"
|
||||
>
|
||||
</div>
|
||||
|
||||
<span class="heading-right">
|
||||
|
|
@ -190,143 +178,68 @@
|
|||
:auto-update="60"
|
||||
/>
|
||||
</router-link>
|
||||
<span
|
||||
v-if="status.visibility"
|
||||
class="visibility-icon"
|
||||
:title="visibilityLocalized"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
:icon="visibilityIcon(status.visibility)"
|
||||
/>
|
||||
</span>
|
||||
<button
|
||||
v-if="expandable && !isPreview"
|
||||
class="button-unstyled"
|
||||
:title="$t('status.expand')"
|
||||
@click.prevent="toggleExpanded"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
icon="plus-square"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="unmuted"
|
||||
class="button-unstyled"
|
||||
@click.prevent="toggleMute"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="eye-slash"
|
||||
class="fa-scale-110"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="inThreadForest && replies && replies.length && !simpleTree"
|
||||
class="button-unstyled"
|
||||
:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
|
||||
:aria-expanded="threadShowing ? 'true' : 'false'"
|
||||
@click.prevent="toggleThreadDisplay"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="dive && !simpleTree"
|
||||
class="button-unstyled"
|
||||
:title="$t('status.show_only_conversation_under_this')"
|
||||
@click.prevent="dive"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
:icon="'angle-double-right'"
|
||||
/>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="isReply || hasMentionsLine"
|
||||
class="heading-reply-row"
|
||||
>
|
||||
<span
|
||||
v-if="isReply"
|
||||
class="glued-label reply-glued-label"
|
||||
<div class="heading-name-row">
|
||||
<router-link
|
||||
class="account-name"
|
||||
:title="status.user.screen_name_ui"
|
||||
:to="userProfileLink"
|
||||
>
|
||||
<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)"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="reply"
|
||||
flip="horizontal"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<span
|
||||
class="reply-to-text"
|
||||
>
|
||||
{{ $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>
|
||||
<MentionLink
|
||||
:content="replyToName"
|
||||
:url="replyProfileLink"
|
||||
:user-id="status.in_reply_to_user_id"
|
||||
:user-screen-name="status.in_reply_to_screen_name"
|
||||
{{ status.user.screen_name_ui }}
|
||||
</router-link>
|
||||
<img
|
||||
v-if="!!(status.user && status.user.favicon)"
|
||||
class="status-favicon"
|
||||
:src="status.user.favicon"
|
||||
>
|
||||
<span
|
||||
v-if="status.visibility"
|
||||
class="visibility-icon"
|
||||
:title="visibilityLocalized"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
:icon="visibilityIcon(status.visibility)"
|
||||
/>
|
||||
</span>
|
||||
|
||||
<!-- This little wrapper is made for sole purpose of "gluing" -->
|
||||
<!-- "Mentions" label to the first mention -->
|
||||
<span
|
||||
v-if="hasMentionsLine"
|
||||
class="glued-label"
|
||||
<button
|
||||
v-if="unmuted"
|
||||
class="button-unstyled"
|
||||
@click.prevent="toggleMute"
|
||||
>
|
||||
<span
|
||||
class="mentions"
|
||||
:aria-label="$t('tool_tip.mentions')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
>
|
||||
<span
|
||||
class="mentions-text"
|
||||
>
|
||||
{{ $t('status.mentions') }}
|
||||
</span>
|
||||
</span>
|
||||
<MentionsLine
|
||||
v-if="hasMentionsLine"
|
||||
:mentions="mentionsLine.slice(0, 1)"
|
||||
class="mentions-line-first"
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="eye-slash"
|
||||
class="fa-scale-110"
|
||||
/>
|
||||
</span>
|
||||
<MentionsLine
|
||||
v-if="hasMentionsLine"
|
||||
:mentions="mentionsLine.slice(1)"
|
||||
class="mentions-line"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="inThreadForest && replies && replies.length && !simpleTree"
|
||||
class="button-unstyled"
|
||||
:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
|
||||
:aria-expanded="threadShowing ? 'true' : 'false'"
|
||||
@click.prevent="toggleThreadDisplay"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
v-if="dive && !simpleTree"
|
||||
class="button-unstyled"
|
||||
:title="$t('status.show_only_conversation_under_this')"
|
||||
@click.prevent="dive"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110"
|
||||
:icon="'angle-double-right'"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -420,7 +333,64 @@
|
|||
v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
|
||||
:status="status"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="isReply || hasMentionsLine"
|
||||
class="footing-reply-row"
|
||||
>
|
||||
<button
|
||||
v-if="expandable && !isPreview"
|
||||
class="button-unstyled"
|
||||
:title="$t('status.expand')"
|
||||
@click.prevent="toggleExpanded"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="reply"
|
||||
flip="horizontal"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<span
|
||||
class="reply-to-text"
|
||||
>
|
||||
{{ $t('status.reply_to') }}
|
||||
</span>
|
||||
</button>
|
||||
{{ ' ' }}
|
||||
<MentionLink
|
||||
:content="replyToName"
|
||||
:url="replyProfileLink"
|
||||
:user-id="status.in_reply_to_user_id"
|
||||
:user-screen-name="status.in_reply_to_screen_name"
|
||||
/>
|
||||
<!-- This little wrapper is made for sole purpose of "gluing" -->
|
||||
<!-- "Mentions" label to the first mention -->
|
||||
<span
|
||||
v-if="hasMentionsLine"
|
||||
class="glued-label"
|
||||
>
|
||||
<span
|
||||
class="mentions"
|
||||
:aria-label="$t('tool_tip.mentions')"
|
||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
||||
>
|
||||
<span
|
||||
class="mentions-text"
|
||||
>
|
||||
{{ $t('status.mentions') }}
|
||||
</span>
|
||||
</span>
|
||||
<MentionsLine
|
||||
v-if="hasMentionsLine"
|
||||
:mentions="mentionsLine.slice(0, 1)"
|
||||
class="mentions-line-first"
|
||||
/>
|
||||
</span>
|
||||
<MentionsLine
|
||||
v-if="hasMentionsLine"
|
||||
:mentions="mentionsLine.slice(1)"
|
||||
class="mentions-line"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="!noHeading && !isPreview"
|
||||
class="status-actions"
|
||||
|
|
|
|||
Loading…
Reference in a new issue