diff options
Diffstat (limited to 'client/src/app/+my-account/shared')
-rw-r--r-- | client/src/app/+my-account/shared/actor-avatar-info.component.html | 13 | ||||
-rw-r--r-- | client/src/app/+my-account/shared/actor-avatar-info.component.scss | 48 |
2 files changed, 39 insertions, 22 deletions
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html index 8bdff2f5a..b992d0ebd 100644 --- a/client/src/app/+my-account/shared/actor-avatar-info.component.html +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html | |||
@@ -2,6 +2,13 @@ | |||
2 | <div class="actor"> | 2 | <div class="actor"> |
3 | <img [src]="actor.avatarUrl" alt="Avatar" /> | 3 | <img [src]="actor.avatarUrl" alt="Avatar" /> |
4 | 4 | ||
5 | <div class="actor-img-edit-container"> | ||
6 | <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body"> | ||
7 | <my-global-icon iconName="edit"></my-global-icon> | ||
8 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/> | ||
9 | </div> | ||
10 | </div> | ||
11 | |||
5 | <div class="actor-info"> | 12 | <div class="actor-info"> |
6 | <div class="actor-info-names"> | 13 | <div class="actor-info-names"> |
7 | <div class="actor-info-display-name">{{ actor.displayName }}</div> | 14 | <div class="actor-info-display-name">{{ actor.displayName }}</div> |
@@ -10,10 +17,4 @@ | |||
10 | <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div> | 17 | <div i18n class="actor-info-followers">{{ actor.followersCount }} subscribers</div> |
11 | </div> | 18 | </div> |
12 | </div> | 19 | </div> |
13 | |||
14 | <div class="button-file"> | ||
15 | <span i18n>Change the avatar</span> | ||
16 | <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()" /> | ||
17 | </div> | ||
18 | <div i18n class="file-max-size">(extensions: {{ avatarExtensions }}, max size: {{ maxAvatarSize | bytes }})</div> | ||
19 | </ng-container> \ No newline at end of file | 20 | </ng-container> \ No newline at end of file |
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.scss b/client/src/app/+my-account/shared/actor-avatar-info.component.scss index 86f8108b9..5a66ecfd2 100644 --- a/client/src/app/+my-account/shared/actor-avatar-info.component.scss +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.scss | |||
@@ -5,12 +5,42 @@ | |||
5 | display: flex; | 5 | display: flex; |
6 | 6 | ||
7 | img { | 7 | img { |
8 | @include avatar(50px); | 8 | @include avatar(100px); |
9 | 9 | ||
10 | margin-right: 15px; | 10 | margin-right: 15px; |
11 | } | 11 | } |
12 | 12 | ||
13 | .actor-img-edit-container { | ||
14 | position: relative; | ||
15 | width: 0; | ||
16 | |||
17 | .actor-img-edit-button { | ||
18 | @include peertube-button-file(21px); | ||
19 | @include button-with-icon(19px); | ||
20 | |||
21 | margin-top: 10px; | ||
22 | margin-bottom: 5px; | ||
23 | border-radius: 50%; | ||
24 | top: 55px; | ||
25 | right: 45px; | ||
26 | cursor: pointer; | ||
27 | |||
28 | input { | ||
29 | width: 30px; | ||
30 | height: 30px; | ||
31 | } | ||
32 | |||
33 | my-global-icon { | ||
34 | right: 7px; | ||
35 | } | ||
36 | } | ||
37 | } | ||
38 | |||
13 | .actor-info { | 39 | .actor-info { |
40 | justify-content: center; | ||
41 | display: inline-flex; | ||
42 | flex-direction: column; | ||
43 | |||
14 | .actor-info-names { | 44 | .actor-info-names { |
15 | display: flex; | 45 | display: flex; |
16 | align-items: center; | 46 | align-items: center; |
@@ -35,21 +65,7 @@ | |||
35 | 65 | ||
36 | .actor-info-followers { | 66 | .actor-info-followers { |
37 | font-size: 15px; | 67 | font-size: 15px; |
68 | padding-bottom: .5rem; | ||
38 | } | 69 | } |
39 | } | 70 | } |
40 | } | 71 | } |
41 | |||
42 | .button-file { | ||
43 | @include peertube-button-file(160px); | ||
44 | |||
45 | margin-top: 10px; | ||
46 | margin-bottom: 5px; | ||
47 | } | ||
48 | |||
49 | .file-max-size { | ||
50 | display: inline-block; | ||
51 | font-size: 13px; | ||
52 | |||
53 | position: relative; | ||
54 | top: -10px; | ||
55 | } | ||