Improve reusability of UserAvatar component

This commit is contained in:
taehoon 2019-02-02 15:33:02 -05:00
parent 89b9aed134
commit 0b66a43a83
7 changed files with 25 additions and 61 deletions

View file

@ -1,5 +1,5 @@
<template>
<StillImage class="avatar" :src="imgSrc" :imageLoadError="imageLoadError"/>
<StillImage class="avatar" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :src="imgSrc" :imageLoadError="imageLoadError"/>
</template>
<script src="./user_avatar.js"></script>
@ -12,8 +12,11 @@
box-shadow: var(--avatarStatusShadow);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
overflow: hidden;
position: relative;
img {
width: 100%;
height: 100%;
}
&.better-shadow {
box-shadow: var(--avatarStatusShadowInset);
@ -24,9 +27,11 @@
display: none;
}
img {
width: 100%;
height: 100%;
&.avatar-compact {
width: 32px;
height: 32px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
}
</style>