From bc85e5f0c1b000d5aea2c90b6ca6d3a873e13626 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 15 Apr 2018 07:26:55 +0300 Subject: [PATCH] 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(-) 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 @@
{{user.name}}
- -
@{{user.screen_name}}
+ + @{{user.screen_name}} + {{dailyAvg}} {{ $t('user_card.per_day') }}
@@ -74,17 +75,17 @@
-
+
{{ $t('user_card.statuses') }}
{{ $t('user_card.statuses') }}
- {{user.statuses_count}}
{{dailyAvg}} {{ $t('user_card.per_day') }}
+ {{user.statuses_count}}
-
+
{{ $t('user_card.followees') }}
{{ $t('user_card.followees') }}
{{user.friends_count}}
-
+
{{ $t('user_card.followers') }}
{{ $t('user_card.followers') }}
{{user.followers_count}} @@ -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; } 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 @@