pinafore/routes/_components/status/StatusDetails.html

194 lines
5.2 KiB
HTML

<div class="status-details">
<ExternalLink className="status-absolute-date"
href={originalStatus.url}
showIcon={true}
ariaLabel="{formattedDate} (opens in new window)"
>
<time datetime={createdAtDate} title={formattedDate}>{formattedDate}</time>
</ExternalLink>
{#if applicationName}
{#if applicationWebsite}
<ExternalLink className="status-application"
href={applicationWebsite}
showIcon={false}
ariaLabel="{applicationName} (opens in new window)">
<span class="status-application-span">
{applicationName}
</span>
</ExternalLink>
{:else}
<span class="status-application status-application-span">
{applicationName}
</span>
{/if}
{/if}
<a class="status-favs-reblogs status-reblogs"
href="/statuses/{originalStatusId}/reblogs"
aria-label={reblogsLabel}>
<svg class="status-favs-reblogs-svg">
<use xlink:href="#fa-retweet"/>
</svg>
<span>{numReblogs}</span>
</a>
<a class="status-favs-reblogs status-favs"
href="/statuses/{originalStatusId}/favorites"
aria-label={favoritesLabel}>
<svg class="status-favs-reblogs-svg">
<use xlink:href="#fa-star" />
</svg>
<span>{numFavs}</span>
</a>
</div>
<style>
.status-details {
grid-area: details;
display: grid;
grid-template-columns: minmax(0, max-content) repeat(3, max-content);
grid-gap: 20px;
align-items: center;
justify-content: left;
margin: 0 5px 10px;
}
:global(.status-absolute-date) {
font-size: 1.1em;
min-width: 0;
}
:global(.status-absolute-date time) {
word-wrap: break-word;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
:global(.status-application) {
word-wrap: break-word;
overflow: hidden;
white-space: pre-wrap;
font-size: 1.1em;
}
:global(.status-application, a.status-application, a.status-application:hover) {
color: var(--deemphasized-text-color);
}
:global(a.status-application) {
display: inline-flex;
align-items: center;
}
.status-application-span {
word-wrap: break-word;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.status-favs-reblogs {
font-size: 1.1em;
display: flex;
flex-direction: row;
align-items: center;
}
.status-favs-reblogs span {
margin-left: 5px;
}
.status-favs-reblogs,
.status-favs-reblogs:hover,
.status-favs-reblogs:visited {
color: var(--deemphasized-text-color);
}
.status-favs-reblogs-svg {
fill: var(--deemphasized-text-color);
width: 18px;
height: 18px;
}
:global(.status-absolute-date, .status-absolute-date:hover, .status-absolute-date:visited) {
color: var(--deemphasized-text-color);
}
@media (max-width: 479px) {
:global(.status-absolute-date) {
font-size: 1em;
}
.status-favs-reblogs {
font-size: 1em;
}
:global(.status-application) {
font-size: 1em;
}
.status-details {
grid-gap: 5px;
justify-content: space-between;
}
}
</style>
<script>
import ExternalLink from '../ExternalLink.html'
import { store } from '../../_store/store'
import { getDateFormatter, getShortDateFormatter } from '../../_utils/formatters'
import { on } from '../../_utils/eventBus'
export default {
oncreate () {
let { originalStatusId } = this.get()
on('statusUpdated', this, status => {
if (status.id === originalStatusId) {
this.set({
overrideNumReblogs: status.reblogs_count || 0,
overrideNumFavs: status.favourites_count || 0
})
}
})
},
store: () => store,
data: () => ({
overrideNumReblogs: void 0,
overrideNumFavs: void 0
}),
computed: {
originalStatusId: ({ originalStatus }) => originalStatus.id,
application: ({ originalStatus }) => originalStatus.application,
applicationName: ({ application }) => (application && application.name),
applicationWebsite: ({ application }) => (application && application.website),
createdAtDate: ({ originalStatus }) => originalStatus.created_at,
numReblogs: ({ overrideNumReblogs, originalStatus }) => {
if (typeof overrideNumReblogs === 'number') {
return overrideNumReblogs
}
return originalStatus.reblogs_count || 0
},
numFavs: ({ overrideNumFavs, originalStatus }) => {
if (typeof overrideNumFavs === 'number') {
return overrideNumFavs
}
return originalStatus.favourites_count || 0
},
formattedDate: ({ createdAtDate, $isMobileSize }) => {
let formatter = $isMobileSize ? getShortDateFormatter() : getDateFormatter()
return formatter.format(new Date(createdAtDate))
},
reblogsLabel: ({ numReblogs }) => {
// TODO: intl
return numReblogs === 1
? `Boosted ${numReblogs} time`
: `Boosted ${numReblogs} times`
},
favoritesLabel: ({ numFavs }) => {
// TODO: intl
return numFavs === 1
? `Favorited ${numFavs} time`
: `Favorited ${numFavs} times`
}
},
components: {
ExternalLink
}
}
</script>