pinafore/routes/_components/Avatar.html

90 lines
1.7 KiB
HTML
Raw Normal View History

2018-01-21 06:06:30 +01:00
{{#if error}}
<svg class={{computedClass}} aria-hidden="true">
2018-01-15 06:41:19 +01:00
<use xlink:href="#fa-user" />
</svg>
{{elseif $autoplayGifs}}
<img
class={{computedClass}}
aria-hidden="true"
alt=""
src={{account.avatar}}
on:imgLoad="set({loaded: true})"
on:imgLoadError="set({error: true})" />
{{else}}
<NonAutoplayImg
className={{computedClass}}
ariaHidden="true"
alt=""
src={{account.avatar}}
staticSrc={{account.avatar_static}}
:isLink
on:imgLoad="set({loaded: true})"
on:imgLoadError="set({error: true})"
/>
2018-01-21 06:06:30 +01:00
{{/if}}
2018-01-11 05:45:02 +01:00
<style>
:global(.avatar) {
border-radius: 4px;
2018-04-09 02:36:05 +02:00
background: var(--loading-bg);
}
:global(.avatar.loaded) {
background: none;
}
:global(.avatar.size-extra-small) {
width: 24px;
height: 24px;
}
:global(.avatar.size-small) {
2018-01-11 09:26:35 +01:00
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;
}
2018-01-11 05:45:02 +01:00
}
2018-01-15 06:41:19 +01:00
2018-01-16 17:38:23 +01:00
svg.avatar {
2018-01-15 06:41:19 +01:00
fill: var(--deemphasized-text-color);
}
2018-01-11 05:45:02 +01:00
</style>
<script>
import { imgLoad, imgLoadError } from '../_utils/events'
2018-02-09 02:56:20 +01:00
import { store } from '../_store/store'
import NonAutoplayImg from './NonAutoplayImg.html'
import { classname } from '../_utils/classname'
2018-01-23 06:47:29 +01:00
2018-01-11 05:45:02 +01:00
export default {
2018-01-21 06:06:30 +01:00
events: {
imgLoad,
2018-01-23 06:47:29 +01:00
imgLoadError
},
store: () => store,
computed: {
computedClass: (className, loaded, size) => (classname(
'avatar',
className,
loaded && 'loaded',
`size-${size}`
))
},
components: {
NonAutoplayImg
2018-01-15 06:41:19 +01:00
}
2018-01-11 05:45:02 +01:00
}
</script>