diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2019-12-28 12:41:04 +0100 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2019-12-28 12:41:04 +0100 |
commit | c62a34d36bf498cb81c6611e58079535325b92d8 (patch) | |
tree | 30f86d683a85141041c286d0ed952806478d7764 /client/src/app/videos/+video-watch/comment/video-comments.component.html | |
parent | 5b0413ddaa7949a6a44512a8281c5a23466599ae (diff) | |
download | PeerTube-c62a34d36bf498cb81c6611e58079535325b92d8.tar.gz PeerTube-c62a34d36bf498cb81c6611e58079535325b92d8.tar.zst PeerTube-c62a34d36bf498cb81c6611e58079535325b92d8.zip |
Better spacing beetween comments
Diffstat (limited to 'client/src/app/videos/+video-watch/comment/video-comments.component.html')
-rw-r--r-- | client/src/app/videos/+video-watch/comment/video-comments.component.html | 37 |
1 files changed, 20 insertions, 17 deletions
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html index 8f5c583d3..e25efc3ee 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.html +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html | |||
@@ -46,6 +46,7 @@ | |||
46 | [inReplyToCommentId]="inReplyToCommentId" | 46 | [inReplyToCommentId]="inReplyToCommentId" |
47 | [commentTree]="threadComments[highlightedThread.id]" | 47 | [commentTree]="threadComments[highlightedThread.id]" |
48 | [highlightedComment]="true" | 48 | [highlightedComment]="true" |
49 | [firstInThread]="true" | ||
49 | (wantedToReply)="onWantedToReply($event)" | 50 | (wantedToReply)="onWantedToReply($event)" |
50 | (wantedToDelete)="onWantedToDelete($event)" | 51 | (wantedToDelete)="onWantedToDelete($event)" |
51 | (threadCreated)="onThreadCreated($event)" | 52 | (threadCreated)="onThreadCreated($event)" |
@@ -54,36 +55,38 @@ | |||
54 | ></my-video-comment> | 55 | ></my-video-comment> |
55 | </div> | 56 | </div> |
56 | 57 | ||
57 | <div *ngFor="let comment of comments"> | 58 | <div *ngFor="let comment of comments; index as i"> |
58 | <my-video-comment | 59 | <my-video-comment |
59 | *ngIf="!highlightedThread || comment.id !== highlightedThread.id" | 60 | *ngIf="!highlightedThread || comment.id !== highlightedThread.id" |
60 | [comment]="comment" | 61 | [comment]="comment" |
61 | [video]="video" | 62 | [video]="video" |
62 | [inReplyToCommentId]="inReplyToCommentId" | 63 | [inReplyToCommentId]="inReplyToCommentId" |
63 | [commentTree]="threadComments[comment.id]" | 64 | [commentTree]="threadComments[comment.id]" |
65 | [firstInThread]="i + 1 !== comments.length" | ||
64 | (wantedToReply)="onWantedToReply($event)" | 66 | (wantedToReply)="onWantedToReply($event)" |
65 | (wantedToDelete)="onWantedToDelete($event)" | 67 | (wantedToDelete)="onWantedToDelete($event)" |
66 | (threadCreated)="onThreadCreated($event)" | 68 | (threadCreated)="onThreadCreated($event)" |
67 | (resetReply)="onResetReply()" | 69 | (resetReply)="onResetReply()" |
68 | (timestampClicked)="handleTimestampClicked($event)" | 70 | (timestampClicked)="handleTimestampClicked($event)" |
69 | ></my-video-comment> | 71 | > |
70 | 72 | <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies mb-2"> | |
71 | <div *ngIf="comment.totalReplies !== 0 && !threadComments[comment.id]" (click)="viewReplies(comment.id)" class="view-replies"> | 73 | <span class="glyphicon glyphicon-menu-down"></span> |
72 | <span *ngIf="!threadLoading[comment.id]" class="glyphicon glyphicon-menu-down"></span> | 74 | |
73 | 75 | <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container> | |
74 | <ng-container *ngIf="comment.totalRepliesFromVideoAuthor > 0; then hasAuthorComments; else noAuthorComments"></ng-container> | 76 | <ng-template #hasAuthorComments> |
75 | <ng-template #hasAuthorComments> | 77 | <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n> |
76 | <ng-container *ngIf="comment.totalReplies !== comment.totalRepliesFromVideoAuthor; else onlyAuthorComments" i18n> | 78 | View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others |
77 | View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} and others | 79 | </ng-container> |
78 | </ng-container> | 80 | <ng-template i18n #onlyAuthorComments> |
79 | <ng-template i18n #onlyAuthorComments> | 81 | View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} |
80 | View {{ comment.totalReplies }} replies from {{ video?.account?.displayName || 'the author' }} | 82 | </ng-template> |
81 | </ng-template> | 83 | </ng-template> |
82 | </ng-template> | 84 | <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template> |
83 | <ng-template i18n #noAuthorComments>View {{ comment.totalReplies }} replies</ng-template> | 85 | |
86 | <my-small-loader class="comment-thread-loading ml-1" [loading]="threadLoading[comment.id]"></my-small-loader> | ||
87 | </div> | ||
88 | </my-video-comment> | ||
84 | 89 | ||
85 | <my-small-loader class="comment-thread-loading" [loading]="threadLoading[comment.id]"></my-small-loader> | ||
86 | </div> | ||
87 | </div> | 90 | </div> |
88 | </div> | 91 | </div> |
89 | </ng-template> | 92 | </ng-template> |