Merge pull request #510 from h3poteto/iss-507

closes #507 Change location of follow/unfollow and more info button in account profile
This commit is contained in:
AkiraFukushima 2018-08-18 01:32:38 +09:00 committed by GitHub
commit 78fc5acc6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 29 deletions

View File

@ -11,19 +11,9 @@
<span class="status" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</span> <span class="status" v-if="relationship.followed_by">{{ $t('side_bar.account_profile.follows_you') }}</span>
<span class="status" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</span> <span class="status" v-else>{{ $t('side_bar.account_profile.doesnt_follow_you') }}</span>
</div> </div>
<div class="follow-status">
<div v-if="relationship.following" class="unfollow" @click="unfollow(account)">
<icon name="user-times" scale="1.5"></icon>
</div> </div>
<div v-else-if="relationship.requested"> <div class="user-info">
<icon name="hourglass" scale="1.5"></icon> <div class="more" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
</div>
<div v-else class="follow" @click="follow(account)">
<icon name="user-plus" scale="1.5"></icon>
</div>
</div>
<div class="clearfix"></div>
<div class="more">
<popper trigger="click" :options="{placement: 'bottom'}" ref="popper"> <popper trigger="click" :options="{placement: 'bottom'}" ref="popper">
<div class="popper"> <div class="popper">
<ul class="menu-list"> <ul class="menu-list">
@ -37,14 +27,25 @@
</div> </div>
<el-button slot="reference" type="text"> <el-button slot="reference" type="text">
<icon name="ellipsis-h"></icon> <icon name="cog" scale="1.4"></icon>
</el-button> </el-button>
</popper> </popper>
</div> </div>
</div>
<div class="icon"> <div class="icon">
<img :src="account.avatar" /> <img :src="account.avatar" />
</div> </div>
<div class="follow-status" v-if="relationship !== null && relationship !== '' && account.username!==user.username">
<div v-if="relationship.following" class="unfollow" @click="unfollow(account)">
<icon name="user-times" scale="1.5"></icon>
</div>
<div v-else-if="relationship.requested">
<icon name="hourglass" scale="1.5"></icon>
</div>
<div v-else class="follow" @click="follow(account)">
<icon name="user-plus" scale="1.5"></icon>
</div>
</div>
</div>
<div class="username"> <div class="username">
{{ username(account) }} {{ username(account) }}
</div> </div>
@ -201,18 +202,23 @@ function findLink (target) {
font-size: var(--base-font-size); font-size: var(--base-font-size);
.follow-follower { .follow-follower {
.follower-status { text-align: left;
float: left;
.follower-status {
.status { .status {
border-radius: 4px; border-radius: 4px;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
padding: 4px 8px; padding: 4px 8px;
} }
} }
.follow-status { }
float: right;
.user-info {
display: flex;
justify-content: space-around;
align-items: center;
.follow-status {
.follow { .follow {
cursor: pointer; cursor: pointer;
} }
@ -224,8 +230,6 @@ function findLink (target) {
} }
.more { .more {
float: right;
.menu-list { .menu-list {
padding: 0; padding: 0;
font-size: calc(var(--base-font-size) * 0.8); font-size: calc(var(--base-font-size) * 0.8);
@ -246,7 +250,6 @@ function findLink (target) {
} }
} }
} }
}
.icon { .icon {
padding: 12px; padding: 12px;
@ -256,6 +259,7 @@ function findLink (target) {
border-radius: 8px; border-radius: 8px;
} }
} }
}
.username { .username {
overflow: hidden; overflow: hidden;