semaphore/routes/_components/status/StatusSidebar.html

43 lines
814 B
HTML

<a class="status-sidebar size-{size}"
href="/accounts/{originalAccountId}"
focus-key={focusKey}
aria-hidden="true"
>
<Avatar account={originalAccount}
isLink="true"
{size} />
</a>
<style>
.status-sidebar {
grid-area: sidebar;
margin-right: 15px;
}
.status-sidebar.size-small {
width: 48px;
height: 48px;
}
.status-sidebar.size-medium {
width: 64px;
height: 64px;
}
@media (max-width: 767px) {
.status-sidebar {
margin-right: 5px;
}
}
</style>
<script>
import Avatar from '../Avatar.html'
export default {
components: {
Avatar
},
computed: {
focusKey: ({ uuid }) => `status-author-avatar-${uuid}`,
size: ({ isStatusInOwnThread }) => isStatusInOwnThread ? 'medium' : 'small'
}
}
</script>