diff options
| author | Shpuld Shpludson <shp@cock.li> | 2019-02-04 04:17:11 +0000 |
|---|---|---|
| committer | Shpuld Shpludson <shp@cock.li> | 2019-02-04 04:17:11 +0000 |
| commit | d6ee6e8394a86cadc1419f014dc5e77569c62c75 (patch) | |
| tree | 86172bb8f27a7f3a4835e1db431c979bdf088a52 /src/components/user_avatar/user_avatar.vue | |
| parent | 7115584882f4fde67d248fa61611dbe579a41b9f (diff) | |
| parent | e7f43d6bc3c97f5a98df3e3d6defabe896e7cdce (diff) | |
Merge branch '275-avatar-placeholder' into 'develop'
Support avatar placeholder
Closes #275
See merge request pleroma/pleroma-fe!511
Diffstat (limited to 'src/components/user_avatar/user_avatar.vue')
| -rw-r--r-- | src/components/user_avatar/user_avatar.vue | 37 |
1 files changed, 37 insertions, 0 deletions
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue new file mode 100644 index 00000000..3ec25b21 --- /dev/null +++ b/src/components/user_avatar/user_avatar.vue @@ -0,0 +1,37 @@ +<template> + <StillImage class="avatar" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :src="imgSrc" :imageLoadError="imageLoadError"/> +</template> + +<script src="./user_avatar.js"></script> +<style lang="scss"> +@import '../../_variables.scss'; + +.avatar.still-image { + width: 48px; + height: 48px; + box-shadow: var(--avatarStatusShadow); + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + + img { + width: 100%; + height: 100%; + } + + &.better-shadow { + box-shadow: var(--avatarStatusShadowInset); + filter: var(--avatarStatusShadowFilter) + } + + &.animated::before { + display: none; + } + + &.avatar-compact { + width: 32px; + height: 32px; + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + } +} +</style> |