aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-12-10 10:40:25 +0100
committerChocobozzz <me@florianbigard.com>2019-12-10 11:02:58 +0100
commitfc641dedd6d984bf49d6b2c20ace4d5ecf25e06f (patch)
treea86f75e71f8f67396ec5fd18a18ee05a74f9f638 /client
parentcd3d847d63239802553b19f359c290a08fa0850c (diff)
downloadPeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.tar.gz
PeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.tar.zst
PeerTube-fc641dedd6d984bf49d6b2c20ace4d5ecf25e06f.zip
Improve comment tree UI
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment-add.component.scss12
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.html111
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comment.component.scss59
-rw-r--r--client/src/app/videos/+video-watch/comment/video-comments.component.scss2
-rw-r--r--client/src/sass/include/_mixins.scss3
5 files changed, 112 insertions, 75 deletions
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index e998cba5e..5087f71b6 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -10,10 +10,10 @@ form {
10 margin-bottom: 10px; 10 margin-bottom: 10px;
11 11
12 img { 12 img {
13 @include avatar(36px); 13 @include avatar(25px);
14 14
15 vertical-align: top; 15 vertical-align: top;
16 margin-right: 20px; 16 margin-right: 10px;
17 } 17 }
18 18
19 .form-group { 19 .form-group {
@@ -40,10 +40,14 @@ form {
40 } 40 }
41} 41}
42 42
43@media screen and (max-width: 450px) { 43@media screen and (max-width: 600px) {
44 textarea, .submit-comment button { 44 textarea, .submit-comment button {
45 font-size: 14px !important; 45 font-size: 14px !important;
46 } 46 }
47
48 textarea {
49 padding: 5px !important;
50 }
47} 51}
48 52
49.modal-body { 53.modal-body {
@@ -56,4 +60,4 @@ form {
56 float: left; 60 float: left;
57 margin-bottom: 20px; 61 margin-bottom: 20px;
58 } 62 }
59} \ No newline at end of file 63}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html
index 6ec35d63b..207be3c7c 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html
@@ -1,65 +1,70 @@
1<div class="root-comment"> 1<div class="root-comment">
2 <img 2 <div class="left">
3 *ngIf="!comment.isDeleted" 3 <img
4 class="comment-avatar" 4 *ngIf="!comment.isDeleted"
5 [src]="comment.accountAvatarUrl" 5 class="comment-avatar"
6 alt="Avatar" 6 [src]="comment.accountAvatarUrl"
7 /> 7 alt="Avatar"
8 />
8 9
9 <span 10 <div class="vertical-border"></div>
10 *ngIf="comment.isDeleted" 11 </div>
11 class="comment-avatar"
12 ></span>
13 12
14 <div class="comment"> 13 <div class="right">
15 <ng-container *ngIf="!comment.isDeleted"> 14 <span *ngIf="comment.isDeleted" class="comment-avatar"></span>
16 <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
17 15
18 <div class="comment-account-date"> 16 <div class="comment">
19 <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">{{ comment.by }}</a> 17 <ng-container *ngIf="!comment.isDeleted">
20 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" class="comment-date">{{ comment.createdAt | myFromNow }}</a> 18 <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
21 </div>
22 <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div>
23 19
24 <div class="comment-actions"> 20 <div class="comment-account-date">
25 <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div> 21 <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">{{ comment.by }}</a>
26 <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div> 22 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
27 </div> 23 class="comment-date">{{ comment.createdAt | myFromNow }}</a>
28 </ng-container> 24 </div>
25 <div class="comment-html" [innerHTML]="sanitizedCommentHTML"></div>
29 26
30 <ng-container *ngIf="comment.isDeleted"> 27 <div class="comment-actions">
31 <div class="comment-account-date"> 28 <div *ngIf="isUserLoggedIn()" (click)="onWantToReply()" class="comment-action-reply" i18n>Reply</div>
32 <span class="comment-account" i18n>Deleted</span> 29 <div *ngIf="isRemovableByUser()" (click)="onWantToDelete()" class="comment-action-delete" i18n>Delete</div>
33 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]" class="comment-date">{{ comment.createdAt | myFromNow }}</a> 30 </div>
34 </div> 31 </ng-container>
35 32
36 <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted"> 33 <ng-container *ngIf="comment.isDeleted">
37 <i i18n>This comment has been deleted</i> 34 <div class="comment-account-date">
38 </div> 35 <span class="comment-account" i18n>Deleted</span>
39 </ng-container> 36 <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
37 class="comment-date">{{ comment.createdAt | myFromNow }}</a>
38 </div>
39
40 <div *ngIf="comment.isDeleted" class="comment-html comment-html-deleted">
41 <i i18n>This comment has been deleted</i>
42 </div>
43 </ng-container>
40 44
41 <my-video-comment-add 45 <my-video-comment-add
42 *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id" 46 *ngIf="!comment.isDeleted && isUserLoggedIn() && inReplyToCommentId === comment.id"
43 [user]="user" 47 [user]="user"
44 [video]="video" 48 [video]="video"
45 [parentComment]="comment" 49 [parentComment]="comment"
46 [parentComments]="newParentComments" 50 [parentComments]="newParentComments"
47 [focusOnInit]="true" 51 [focusOnInit]="true"
48 (commentCreated)="onCommentReplyCreated($event)" 52 (commentCreated)="onCommentReplyCreated($event)"
49 ></my-video-comment-add> 53 ></my-video-comment-add>
50 54
51 <div *ngIf="commentTree" class="children"> 55 <div *ngIf="commentTree" class="children">
52 <div *ngFor="let commentChild of commentTree.children"> 56 <div *ngFor="let commentChild of commentTree.children">
53 <my-video-comment 57 <my-video-comment
54 [comment]="commentChild.comment" 58 [comment]="commentChild.comment"
55 [video]="video" 59 [video]="video"
56 [inReplyToCommentId]="inReplyToCommentId" 60 [inReplyToCommentId]="inReplyToCommentId"
57 [commentTree]="commentChild" 61 [commentTree]="commentChild"
58 [parentComments]="newParentComments" 62 [parentComments]="newParentComments"
59 (wantedToReply)="onWantToReply($event)" 63 (wantedToReply)="onWantToReply($event)"
60 (wantedToDelete)="onWantToDelete($event)" 64 (wantedToDelete)="onWantToDelete($event)"
61 (resetReply)="onResetReply()" 65 (resetReply)="onResetReply()"
62 ></my-video-comment> 66 ></my-video-comment>
67 </div>
63 </div> 68 </div>
64 </div> 69 </div>
65 </div> 70 </div>
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index ac633fd64..4cc2fddee 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -5,11 +5,24 @@
5 font-size: 15px; 5 font-size: 15px;
6 display: flex; 6 display: flex;
7 7
8 .left {
9 display: flex;
10 flex-direction: column;
11 align-items: center;
12 margin-right: 10px;
13
14 .vertical-border {
15 width: 2px;
16 height: 100%;
17 background-color: rgba(0, 0, 0, 0.05);
18 margin: 10px 0;
19 }
20 }
21
8 .comment-avatar { 22 .comment-avatar {
9 @include avatar(36px); 23 @include avatar(36px);
10 24
11 margin-top: 5px; 25 margin-top: 5px;
12 margin-right: 20px;
13 } 26 }
14 27
15 .comment { 28 .comment {
@@ -84,33 +97,47 @@
84 } 97 }
85 } 98 }
86 } 99 }
87}
88 100
89// Decrease the space of child comments on small screens
90@media screen and (max-width: 1600px) {
91 .children { 101 .children {
92 margin-left: -20px; 102 // Reduce avatars size for replies
103 .comment-avatar {
104 @include avatar(25px);
105 }
106
107 .left {
108 margin-right: 6px;
109 }
93 } 110 }
94} 111}
95 112
96@media screen and (max-width: 1200px) { 113@media screen and (max-width: 1200px) {
97 .children { 114 .children {
98 margin-left: -30px; 115 margin-left: -10px;
99 } 116 }
100} 117}
101 118
102@media screen and (max-width: 600px) { 119@media screen and (max-width: 600px) {
103 .children {
104 margin-left: -35px;
105 }
106
107 .root-comment { 120 .root-comment {
108 .comment-avatar { margin-right: 10px; } 121 .children {
109 } 122 margin-left: -20px;
110}
111 123
112@media screen and (max-width: 450px) { 124 .left {
113 .root-comment { 125 align-items: flex-start;
114 font-size: 14px; 126
127 .vertical-border {
128 margin-left: 2px;
129 }
130 }
131 }
132
133 .comment {
134 .comment-account-date {
135 flex-direction: column;
136
137 .comment-date {
138 margin-left: 0;
139 }
140 }
141 }
115 } 142 }
116} 143}
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index 575e331e4..dde10b068 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -9,7 +9,7 @@
9 font-weight: $font-semibold; 9 font-weight: $font-semibold;
10 font-size: 15px; 10 font-size: 15px;
11 cursor: pointer; 11 cursor: pointer;
12 margin-left: 56px; 12 margin-left: 46px;
13 margin-bottom: 10px; 13 margin-bottom: 10px;
14} 14}
15 15
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d9095e0bd..dd2255cbb 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -44,7 +44,7 @@
44} 44}
45 45
46@mixin peertube-word-wrap { 46@mixin peertube-word-wrap {
47 word-break: normal; 47 word-break: break-word;
48 word-wrap: break-word; 48 word-wrap: break-word;
49 overflow-wrap: break-word; 49 overflow-wrap: break-word;
50 -webkit-hyphens: auto; 50 -webkit-hyphens: auto;
@@ -397,6 +397,7 @@
397 width: $size; 397 width: $size;
398 height: $size; 398 height: $size;
399 min-width: $size; 399 min-width: $size;
400 min-height: $size;
400} 401}
401 402
402@mixin chevron ($size, $border-width) { 403@mixin chevron ($size, $border-width) {