Further usercard readibility. Made it visible which "tab" is actiavated - should

be enough to hint user that you can click "following" / "followers". Fixes #77

src/_variables.scss

@@ -27,3 +27,14 @@ $fallback--tooltipRadius: 5px;
 $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
+
+$usercard-text-shadow-color: rgba(0,0,0,.3);
+$usercard-text-shadow: 0px 1px 5px rgba(0, 0, 0, .7),
+0 1px 0px $usercard-text-shadow-color,
+0 -1px 0px $usercard-text-shadow-color,
+1px 0 0px $usercard-text-shadow-color,
+-1px 0 0px $usercard-text-shadow-color,
+1px -1px 0px $usercard-text-shadow-color,
+-1px 1px 0px $usercard-text-shadow-color,
+1px 1px 0px $usercard-text-shadow-color,
+-1px -1px 0px $usercard-text-shadow-color;

src/components/user_card_content/user_card_content.js

@@ -2,7 +2,7 @@ import StillImage from '../still-image/still-image.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
-  props: [ 'user', 'switcher', 'hideBio' ],
+  props: [ 'user', 'switcher', 'selected', 'hideBio' ],
   computed: {
     headingStyle () {
       const color = this.$store.state.config.colors.bg

src/components/user_card_content/user_card_content.vue

@@ -14,8 +14,9 @@
           </router-link>
           <div class="name-and-screen-name">
             <div :title="user.name" class='user-name'>{{user.name}}</div>
-            <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
+            <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
-              <div class='user-screen-name'>@{{user.screen_name}}</div>
+              <span>@{{user.screen_name}}</span>
+              <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
             </router-link>
           </div>
         </div>
@@ -74,17 +75,17 @@
     </div>
     <div class="panel-body profile-panel-body">
       <div class="user-counts">
-        <div class="user-count">
+        <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>
-          <span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span></span>
+          <span>{{user.statuses_count}} <br></span>
         </div>
-        <div class="user-count">
+        <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>
           <span>{{user.friends_count}}</span>
         </div>
-        <div class="user-count">
+        <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>
           <span>{{user.followers_count}}</span>
@@ -113,16 +114,16 @@
 
 .profile-panel-body {
   word-wrap: break-word;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80px);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80px)
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
 }
 
 .user-info {
   color: white;
-  padding: 0 16px 16px 16px;
+  padding: 0 16px;
 
   .container {
-    padding: 16px 10px 4px 10px;
+    padding: 16px 10px 6px 10px;
     display: flex;
     max-height: 56px;
     overflow: hidden;
@@ -151,11 +152,7 @@
     }
   }
 
-  text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0),
+  text-shadow: $usercard-text-shadow;
-  1px 1px 0px rgba(0, 0, 0, .2),
-  -1px 1px 0px rgba(0, 0, 0, .2),
-  1px -1px 0px rgba(0, 0, 0, .2),
-  -1px -1px 0px rgba(0, 0, 0, .2);
 
   .usersettings {
     color: #fff;
@@ -179,7 +176,8 @@
 
   .user-screen-name {
     color: white;
-    font-weight: lighter;
+    display: inline-block;
+    font-weight: light;
     font-size: 15px;
     padding-right: 0.1em;
   }
@@ -192,14 +190,12 @@
     div {
       flex: 1;
     }
-    margin-top: 0.7em;
-    margin-bottom: -1.0em;
 
     .following {
       color: white;
       font-size: 14px;
       flex: 0 0 100%;
-      margin: -0.7em 0.0em 0.3em 0.0em;
+      margin: 0 0 .4em 0;
       padding-left: 16px;
       text-align: left;
     }
@@ -239,18 +235,22 @@
 .user-counts {
   display: flex;
   line-height:16px;
-  padding: 1em 1.5em 0em 1em;
+  padding: .5em 1.5em 0em 1.5em;
   text-align: center;
-
+  justify-content: space-between;
-  text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0),
+  text-shadow: $usercard-text-shadow;
-  1px 1px 0px rgba(0, 0, 0, .2),
-  -1px 1px 0px rgba(0, 0, 0, .2),
-  1px -1px 0px rgba(0, 0, 0, .2),
-  -1px -1px 0px rgba(0, 0, 0, .2);
 }
 
 .user-count {
   flex: 1;
+  padding: .5em 0 .5em 0;
+  margin: 0 .5em;
+
+  &.selected {
+    background-color: rgba(0,0,0,.35);
+    border-radius: $fallback--btnRadius;
+    border-radius: var(--btnRadius, $fallback--btnRadius);
+  }
 
   h5 {
     font-size:1em;
@@ -263,7 +263,8 @@
 }
 
 .dailyAvg {
-  font-size: 0.8em;
+  margin-left: 1em;
-  opacity: 0.5;
+  font-size: 0.7em;
+  color: #CCC;
 }
 </style>

src/components/user_profile/user_profile.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="user" class="user-profile panel panel-default">
-      <user-card-content :user="user" :switcher="true"></user-card-content>
+      <user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
     </div>
     <Timeline :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
   </div>