sjw
/
pleroma-fe
mirror of https://git.pleroma.social/sjw/pleroma-fe.git
1
0
Fork 0
Code Issues Releases Wiki Activity

UI update

This commit is contained in:
Henry Jameson 2018-06-19 17:14:33 +03:00
parent 398eaaf79b
commit 0714391aba
1 changed files with 47 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/user_card_content/user_card_content.vue
View File

@ -1,13 +1,29 @@
<template> <template>
<div id="heading" class="profile-panel-background" :style="headingStyle"> <div id="heading" class="profile-panel-background" :style="headingStyle">
<div class="panel-heading text-center"> <div class="panel-heading text-center">
<div class='user-info'> <div class='user-info'>
<router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser"> <router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
<i class="icon-cog usersettings"></i> <i class="icon-cog usersettings"></i>
</router-link>
<a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
<i class="icon-link-ext usersettings"></i>
</a>
<div class='container'>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }">
<StillImage class="avatar" :src="user.profile_image_url_original"/>
</router-link> </router-link>
<a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser"> <div class="name-and-screen-name">
<i class="icon-link-ext usersettings"></i> <div :title="user.name" class='user-name'>{{user.name}}</div>
</a> <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>
<div class="user-meta">
<div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
{{ $t('user_card.follows_you') }}
</div>
<div class="floater" v-if="switcher || isOtherUser"> <div class="floater" v-if="switcher || isOtherUser">
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/> <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightEnabled" v-model="userHighlightColor"/>
@ -16,22 +32,8 @@
<i class="icon-brush"></i> <i class="icon-brush"></i>
</label> </label>
</div> </div>
<div class='container'> </div>
<router-link :to="{ name: 'user-profile', params: { id: user.id } }"> <div v-if="isOtherUser" class="user-interactions">
<StillImage class="avatar" :src="user.profile_image_url_original"/>
</router-link>
<div class="name-and-screen-name">
<div :title="user.name" class='user-name'>{{user.name}}</div>
<router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
<span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
<span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
</router-link>
</div>
</div>
<div v-if="isOtherUser" class="user-interactions">
<div v-if="user.follows_you && loggedIn" class="following">
{{ $t('user_card.follows_you') }}
</div>
<div class="follow" v-if="loggedIn"> <div class="follow" v-if="loggedIn">
<span v-if="user.following"> <span v-if="user.following">
<!--Following them!--> <!--Following them!-->
@ -187,6 +189,27 @@
padding-right: 0.1em; padding-right: 0.1em;
} }
.user-meta {
margin-bottom: .4em;
.following {
font-size: 14px;
flex: 0 0 100%;
margin: 0;
padding-left: 16px;
text-align: left;
float: left;
}
.floater {
margin: 0;
}
&::after {
display: block;
content: '';
clear: both;
}
}
.user-interactions { .user-interactions {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
@ -196,14 +219,6 @@
flex: 1; flex: 1;
} }
.following {
font-size: 14px;
flex: 0 0 100%;
margin: 0 0 .4em 0;
padding-left: 16px;
text-align: left;
}
.mute { .mute {
max-width: 220px; max-width: 220px;
min-height: 28px; min-height: 28px;