forked from cybrespace/pinafore
65 lines
2.0 KiB
HTML
65 lines
2.0 KiB
HTML
{{#if notification.type === 'mention' || notification.type === 'reblog' || notification.type === 'favourite'}}
|
|
<Status :index :length :timelineType :timelineValue :focusSelector
|
|
status="{{notification.status}}"
|
|
:notification
|
|
on:recalculateHeight
|
|
/>
|
|
{{else}}
|
|
<article class="notification-article"
|
|
tabindex="0"
|
|
aria-posinset="{{index}}" aria-setsize="{{length}}"
|
|
ref:node >
|
|
<div class="follow-notification-offset">
|
|
<StatusHeader :notification :notificationId :status :statusId :timelineType
|
|
:account :accountId :uuid isStatusInNotification="true" />
|
|
</div>
|
|
</article>
|
|
{{/if}}
|
|
<style>
|
|
.notification-article {
|
|
width: 560px;
|
|
max-width: calc(100vw - 40px);
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid var(--main-border);
|
|
}
|
|
.follow-notification-offset {
|
|
margin-left: 58px; /* offset for avatar, 48px + 10px */
|
|
}
|
|
@media (max-width: 767px) {
|
|
.notification-article {
|
|
padding: 10px 10px;
|
|
max-width: calc(100vw - 20px);
|
|
width: 580px;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
import Status from './Status.html'
|
|
import StatusHeader from './StatusHeader.html'
|
|
import { store } from '../../_store/store'
|
|
import { restoreFocus } from '../../_utils/restoreFocus'
|
|
|
|
export default {
|
|
oncreate() {
|
|
let focusSelector = this.get('focusSelector')
|
|
if (this.refs.node && focusSelector) {
|
|
restoreFocus(this.refs.node, focusSelector)
|
|
}
|
|
},
|
|
components: {
|
|
Status,
|
|
StatusHeader
|
|
},
|
|
store: () => store,
|
|
computed: {
|
|
account: (notification) => notification.account,
|
|
accountId: (account) => account.id,
|
|
notificationId: (notification) => notification.id,
|
|
status: (notification) => notification.status,
|
|
statusId: (status) => status && status.id,
|
|
uuid: ($currentInstance, timelineType, timelineValue, notificationId, statusId) => {
|
|
return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId}/${statusId || ''}`
|
|
},
|
|
}
|
|
}
|
|
</script> |