aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+video-channels
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-03-26 13:20:37 +0100
committerChocobozzz <chocobozzz@cpy.re>2021-03-31 09:05:51 +0200
commit67264e060b6068399dae9a67abae035a73b84af1 (patch)
treedabb735a530c9389c941f7ff1d44fa4b5f6db03e /client/src/app/+video-channels
parent60c35932f6a14cfe83bb0e54407427cce70171ea (diff)
downloadPeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.gz
PeerTube-67264e060b6068399dae9a67abae035a73b84af1.tar.zst
PeerTube-67264e060b6068399dae9a67abae035a73b84af1.zip
Redesign account page
Diffstat (limited to 'client/src/app/+video-channels')
-rw-r--r--client/src/app/+video-channels/video-channels.component.html2
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss74
-rw-r--r--client/src/app/+video-channels/video-channels.component.ts2
3 files changed, 7 insertions, 71 deletions
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index f63110bf5..d1eb15dff 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -12,7 +12,7 @@
12 <ng-template #ownerTemplate> 12 <ng-template #ownerTemplate>
13 <div class="owner-block"> 13 <div class="owner-block">
14 <div class="avatar-row"> 14 <div class="avatar-row">
15 <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" /> 15 <img class="channel-avatar" [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
16 16
17 <div class="actor-info"> 17 <div class="actor-info">
18 <h4>{{ videoChannel.ownerAccount.displayName }}</h4> 18 <h4>{{ videoChannel.ownerAccount.displayName }}</h4>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 16e13c578..f5547b4e9 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,5 +1,6 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3@import '_actor';
3@import '_miniature'; 4@import '_miniature';
4 5
5.root { 6.root {
@@ -11,11 +12,7 @@
11} 12}
12 13
13.section-label { 14.section-label {
14 color: pvar(--mainColor); 15 @include section-label-responsive;
15 font-size: 12px;
16 margin-bottom: 15px;
17 font-weight: $font-bold;
18 letter-spacing: 2.5px;
19} 16}
20 17
21.links { 18.links {
@@ -34,48 +31,7 @@
34} 31}
35 32
36.channel-avatar-row { 33.channel-avatar-row {
37 display: flex; 34 @include avatar-row-responsive(var(--myChannelImgMargin), var(--myGreyChannelFontSize));
38 grid-column: 1;
39 margin-bottom: 30px;
40
41 img {
42 @include channel-avatar(120px);
43 }
44
45 > div {
46 margin-left: var(--myChannelImgMargin);
47 }
48
49 .actor-info {
50 display: flex;
51
52 > div:first-child {
53 flex-grow: 1;
54 }
55 }
56
57 .actor-display-name {
58 display: flex;
59 flex-wrap: wrap;
60 }
61
62 h1 {
63 font-size: 28px;
64 font-weight: $font-bold;
65 margin: 0;
66 }
67
68 .actor-handle,
69 .actor-counters {
70 color: pvar(--greyForegroundColor);
71 font-size: var(--myGreyChannelFontSize);
72 }
73
74 .actor-counters > *:not(:last-child)::after {
75 content: '•';
76 margin: 0 10px;
77 color: pvar(--mainColor);
78 }
79} 35}
80 36
81.channel-description { 37.channel-description {
@@ -83,13 +39,11 @@
83} 39}
84 40
85.show-more { 41.show-more {
42 @include show-more-description;
43
86 display: none; 44 display: none;
87 color: pvar(--mainColor);
88 cursor: pointer;
89 margin: 10px auto 45px auto;
90} 45}
91 46
92
93.channel-buttons { 47.channel-buttons {
94 display: flex; 48 display: flex;
95 flex-wrap: wrap; 49 flex-wrap: wrap;
@@ -280,24 +234,6 @@
280 width: min-content; 234 width: min-content;
281 } 235 }
282 236
283 .section-label {
284 font-size: 10px;
285 letter-spacing: 2.1px;
286 margin-bottom: 5px;
287 }
288
289 .channel-avatar-row {
290 margin-bottom: 15px;
291
292 h1 {
293 font-size: 22px;
294 }
295
296 img {
297 @include channel-avatar(80px);
298 }
299 }
300
301 .show-more { 237 .show-more {
302 margin-bottom: 30px; 238 margin-bottom: 30px;
303 } 239 }
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 037c108f2..4fcc42103 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -94,7 +94,7 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
94 isManageable () { 94 isManageable () {
95 if (!this.isUserLoggedIn()) return false 95 if (!this.isUserLoggedIn()) return false
96 96
97 return this.videoChannel.ownerAccount.userId === this.authService.getUser().id 97 return this.videoChannel?.ownerAccount.userId === this.authService.getUser().id
98 } 98 }
99 99
100 activateCopiedMessage () { 100 activateCopiedMessage () {