Pinafore-Web-Client-Frontend/routes/_components/status/StatusSidebar.html

41 lines
793 B
HTML

<a class="status-sidebar size-{{size}}"
href="/accounts/{{originalAccountId}}"
focus-key="{{focusKey}}" >
<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>