b55c042ff4
fixes #512
194 lines
5.2 KiB
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> |