moon
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make only screen name as link

This commit is contained in:
taehoon 2019-05-15 22:01:04 -04:00
parent 9e6a91e755
commit 9adbc2c17f
1 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/user_card/user_card.vue
View File

@ -6,7 +6,7 @@
<router-link :to="userProfileLink(user)"> <router-link :to="userProfileLink(user)">
<UserAvatar :betterShadow="betterShadow" :user="user"/> <UserAvatar :betterShadow="betterShadow" :user="user"/>
</router-link> </router-link>
<div class="name-and-screen-name"> <div class="user-summary">
<div class="top-line"> <div class="top-line">
<div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
<div :title="user.name" class='user-name' v-else>{{user.name}}</div> <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
@ -18,12 +18,14 @@
</a> </a>
</div> </div>
<router-link class='user-screen-name' :to="userProfileLink(user)"> <div class="bottom-line">
<span class="handle">@{{user.screen_name}} <span class="user-screen-name-role">
<router-link class="user-screen-name" :to="userProfileLink(user)">@{{user.screen_name}}</router-link>
<span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span> <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span>
</span><span v-if="user.locked"><i class="icon icon-lock"></i></span> </span>
<span v-if="user.locked"><i class="icon icon-lock"></i></span>
<span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
</router-link> </div>
</div> </div>
</div> </div>
<div class="user-meta"> <div class="user-meta">
@ -232,7 +234,7 @@
opacity: .8; opacity: .8;
} }
.name-and-screen-name { .user-summary {
display: block; display: block;
margin-left: 0.6em; margin-left: 0.6em;
text-align: left; text-align: left;
@ -249,6 +251,7 @@
vertical-align: middle; vertical-align: middle;
object-fit: contain object-fit: contain
} }
.top-line { .top-line {
display: flex; display: flex;
} }
@ -269,40 +272,42 @@
} }
} }
.user-screen-name { .bottom-line {
color: $fallback--lightText; display: flex;
color: var(--lightText, $fallback--lightText);
display: inline-block;
font-weight: light; font-weight: light;
font-size: 15px; font-size: 15px;
padding-right: 0.1em; padding-right: 0.1em;
width: 100%; width: 100%;
display: flex; }
.dailyAvg { .user-screen-name-role {
min-width: 1px; min-width: 1px;
flex: 0 0 auto; flex: 0 1 auto;
margin-left: 1em; text-overflow: ellipsis;
font-size: 0.7em; overflow: hidden;
color: $fallback--text; }
color: var(--text, $fallback--text);
}
.handle { .user-screen-name {
min-width: 1px; color: $fallback--lightText;
flex: 0 1 auto; color: var(--lightText, $fallback--lightText);
text-overflow: ellipsis; }
overflow: hidden;
}
// TODO use proper colors .dailyAvg {
.staff { min-width: 1px;
text-transform: capitalize; flex: 0 0 auto;
color: $fallback--text; margin-left: 1em;
color: var(--btnText, $fallback--text); font-size: 0.7em;
background-color: $fallback--fg; color: $fallback--text;
background-color: var(--btn, $fallback--fg); color: var(--text, $fallback--text);
} }
// TODO use proper colors
.staff {
text-transform: capitalize;
color: $fallback--text;
color: var(--btnText, $fallback--text);
background-color: $fallback--fg;
background-color: var(--btn, $fallback--fg);
} }
.user-meta { .user-meta {