pinafore/routes/_components/status/StatusDetails.html

123 lines
3.0 KiB
HTML

<div class="status-details">
<ExternalLink class="status-absolute-date"
href="{{originalStatus.url}}"
showIcon="true"
ariaLabel="{{formattedDate}} (opens in new window)"
>
<time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
</ExternalLink>
<a class="status-favs-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"
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) min-content min-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: pre-wrap;
}
.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;
}
.status-details {
grid-gap: 5px;
justify-content: space-between;
}
}
</style>
<script>
import ExternalLink from '../ExternalLink.html'
const formatter = new Intl.DateTimeFormat('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})
export default {
computed: {
createdAtDate: (originalStatus) => originalStatus.created_at,
numReblogs: (originalStatus) => originalStatus.reblogs_count || 0,
numFavs: (originalStatus) => originalStatus.favourites_count || 0,
formattedDate: (createdAtDate) => 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>