50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
<a id={elementId}
|
|
class="status-relative-date {isStatusInNotification ? 'status-in-notification' : '' }"
|
|
href="/statuses/{originalStatusId}"
|
|
rel="prefetch"
|
|
{tabindex}
|
|
>
|
|
<time datetime={createdAtDate} title={absoluteFormattedDate}
|
|
aria-label={createdAtLabel}>
|
|
{timeagoFormattedDate}
|
|
</time>
|
|
</a>
|
|
<style>
|
|
.status-relative-date {
|
|
grid-area: relative-date;
|
|
align-self: center;
|
|
margin-left: 5px;
|
|
margin-right: 10px;
|
|
font-size: 1.1em;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
.status-relative-date, .status-relative-date:hover, .status-relative-date:visited {
|
|
color: var(--deemphasized-text-color);
|
|
}
|
|
|
|
.status-relative-date.status-in-notification,
|
|
.status-relative-date.status-in-notification:hover,
|
|
.status-relative-date.status-in-notification:visited {
|
|
color: var(--very-deemphasized-text-color);
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import { formatIntl } from '../../_utils/formatIntl'
|
|
|
|
export default {
|
|
computed: {
|
|
elementId: ({ uuid }) => `status-relative-date-${uuid}`,
|
|
tabindex: ({ $disableTapOnStatus }) => (
|
|
// If you can't tap on the entire status, then you need some way to click on it. Otherwise it's
|
|
// just a duplicate link in the focus order.
|
|
$disableTapOnStatus ? '0' : '-1'
|
|
),
|
|
createdAtLabel: ({ timeagoFormattedDate }) => (
|
|
formatIntl('intl.clickToShowThread', { time: timeagoFormattedDate })
|
|
)
|
|
}
|
|
}
|
|
</script>
|