karl/pleroma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix UI of followers list

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/status/status.vue
View file

@ -552,7 +552,6 @@ a.unmute {
.timeline > {
.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-bottom: none;
}

98
src/components/user_card/user_card.vue
View file

@ -10,41 +10,43 @@
<div :title="user.name" class="user-name">
<span v-if="user.name_html" v-html="user.name_html"></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 class="user-link-action">
<router-link class='user-screen-name' :to="userProfileLink(user)">
@{{user.screen_name}}
</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 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">
<button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button>
<button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button>
@ -56,16 +58,13 @@
<style lang="scss">
@import '../../_variables.scss';
.name-and-screen-name {
margin-left: 0.7em;
margin-top:0.0em;
margin-top: 0.0em;
text-align: left;
width: 100%;
.user-name {
display: flex;
justify-content: space-between;
.user-name {
img {
object-fit: contain;
height: 16px;
@ -78,16 +77,9 @@
display: flex;
align-items: flex-start;
justify-content: space-between;
button {
margin-top: 3px;
}
}
}
.follows-you {
margin-left: 2em;
}
.card {
display: flex;
@ -99,11 +91,35 @@
border-bottom: 1px solid;
margin: 0;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
border-bottom-color: var(--border, $fallback--border);
.avatar {
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 {

2
src/components/user_card_content/user_card_content.vue
View file

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