From 008b36dc24942058034d545402c3e404fc62d76b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 06:04:48 +0300
Subject: gave text some shadow-outline to make it more readable on white
 backgrounds + fixed weird layout (WHY)

---
 .../user_card_content/user_card_content.vue           | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ca8428ca..a88c0712 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -112,17 +112,14 @@
 }
 
 .profile-panel-body {
-  top: -0em;
-  padding-top: 4em;
   word-wrap: break-word;
-  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) 80%)
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80px);
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80px)
 }
 
 .user-info {
   color: white;
   padding: 0 16px 16px 16px;
-  margin-bottom: -4em;
 
   .container {
     padding: 16px 10px 4px 10px;
@@ -154,7 +151,11 @@
     }
   }
 
-  text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
+  text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0),
+  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;
@@ -240,6 +241,12 @@
   line-height:16px;
   padding: 1em 1.5em 0em 1em;
   text-align: center;
+
+  text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0),
+  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 {
-- 
cgit v1.2.3-70-g09d2


From bc85e5f0c1b000d5aea2c90b6ca6d3a873e13626 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 07:26:55 +0300
Subject: 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                                | 11 +++++
 .../user_card_content/user_card_content.js         |  2 +-
 .../user_card_content/user_card_content.vue        | 57 +++++++++++-----------
 src/components/user_profile/user_profile.vue       |  2 +-
 4 files changed, 42 insertions(+), 30 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/_variables.scss b/src/_variables.scss
index b5222a6a..5967ccb2 100644
--- a/src/_variables.scss
+++ b/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;
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 1e8c91de..a6e44d90 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/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
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index a88c0712..90b5c5cf 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/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 } }">
-              <div class='user-screen-name'>@{{user.screen_name}}</div>
+            <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
+              <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), var(--bg, $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) 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),
-  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);
+  text-shadow: $usercard-text-shadow;
 
   .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;
-
-  text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0),
-  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);
+  justify-content: space-between;
+  text-shadow: $usercard-text-shadow;
 }
 
 .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;
-  opacity: 0.5;
+  margin-left: 1em;
+  font-size: 0.7em;
+  color: #CCC;
 }
 </style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 838a43ab..f8502907 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/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>
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

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 {
-- 
cgit v1.2.3-70-g09d2


From e93ce9919827cd4acf21abf94743cf04556fa56d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Apr 2018 16:45:23 +0300
Subject: small fix + white color for user-card + opaque outline for text

---
 src/App.scss                                           | 2 +-
 src/_variables.scss                                    | 2 +-
 src/components/user_card_content/user_card_content.vue | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/App.scss b/src/App.scss
index 55b0de94..f830a33b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -155,7 +155,7 @@ input, textarea, .select {
       box-shadow: 0px 0px 2px black inset;
       margin-right: .5em;
       background-color: $fallback--input;
-      background-color: var(--input $fallback--input);
+      background-color: var(--input, $fallback--input);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
diff --git a/src/_variables.scss b/src/_variables.scss
index 5967ccb2..0e46489c 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -28,7 +28,7 @@ $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
 
-$usercard-text-shadow-color: rgba(0,0,0,.3);
+$usercard-text-shadow-color: #666;
 $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,
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 5c139dca..ce860926 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -236,6 +236,7 @@
   text-align: center;
   justify-content: space-between;
   text-shadow: $usercard-text-shadow;
+  color: #fff;
 
   &.clickable {
     .user-count {
-- 
cgit v1.2.3-70-g09d2


From dc33c0aaacd56d0854418829fdbc1c32a70ef0f7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 12 May 2018 16:07:18 +0300
Subject: alternate usercard

---
 src/_variables.scss                                | 11 ----------
 .../user_card_content/user_card_content.js         | 12 +++++++++--
 .../user_card_content/user_card_content.vue        | 25 ++++++++++++----------
 src/services/style_setter/style_setter.js          |  2 +-
 4 files changed, 25 insertions(+), 25 deletions(-)

(limited to 'src/components/user_card_content/user_card_content.vue')

diff --git a/src/_variables.scss b/src/_variables.scss
index 0e46489c..b5222a6a 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -27,14 +27,3 @@ $fallback--tooltipRadius: 5px;
 $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
-
-$usercard-text-shadow-color: #666;
-$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;
diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 4ee84b0e..4d4266cb 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -8,10 +8,18 @@ export default {
       const color = this.$store.state.config.colors.bg
       if (color) {
         const rgb = hex2rgb(color)
+        const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
         console.log(rgb)
+        console.log([
+          `url(${this.user.cover_photo})`,
+          `linear-gradient(to bottom, ${tintColor}, ${tintColor})`
+        ].join(', '))
         return {
-          backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
-          backgroundImage: `url(${this.user.cover_photo})`
+          backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
+          backgroundImage: [
+            `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
+            `url(${this.user.cover_photo})`
+          ].join(', ')
         }
       }
     },
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ce860926..c120df9a 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -116,7 +116,8 @@
 }
 
 .user-info {
-  color: white;
+  color: $fallback--lightFg;
+  color: var(--lightFg, $fallback--lightFg);
   padding: 0 16px;
 
   .container {
@@ -149,10 +150,9 @@
     }
   }
 
-  text-shadow: $usercard-text-shadow;
-
   .usersettings {
-    color: #fff;
+    color: $fallback--lightFg;
+    color: var(--lightFg, $fallback--lightFg);
     opacity: .8;
   }
 
@@ -166,13 +166,13 @@
   }
 
   .user-name{
-    color: white;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
   .user-screen-name {
-    color: white;
+    color: $fallback--lightFg;
+    color: var(--lightFg, $fallback--lightFg);
     display: inline-block;
     font-weight: light;
     font-size: 15px;
@@ -189,7 +189,6 @@
     }
 
     .following {
-      color: white;
       font-size: 14px;
       flex: 0 0 100%;
       margin: 0 0 .4em 0;
@@ -235,15 +234,17 @@
   padding: .5em 1.5em 0em 1.5em;
   text-align: center;
   justify-content: space-between;
-  text-shadow: $usercard-text-shadow;
-  color: #fff;
+  color: $fallback--lightFg;
+  color: var(--lightFg, $fallback--lightFg);
 
   &.clickable {
     .user-count {
       cursor: pointer;
 
       &:hover:not(.selected) {
-        background-color: rgba(0,0,0,.1);
+        transition: border-bottom 100ms;
+        border-bottom: 3px solid $fallback--link;
+        border-bottom: 3px solid var(--link, $fallback--link);
       }
     }
   }
@@ -255,7 +256,9 @@
   margin: 0 .5em;
 
   &.selected {
-    background-color: rgba(0,0,0,.35);
+    transition: none;
+    border-bottom: 5px solid $fallback--link;
+    border-bottom: 5px solid var(--link, $fallback--link);
     border-radius: $fallback--btnRadius;
     border-radius: var(--btnRadius, $fallback--btnRadius);
   }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b9af9140..493d444e 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -75,7 +75,7 @@ const setColors = (col, commit) => {
   colors.border = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
   colors.faint = `rgba(${col.text.r}, ${col.text.g}, ${col.text.b}, .5)`
   colors.fg = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
-  colors.lightFg = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+  colors.lightFg = rgb2hex(col.text.r - mod * 5, col.text.g - mod * 5, col.text.b - mod * 5) // strong text
 
   colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
 
-- 
cgit v1.2.3-70-g09d2