Fix UI of followers list

This commit is contained in:
Edijs 2019-02-11 11:03:01 -07:00
parent b6bac4d06d
commit 9f3f1ee7cb
3 changed files with 58 additions and 45 deletions

View file

@ -552,7 +552,6 @@ a.unmute {
.timeline > { .timeline > {
.status-el:last-child { .status-el:last-child {
border-bottom-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;;
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
border-bottom: none; border-bottom: none;
} }

View file

@ -10,41 +10,43 @@
<div :title="user.name" class="user-name"> <div :title="user.name" class="user-name">
<span v-if="user.name_html" v-html="user.name_html"></span> <span v-if="user.name_html" v-html="user.name_html"></span>
<span v-else>{{ user.name }}</span> <span v-else>{{ user.name }}</span>
<span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
{{ currentUser.id == user.id ? $t('user_card.its_you') : $t('user_card.follows_you') }}
</span>
</div> </div>
<div class="user-link-action"> <div class="user-link-action">
<router-link class='user-screen-name' :to="userProfileLink(user)"> <router-link class='user-screen-name' :to="userProfileLink(user)">
@{{user.screen_name}} @{{user.screen_name}}
</router-link> </router-link>
<button
v-if="showFollow"
class="btn btn-default"
@click="followUser"
:disabled="followRequestInProgress"
:title="followRequestSent ? $t('user_card.follow_again') : ''"
>
<template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }}
</template>
<template v-else-if="followRequestSent">
{{ $t('user_card.follow_sent') }}
</template>
<template v-else>
{{ $t('user_card.follow') }}
</template>
</button>
<button v-if="showActions && showFollows && following" class="btn btn-default" @click="unfollowUser" :disabled="followRequestInProgress">
<template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }}
</template>
<template v-else>
{{ $t('user_card.follow_unfollow') }}
</template>
</button>
</div> </div>
</div> </div>
<div class="follow-box">
<span class="follows-you" v-if="showFollows && user.follows_you">
{{ currentUser.id == user.id ? $t('user_card.its_you') : $t('user_card.follows_you') }}
</span>
<button
v-if="showFollow"
class="btn btn-default"
@click="followUser"
:disabled="followRequestInProgress"
:title="followRequestSent ? $t('user_card.follow_again') : ''"
>
<template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }}
</template>
<template v-else-if="followRequestSent">
{{ $t('user_card.follow_sent') }}
</template>
<template v-else>
{{ $t('user_card.follow') }}
</template>
</button>
<button v-if="showActions && following" class="btn btn-default" @click="unfollowUser" :disabled="followRequestInProgress">
<template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }}
</template>
<template v-else>
{{ $t('user_card.follow_unfollow') }}
</template>
</button>
</div>
<div class="approval" v-if="showApproval"> <div class="approval" v-if="showApproval">
<button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button> <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
<button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button> <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
@ -56,16 +58,13 @@
<style lang="scss"> <style lang="scss">
@import '../../_variables.scss'; @import '../../_variables.scss';
.name-and-screen-name { .name-and-screen-name {
margin-left: 0.7em; margin-left: 0.7em;
margin-top:0.0em; margin-top: 0.0em;
text-align: left; text-align: left;
width: 100%; width: 100%;
.user-name {
display: flex;
justify-content: space-between;
.user-name {
img { img {
object-fit: contain; object-fit: contain;
height: 16px; height: 16px;
@ -73,21 +72,14 @@
vertical-align: middle; vertical-align: middle;
} }
} }
.user-link-action { .user-link-action {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
button {
margin-top: 3px;
}
} }
} }
.follows-you {
margin-left: 2em;
}
.card { .card {
display: flex; display: flex;
@ -99,11 +91,35 @@
border-bottom: 1px solid; border-bottom: 1px solid;
margin: 0; margin: 0;
border-bottom-color: $fallback--border; border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border); border-bottom-color: var(--border, $fallback--border);
.avatar { .avatar {
padding: 0; padding: 0;
} }
.avatar.still-image.avatar-compact {
width: 48px;
height: 48px;
}
.follow-box {
width: 15em;
text-align: center;
position: relative;
.follows-you {
color: $fallback--link;
color: var(--link, $fallback--link);
}
button {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 3px;
}
}
} }
.usercard { .usercard {

View file

@ -386,6 +386,4 @@
} }
} }
.floater {
}
</style> </style>