pinafore/routes/_components/Avatar.html
Nolan Lawson 42be854521
upgrade to svelte 2.0 (#251)
* upgrade to svelte 2.0

* update svelte-loader to 2.9.0
2018-05-01 17:05:36 -07:00

96 lines
1.8 KiB
HTML

{#if error}
<svg class={computedClass} aria-hidden="true">
<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})"
/>
{/if}
<style>
:global(.avatar) {
border-radius: 4px;
background: var(--loading-bg);
}
:global(.avatar.loaded) {
background: none;
}
: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 { imgLoad, imgLoadError } from '../_utils/events'
import { store } from '../_store/store'
import NonAutoplayImg from './NonAutoplayImg.html'
import { classname } from '../_utils/classname'
export default {
events: {
imgLoad,
imgLoadError
},
data: () => ({
className: void 0,
loaded: false,
error: void 0,
isLink: false
}),
store: () => store,
computed: {
computedClass: ({ className, loaded, size }) => (classname(
'avatar',
className,
loaded && 'loaded',
`size-${size}`
))
},
components: {
NonAutoplayImg
}
}
</script>