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

Fix long names overflowing and messing everything (now just overflowing parts not drawn), fix non-square avatars not drawn as squares.

This commit is contained in:
Shpuld Shpuldson 2017-06-23 17:43:34 +03:00
parent b284689313
commit f81d1b0eea
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,10 @@
<div class='container'> <div class='container'>
<img :src="user.profile_image_url"> <img :src="user.profile_image_url">
<span class="glyphicon glyphicon-user"></span> <span class="glyphicon glyphicon-user"></span>
<div class='user-name'>{{user.name}}</div> <div class="name-and-screen-name">
<div class='user-screen-name'>@{{user.screen_name}}</div> <div class='user-name'>{{user.name}}</div>
<div class='user-screen-name'>@{{user.screen_name}}</div>
</div>
</div> </div>
<div v-if="isOtherUser" class="user-interactions"> <div v-if="isOtherUser" class="user-interactions">
<div v-if="user.follows_you && loggedIn" class="following base06"> <div v-if="user.follows_you && loggedIn" class="following base06">
@ -135,33 +137,37 @@
align-content: flex-start; align-content: flex-start;
justify-content: center; justify-content: center;
max-height: 60px; max-height: 60px;
overflow: hidden;
} }
img { img {
border: 2px solid; border: 2px solid;
border-radius: 5px; border-radius: 5px;
flex: 1 0 100%; flex: 1 0 100%;
max-width: 48px; width: 48px;
max-height: 48px; height: 48px;
object-fit: cover;
} }
text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0); text-shadow: 0px 1px 1.5px rgba(0, 0, 0, 1.0);
.user-name{ .name-and-screen-name {
margin-top: 0.0em; display: block;
margin-top: 0.0em;
margin-left: 0.6em; margin-left: 0.6em;
flex: 0 0 auto; text-align: left;
align-self: flex-start; text-overflow: ellipsis;
white-space: nowrap;
}
.user-name{
} }
.user-screen-name { .user-screen-name {
margin-top: 0.0em;
margin-left: 0.6em;
font-weight: lighter; font-weight: lighter;
font-size: 15px; font-size: 15px;
padding-right: 0.1em; padding-right: 0.1em;
flex: 0 0 auto; flex: 0 0 auto;
align-self: flex-start;
} }
.user-interactions { .user-interactions {