diff options
| author | taehoon <th.dev91@gmail.com> | 2019-07-25 15:49:02 -0400 |
|---|---|---|
| committer | taehoon <th.dev91@gmail.com> | 2019-07-28 21:05:13 -0400 |
| commit | be7a508d89d8ea4b78abeba73625d25d22726270 (patch) | |
| tree | 2d993833401612372944478a8d908d2678ff3bac | |
| parent | 1e613ae9b37f33e26c2b6922e3190a3b7d3b6628 (diff) | |
add zoom-in indication to avatar
| -rw-r--r-- | src/components/user_card/user_card.vue | 29 |
1 files changed, 29 insertions, 0 deletions
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 3c200a7f..fc18e240 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -16,6 +16,9 @@ :better-shadow="betterShadow" :user="user" /> + <div class="user-info-avatar-link-overlay"> + <i class="button-icon icon-zoom-in" /> + </div> </a> <router-link v-else @@ -364,6 +367,7 @@ .container { padding: 16px 0 6px; display: flex; + align-items: flex-start; max-height: 56px; .avatar { @@ -386,7 +390,32 @@ } &-avatar-link { + position: relative; cursor: pointer; + + &-overlay { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; + align-items: center; + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + opacity: 0; + transition: opacity .2s ease; + + i { + color: #FFF; + } + } + + &:hover &-overlay { + opacity: 1; + } } .usersettings { |