diff options
| author | taehoon <th.dev91@gmail.com> | 2019-02-02 15:33:02 -0500 |
|---|---|---|
| committer | taehoon <th.dev91@gmail.com> | 2019-02-02 15:33:02 -0500 |
| commit | 0b66a43a83ebe64cf2fbfefac84e66fcd94093d7 (patch) | |
| tree | 22221f588bd74a45fa24c9bf2270e2788eecf749 /src/components/user_avatar/user_avatar.vue | |
| parent | 89b9aed1344724b6e00fc927570c1a3806aac0ce (diff) | |
Improve reusability of UserAvatar component
Diffstat (limited to 'src/components/user_avatar/user_avatar.vue')
| -rw-r--r-- | src/components/user_avatar/user_avatar.vue | 17 |
1 files changed, 11 insertions, 6 deletions
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index bbc99f96..3ec25b21 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -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> |