From 15a7151ade2cfb0a69216cac13e34ed255099aff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 08:04:16 +0300
Subject: [PATCH] Entire area around user counters are clickable now, not just
 the header-link

---
 .../user_card_content/user_card_content.js    |  6 +++--
 .../user_card_content/user_card_content.vue   | 27 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index a6e44d90..4ee84b0e 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -61,8 +61,10 @@ export default {
       store.state.api.backendInteractor.setUserMute(this.user)
     },
     setProfileView (v) {
-      const store = this.$store
-      store.commit('setProfileView', { v })
+      if (this.switcher) {
+        const store = this.$store
+        store.commit('setProfileView', { v })
+      }
     }
   }
 }
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 90b5c5cf..5c139dca 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -74,20 +74,17 @@
       </div>
     </div>
     <div class="panel-body profile-panel-body">
-      <div class="user-counts">
-        <div class="user-count" :class="{selected: selected === 'statuses'}">
-          <a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5>{{ $t('user_card.statuses') }}</h5></a>
-          <h5 v-else>{{ $t('user_card.statuses') }}</h5>
+      <div class="user-counts" :class="{clickable: switcher}">
+        <div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
+          <h5>{{ $t('user_card.statuses') }}</h5>
           <span>{{user.statuses_count}} <br></span>
         </div>
-        <div class="user-count" :class="{selected: selected === 'friends'}">
-          <a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5>{{ $t('user_card.followees') }}</h5></a>
-          <h5 v-else>{{ $t('user_card.followees') }}</h5>
+        <div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
+          <h5>{{ $t('user_card.followees') }}</h5>
           <span>{{user.friends_count}}</span>
         </div>
-        <div class="user-count" :class="{selected: selected === 'followers'}">
-          <a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5>{{ $t('user_card.followers') }}</h5></a>
-          <h5 v-else>{{ $t('user_card.followers') }}</h5>
+        <div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
+          <h5>{{ $t('user_card.followers') }}</h5>
           <span>{{user.followers_count}}</span>
         </div>
       </div>
@@ -239,6 +236,16 @@
   text-align: center;
   justify-content: space-between;
   text-shadow: $usercard-text-shadow;
+
+  &.clickable {
+    .user-count {
+      cursor: pointer;
+
+      &:hover:not(.selected) {
+        background-color: rgba(0,0,0,.1);
+      }
+    }
+  }
 }
 
 .user-count {