From cc259411a79c6752f2e71917d58d625fc6028db9 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 13 Dec 2018 20:41:23 +0300 Subject: [PATCH] fix gradients and minor artifacts --- .../user_card_content/user_card_content.js | 12 +++++++++++- .../user_card_content/user_card_content.vue | 5 ++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index e7f19953..be7a2349 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -20,10 +20,20 @@ export default { if (color) { const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` + + const gradient = [ + [tintColor, this.hideBio ? '60%' : ''], + this.hideBio ? [ + color, '100%' + ] : [ + tintColor, '' + ] + ].map(_ => _.join(' ')).join(', ') + return { 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})`, + `linear-gradient(to bottom, ${gradient})`, `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 18504277..08b25595 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -90,7 +90,7 @@ -
+
{{ $t('user_card.statuses') }}
@@ -122,6 +122,9 @@ border-radius: var(--panelRadius, $fallback--panelRadius); overflow: hidden; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + .panel-heading { padding: 0.6em 0em; text-align: center;