Improve reusability of UserAvatar component
This commit is contained in:
parent
89b9aed134
commit
0b66a43a83
7 changed files with 25 additions and 61 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue