forked from AkkomaGang/akkoma-fe
Further usercard readibility. Made it visible which "tab" is actiavated - should
be enough to hint user that you can click "following" / "followers". Fixes #77
This commit is contained in:
parent
a6fa913f45
commit
bc85e5f0c1
4 changed files with 42 additions and 30 deletions
src
_variables.scss
components
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue