rat/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests 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 > { .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;
} }

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

@ -10,14 +10,17 @@
<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>
</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 <button
v-if="showFollow" v-if="showFollow"
class="btn btn-default" class="btn btn-default"
@ -35,7 +38,7 @@
{{ $t('user_card.follow') }} {{ $t('user_card.follow') }}
</template> </template>
</button> </button>
<button v-if="showActions && showFollows && following" class="btn btn-default" @click="unfollowUser" :disabled="followRequestInProgress"> <button v-if="showActions && following" class="btn btn-default" @click="unfollowUser" :disabled="followRequestInProgress">
<template v-if="followRequestInProgress"> <template v-if="followRequestInProgress">
{{ $t('user_card.follow_progress') }} {{ $t('user_card.follow_progress') }}
</template> </template>
@ -44,7 +47,6 @@
</template> </template>
</button> </button>
</div> </div>
</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;
@ -78,16 +77,9 @@
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;
@ -104,6 +96,30 @@
.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 {

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

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