pinafore/routes/_components/status/Avatar.html

51 lines
1.2 KiB
HTML
Raw Normal View History

2018-01-21 05:06:30 +00:00
{{#if error}}
<svg class="{{className}} avatar size-{{size}}" aria-hidden="true">
2018-01-15 05:41:19 +00:00
<use xlink:href="#fa-user" />
</svg>
{{elseif $autoplayGifs}}
<img class="{{className}} avatar size-{{size}}" aria-hidden="true" alt=""
2018-01-23 05:47:29 +00:00
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}}" on:imgLoadError="set({error: true})" />
2018-01-21 05:06:30 +00:00
{{/if}}
2018-01-11 04:45:02 +00:00
<style>
:global(.avatar) {
border-radius: 4px;
}
:global(.avatar.size-small) {
2018-01-11 08:26:35 +00:00
width: 48px;
height: 48px;
}
:global(.avatar.size-big) {
width: 100px;
height: 100px;
}
@media (max-width: 767px) {
:global(.avatar.size-big) {
width: 80px;
height: 80px;
}
2018-01-11 04:45:02 +00:00
}
2018-01-15 05:41:19 +00:00
2018-01-16 16:38:23 +00:00
svg.avatar {
2018-01-15 05:41:19 +00:00
fill: var(--deemphasized-text-color);
}
2018-01-11 04:45:02 +00:00
</style>
<script>
2018-01-28 00:35:44 +00:00
import { imgLoadError } from '../../_utils/events'
import { store } from '../../_store/store'
import NonAutoplayImg from '../NonAutoplayImg.html'
2018-01-23 05:47:29 +00:00
2018-01-11 04:45:02 +00:00
export default {
2018-01-21 05:06:30 +00:00
events: {
2018-01-23 05:47:29 +00:00
imgLoadError
},
store: () => store,
components: {
NonAutoplayImg
2018-01-15 05:41:19 +00:00
}
2018-01-11 04:45:02 +00:00
}
</script>