51 lines
1.1 KiB
HTML
51 lines
1.1 KiB
HTML
<a id={elementId}
|
|
class="status-sidebar size-{size}"
|
|
rel="prefetch"
|
|
href="/accounts/{originalAccountId}"
|
|
aria-hidden="true"
|
|
tabindex="-1"
|
|
>
|
|
<!-- the avatar is duplicated information, so hide from tab order and screenreaders -->
|
|
<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: {
|
|
elementId: ({ uuid }) => `status-author-avatar-${uuid}`,
|
|
size: ({ isStatusInOwnThread, $isVeryTinyMobileSize }) => {
|
|
if ($isVeryTinyMobileSize) {
|
|
return isStatusInOwnThread ? 'small' : 'extra-small'
|
|
}
|
|
return isStatusInOwnThread ? 'medium' : 'small'
|
|
}
|
|
}
|
|
}
|
|
</script>
|