aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/_variables.scss11
-rw-r--r--src/components/user_card_content/user_card_content.js2
-rw-r--r--src/components/user_card_content/user_card_content.vue57
-rw-r--r--src/components/user_profile/user_profile.vue2
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 @@
</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>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 15:30:57 +0000