forks/peertube
1
0
Fork 0
Code Releases Activity

Add username near the display name for account pages

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/src/app/+accounts/accounts.component.html
View file

@ -5,7 +5,10 @@
<img [src]="account.avatarUrl" alt="Avatar" />
<div class="actor-info">
<div class="actor-display-name">{{ account.displayName }}</div>
<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>

4
client/src/app/+video-channels/video-channels.component.html
View file

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

5
client/src/app/my-account/my-account-settings/my-account-settings.component.html
View file

@ -2,7 +2,10 @@
<img [src]="user.accountAvatarUrl" alt="Avatar" />
<div class="user-info">
<div class="user-info-username">{{ user.username }}</div>
<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>

19
client/src/app/my-account/my-account-settings/my-account-settings.component.scss
View file

@ -11,9 +11,22 @@
}
.user-info {
.user-info-username {
font-size: 20px;
font-weight: $font-bold;
.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 {

19
client/src/sass/include/_mixins.scss
View file

@ -344,9 +344,22 @@
flex-direction: column;
justify-content: center;
.actor-display-name {
font-size: 23px;
font-weight: $font-bold;
.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 {