From 0b66a43a83ebe64cf2fbfefac84e66fcd94093d7 Mon Sep 17 00:00:00 2001
From: taehoon
Date: Sat, 2 Feb 2019 15:33:02 -0500
Subject: Improve reusability of UserAvatar component
---
src/components/user_avatar/user_avatar.js | 4 +++-
src/components/user_avatar/user_avatar.vue | 17 +++++++++++------
2 files changed, 14 insertions(+), 7 deletions(-)
(limited to 'src/components/user_avatar')
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 407ce1a6..8afb46c2 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -3,7 +3,9 @@ import avatarPlaceholderImage from '../../assets/avatar-placeholder.png'
const UserAvatar = {
props: [
- 'src'
+ 'src',
+ 'betterShadow',
+ 'compact'
],
data () {
return {
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 @@
-
+
@@ -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);
}
}
--
cgit v1.2.3-70-g09d2