Add username near the display name for account pages
This commit is contained in:
parent
742ccef0b5
commit
7de6afdf54
5 changed files with 43 additions and 9 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue