Pinafore-Web-Client-Frontend/routes/_components/Avatar.html

69 lines
1.5 KiB
HTML

{{#if error}}
<svg class="{{className || ''}} avatar size-{{size}}" aria-hidden="true">
<use xlink:href="#fa-user" />
</svg>
{{elseif $autoplayGifs}}
<img class="{{className || ''}} avatar size-{{size}}" aria-hidden="true" alt=""
src="{{account.avatar}}" on:imgLoadError="set({error: true})" />
{{else}}
<NonAutoplayImg className="{{className || ''}} avatar size-{{size}}"
ariaHidden="true"
alt=""
src="{{account.avatar}}"
staticSrc="{{account.avatar_static}}"
:isLink
on:imgLoadError="set({error: true})"
/>
{{/if}}
<style>
:global(.avatar) {
border-radius: 4px;
background: var(--loading-bg);
}
:global(.avatar.size-extra-small) {
width: 24px;
height: 24px;
}
:global(.avatar.size-small) {
width: 48px;
height: 48px;
}
:global(.avatar.size-medium) {
width: 64px;
height: 64px;
}
:global(.avatar.size-big) {
width: 100px;
height: 100px;
}
@media (max-width: 767px) {
:global(.avatar.size-big) {
width: 80px;
height: 80px;
}
}
svg.avatar {
fill: var(--deemphasized-text-color);
}
</style>
<script>
import { imgLoadError } from '../_utils/events'
import { store } from '../_store/store'
import NonAutoplayImg from './NonAutoplayImg.html'
export default {
events: {
imgLoadError
},
store: () => store,
components: {
NonAutoplayImg
}
}
</script>