comments

src/app/pages/user/usercomments/usercomments.page.html

@@ -1,5 +1,9 @@
 <div class="container">
+
+  <mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar>
+
   <div *ngIf="comments && comments.content" fxLayout="column" fxFlexFill class="comments">
+    <p>{{'user.commentsBy' | i18n}}<a routerLink="/u/{{username}}">{{username}}</a></p>
     <ng-container *ngFor="let comment of comments.content; let i = index">
       <mat-divider class="divider" *ngIf="i > 0"></mat-divider>
       <div class="comment">
@@ -7,7 +11,10 @@
           <small>
             <a routerLink="/c/{{comment.id}}" matTooltip="{{comment.created | datef:'LLLL'}}">{{comment.created
               | datef}}</a>
-            {{'comment.author' | i18n}}<a routerLink="/u/{{comment.author}}">{{comment.author}}</a>
+            <span *ngIf="comment.metadata && comment.metadata.entry">
+              {{'comment.on' | i18n}} <a routerLink="/e/{{comment.target}}">{{comment.metadata.entry ||
+                'entry'}}</a>
+            </span>
           </small>
         </div>
         <div mat-line class="text"
@@ -22,6 +29,12 @@
       </div>
     </ng-container>
 
+    <mat-list *ngIf="comments.totalElements == 0">
+      <mat-list-item>
+        <p>{{'comments.nothing' | i18n}}</p>
+      </mat-list-item>
+    </mat-list>
+
     <small *ngIf="comments.totalElements > comments.content.length">
       <a mat-stroked-button color="primary" (click)="showMore()">{{ (parent ? 'comments.subcomments.showMore' :
         'comments.showMore') | i18n}}</a>

src/app/pages/user/usercomments/usercomments.page.scss

@@ -0,0 +1,41 @@
+.comments {
+  padding-left: 20px;
+}
+
+.comments > small {
+  margin-bottom: 15px;
+}
+
+small > a {
+  color: inherit !important;
+  text-decoration: none;
+}
+
+small > a:hover {
+  color: inherit !important;
+  text-decoration: underline;
+}
+
+.text {
+  white-space: break-spaces;
+  word-break: break-word;
+}
+
+span.voted {
+  opacity: 0.5;
+}
+
+.comment {
+  margin: 15px 0;
+}
+
+.mat-icon {
+  top: 3px;
+  position: relative;
+  margin-right: 5px;
+}
+
+small .mat-icon {
+  top: 2px;
+  margin-right: 0px;
+}

src/app/pages/user/usercomments/usercomments.page.ts

@@ -3,11 +3,11 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { CommentService } from '../../../services/comment.service';
-import { PageEvent } from '@angular/material/paginator';
 
 @Component({
   selector: 'page-usercomments',
-  templateUrl: './usercomments.page.html'
+  templateUrl: './usercomments.page.html',
+  styleUrls: [ './usercomments.page.scss' ]
 })
 export class PageUserComments implements OnInit {
 

src/app/pages/user/userentries/userentries.page.html

@@ -1 +1,6 @@
-<ui-entries [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>
+<div fxLayout="column" fxFlexFill>
+  <div class="container">
+    <p>{{'user.entriesBy' | i18n}}<a routerLink="/u/{{username}}">{{username}}</a></p>
+  </div>
+  <ui-entries fxFlex="1 0 1" [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>
+</div>

src/app/ui/comment/comment.ui.html

@@ -18,13 +18,16 @@
       </span>
       <a routerLink="/c/{{comment.id}}" matTooltip="{{comment.created | datef:'LLLL'}}">{{comment.created
         | datef}}</a>
+      <span *ngIf="comment.metadata && comment.metadata.entry"> {{'comment.on' | i18n}} <a
+          routerLink="/e/{{comment.target}}">{{comment.metadata.entry || 'entry'}}</a></span>
       {{'comment.author' | i18n}}<a routerLink="/u/{{comment.author}}">{{comment.author}}</a>
       <span *ngIf="comment.metadata && comment.metadata.unvote"> | </span>
       <a *ngIf="comment.metadata.unvote" href="javascript:" (click)="unvote()">{{'comment.unvote' | i18n}}</a>
     </small>
   </div>
   <div mat-line class="text"
-    [style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'">{{comment.text}}</div>
+    [style.opacity]="comment.metadata && comment.metadata.points && comment.metadata.points < 0 ? 1 + (comment.metadata.points / 10) : '1.0'">
+    {{comment.text}}</div>
 
   <div mat-line>
     <small>

src/app/ui/comment/comment.ui.scss

@@ -1,9 +1,9 @@
-small a {
+small > a {
   color: inherit !important;
   text-decoration: none;
 }
 
-small a:hover {
+small > a:hover {
   color: inherit !important;
   text-decoration: underline;
 }

src/app/ui/comments/comments.ui.html

@@ -6,7 +6,14 @@
     <ui-comment class="comment" [comment]="comment" [change]="boundRefresh"></ui-comment>
   </ng-container>
 
+  <mat-list *ngIf="comments.totalElements == 0 && !parent">
+    <mat-list-item>
+      <p>{{'comments.nothing' | i18n}}</p>
+    </mat-list-item>
+  </mat-list>
+
   <small *ngIf="comments.totalElements > comments.content.length">
-    <a mat-stroked-button color="primary" (click)="showMore()">{{ (parent ? 'comments.subcomments.showMore' : 'comments.showMore') | i18n}}</a>
+    <a mat-stroked-button color="primary" (click)="showMore()">{{ (parent ? 'comments.subcomments.showMore' :
+      'comments.showMore') | i18n}}</a>
   </small>
 </div>