1
0
Fork 0

Add username near the display name for account pages

This commit is contained in:
Chocobozzz 2018-04-26 10:22:48 +02:00
parent 742ccef0b5
commit 7de6afdf54
No known key found for this signature in database
GPG key ID: 583A612D890159BE
5 changed files with 43 additions and 9 deletions

View file

@ -5,7 +5,10 @@
<img [src]="account.avatarUrl" alt="Avatar" />
<div class="actor-info">
<div class="actor-names">
<div class="actor-display-name">{{ account.displayName }}</div>
<div class="actor-name">{{ account.name }}</div>
</div>
<div class="actor-followers">{{ account.followersCount }} subscribers</div>
</div>
</div>

View file

@ -5,7 +5,9 @@
<img [src]="videoChannel.avatarUrl" alt="Avatar" />
<div class="actor-info">
<div class="actor-names">
<div class="actor-display-name">{{ videoChannel.displayName }}</div>
</div>
<div class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
</div>
</div>

View file

@ -2,7 +2,10 @@
<img [src]="user.accountAvatarUrl" alt="Avatar" />
<div class="user-info">
<div class="user-info-names">
<div class="user-info-display-name">{{ user.account.displayName }}</div>
<div class="user-info-username">{{ user.username }}</div>
</div>
<div class="user-info-followers">{{ user.account?.followersCount }} subscribers</div>
</div>
</div>

View file

@ -11,11 +11,24 @@
}
.user-info {
.user-info-username {
.user-info-names {
display: flex;
align-items: center;
.user-info-display-name {
font-size: 20px;
font-weight: $font-bold;
}
.user-info-username {
margin-left: 7px;
position: relative;
top: 2px;
font-size: 14px;
color: #777272;
}
}
.user-info-followers {
font-size: 15px;
}

View file

@ -344,11 +344,24 @@
flex-direction: column;
justify-content: center;
.actor-names {
display: flex;
align-items: center;
.actor-display-name {
font-size: 23px;
font-weight: $font-bold;
}
.actor-name {
margin-left: 7px;
position: relative;
top: 3px;
font-size: 14px;
color: #777272;
}
}
.actor-followers {
font-size: 15px;
}