Merge remote-tracking branch 'upstream/develop' into emoji-selector-update

* upstream/develop: (116 commits)
  Password reset page
  add a comment
  force img updating immediately
  Fixed "sequimiento" to "seguimiento".
  Replace `/api/externalprofile/show.json` with a MastoAPI equialent
  Use mastodon api in follow requests
  "Optional" in lowercase.
  Update es.json
  fix pin/unpin status logic
  rename a mutation
  update
  fix user avatar fallback logic
  remove dead code
  Corrected "Media Proxy" translation.
  Update es.json
  make bio textarea resizable vertically only
  remove dead code
  Make image orientation consistent on FF, fix videos w/ modal
  remove dead code
  fix crazy watch logic in conversation
  ...

1 files changed, 47 insertions, 1 deletions

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 9e142480..fc18e240 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -7,7 +7,23 @@
     <div class="panel-heading">
       <div class="user-info">
         <div class="container">
-          <router-link :to="userProfileLink(user)">
+          <a
+            v-if="allowZoomingAvatar"
+            class="user-info-avatar-link"
+            @click="zoomAvatar"
+          >
+            <UserAvatar
+              :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
+            :to="userProfileLink(user)"
+          >
             <UserAvatar
               :better-shadow="betterShadow"
               :user="user"
@@ -351,6 +367,7 @@
   .container {
     padding: 16px 0 6px;
     display: flex;
+    align-items: flex-start;
     max-height: 56px;
 
     .avatar {
@@ -372,6 +389,35 @@
     }
   }
 
+  &-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 {
     color: $fallback--lightText;
     color: var(--lightText, $fallback--lightText);