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 {
|
.status-username {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
max-width: 85%;
|
max-width: 100%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
flex-shrink: 1;
|
flex-shrink: 1;
|
||||||
margin-right: 0.4em;
|
margin-right: 0.4em;
|
||||||
|
|
|
||||||
|
|
@ -166,18 +166,6 @@
|
||||||
>
|
>
|
||||||
{{ status.user.name }}
|
{{ status.user.name }}
|
||||||
</h4>
|
</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>
|
</div>
|
||||||
|
|
||||||
<span class="heading-right">
|
<span class="heading-right">
|
||||||
|
|
@ -190,143 +178,68 @@
|
||||||
:auto-update="60"
|
:auto-update="60"
|
||||||
/>
|
/>
|
||||||
</router-link>
|
</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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div class="heading-name-row">
|
||||||
v-if="isReply || hasMentionsLine"
|
<router-link
|
||||||
class="heading-reply-row"
|
class="account-name"
|
||||||
>
|
:title="status.user.screen_name_ui"
|
||||||
<span
|
:to="userProfileLink"
|
||||||
v-if="isReply"
|
|
||||||
class="glued-label reply-glued-label"
|
|
||||||
>
|
>
|
||||||
<StatusPopover
|
{{ status.user.screen_name_ui }}
|
||||||
v-if="!isPreview"
|
</router-link>
|
||||||
:status-id="status.parent_visible && status.in_reply_to_status_id"
|
<img
|
||||||
class="reply-to-popover"
|
v-if="!!(status.user && status.user.favicon)"
|
||||||
style="min-width: 0"
|
class="status-favicon"
|
||||||
:class="{ '-strikethrough': !status.parent_visible }"
|
:src="status.user.favicon"
|
||||||
>
|
>
|
||||||
<button
|
<span
|
||||||
class="button-unstyled reply-to"
|
v-if="status.visibility"
|
||||||
:aria-label="$t('tool_tip.reply')"
|
class="visibility-icon"
|
||||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
:title="visibilityLocalized"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
class="fa-scale-110 fa-old-padding"
|
fixed-width
|
||||||
icon="reply"
|
class="fa-scale-110"
|
||||||
flip="horizontal"
|
:icon="visibilityIcon(status.visibility)"
|
||||||
/>
|
|
||||||
{{ ' ' }}
|
|
||||||
<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"
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
<button
|
||||||
<!-- This little wrapper is made for sole purpose of "gluing" -->
|
v-if="unmuted"
|
||||||
<!-- "Mentions" label to the first mention -->
|
class="button-unstyled"
|
||||||
<span
|
@click.prevent="toggleMute"
|
||||||
v-if="hasMentionsLine"
|
|
||||||
class="glued-label"
|
|
||||||
>
|
>
|
||||||
<span
|
<FAIcon
|
||||||
class="mentions"
|
fixed-width
|
||||||
:aria-label="$t('tool_tip.mentions')"
|
icon="eye-slash"
|
||||||
@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
|
class="fa-scale-110"
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="mentions-text"
|
|
||||||
>
|
|
||||||
{{ $t('status.mentions') }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
<MentionsLine
|
|
||||||
v-if="hasMentionsLine"
|
|
||||||
:mentions="mentionsLine.slice(0, 1)"
|
|
||||||
class="mentions-line-first"
|
|
||||||
/>
|
/>
|
||||||
</span>
|
</button>
|
||||||
<MentionsLine
|
<button
|
||||||
v-if="hasMentionsLine"
|
v-if="inThreadForest && replies && replies.length && !simpleTree"
|
||||||
:mentions="mentionsLine.slice(1)"
|
class="button-unstyled"
|
||||||
class="mentions-line"
|
: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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -420,7 +333,64 @@
|
||||||
v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
|
v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
|
||||||
:status="status"
|
: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
|
<div
|
||||||
v-if="!noHeading && !isPreview"
|
v-if="!noHeading && !isPreview"
|
||||||
class="status-actions"
|
class="status-actions"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue