diff options
| author | Henry Jameson <me@hjkos.com> | 2018-04-15 08:04:16 +0300 |
|---|---|---|
| committer | Henry Jameson <me@hjkos.com> | 2018-05-12 15:19:53 +0300 |
| commit | 15a7151ade2cfb0a69216cac13e34ed255099aff (patch) | |
| tree | 2e3864ecb5506b309c48c0f8c5465729ac8f4404 /src/components/user_card_content/user_card_content.vue | |
| parent | 61fd0b65d99c0fe828bfc029d9d016934f7f1059 (diff) | |
Entire area around user counters are clickable now, not just the header-link
Diffstat (limited to 'src/components/user_card_content/user_card_content.vue')
| -rw-r--r-- | src/components/user_card_content/user_card_content.vue | 27 |
1 files changed, 17 insertions, 10 deletions
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 { |