<article class="status-article {{originalStatus.visibility === 'direct' ? 'status-direct' : ''}} {{isStatusInContext ? 'status-in-context' : ''}}" tabindex="0" aria-posinset="{{index}}" aria-setsize="{{length}}" on:recalculateHeight> {{#if (notification && (notification.type === 'reblog' || notification.type === 'favourite')) || status.reblog}} <StatusHeader :notification :status /> {{/if}} <StatusAuthor status="{{originalStatus}}" :isStatusInContext /> <Avatar account={{originalAccount}} className="status-sidebar" size="small" /> {{#if originalStatus.spoiler_text}} <StatusSpoiler status="{{originalStatus}}" :spoilerShown on:recalculateHeight /> {{/if}} {{#if !originalStatus.spoiler_text || spoilerShown}} <StatusContent status="{{originalStatus}}" /> {{/if}} {{#if originalMediaAttachments && originalMediaAttachments.length}} <MediaAttachments status="{{originalStatus}}" mediaAttachments="{{originalMediaAttachments}}" on:recalculateHeight /> {{/if}} <Toolbar :status /> </article> <style> .status-article { width: 560px; max-width: calc(100vw - 40px); padding: 10px 20px; border-bottom: 1px solid var(--main-border); display: grid; grid-template-areas: ".............. status-header" "status-sidebar status-author" "status-sidebar status-spoiler" "status-sidebar status-spoiler-button" "status-sidebar status-content" "status-media status-media" ".............. status-toolbar"; grid-template-columns: 58px 1fr; } .status-article.status-direct { background-color: var(--status-direct-background); } :global(.status-sidebar) { grid-area: status-sidebar; margin: 0 10px 0 0; } @media (max-width: 767px) { .status-article { padding: 10px 10px; max-width: calc(100vw - 20px); } } </style> <script> import Avatar from './Avatar.html' import MediaAttachments from './MediaAttachments.html' import StatusAuthor from './StatusAuthor.html' import StatusContent from './StatusContent.html' import Toolbar from './Toolbar.html' import StatusHeader from './StatusHeader.html' import StatusSpoiler from './StatusSpoiler.html' import ExternalLink from '../ExternalLink.html' import { store } from '../../_store/store' export default { components: { Avatar, MediaAttachments, Toolbar, ExternalLink, StatusHeader, StatusAuthor, StatusContent, StatusSpoiler }, store: () => store, computed: { isStatusInContext: (timelineType, timelineValue, statusId) => timelineType === 'status' && timelineValue === statusId, originalStatus: (status) => status.reblog ? status.reblog : status, originalAccount: (originalStatus) => originalStatus.account, originalMediaAttachments: (originalStatus) => originalStatus.media_attachments, statusId: (originalStatus) => originalStatus.id, spoilerShown: ($spoilersShown, $currentInstance, statusId) => $spoilersShown && $spoilersShown[$currentInstance] && $spoilersShown[$currentInstance][statusId] } } </script>