pages + refactor

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

@@ -24,9 +24,7 @@
     </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

@@ -19,4 +19,15 @@ span.voted {
 
 .comment {
   margin: 15px 0;
-}
+}
+
+.mat-icon {
+  top: 3px;
+  position: relative;
+  margin-right: 5px;
+}
+
+small .mat-icon {
+  top: 2px;
+  margin-right: 0px;
+}

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

@@ -1,4 +1,6 @@
-<div *ngIf="comments" fxLayout="column" fxFlexFill class="comments">
+<mat-progress-bar *ngIf="!comments || !comments.content" mode="indeterminate"></mat-progress-bar>
+
+<div *ngIf="comments && comments.content" fxLayout="column" fxFlexFill class="comments">
   <ng-container *ngFor="let comment of comments.content; let i = index">
     <mat-divider class="divider" *ngIf="i > 0"></mat-divider>
     <ui-comment class="comment" [comment]="comment" [change]="boundRefresh"></ui-comment>

src/app/ui/comments/comments.ui.ts

@@ -24,11 +24,11 @@ export class UiComments implements OnInit {
 
   refresh(): void {
     if (this.parent) {
-      this.commentService.getParent(this.target, this.parent).subscribe((data) => {
+      this.commentService.getNewByParent(this.target, this.parent, 0, 30).subscribe((data) => {
         this.comments = data;
       })
     } else {
-      this.commentService.get(this.target).subscribe((data) => {
+      this.commentService.getNew(this.target, 0, 30).subscribe((data) => {
         this.comments = data;
       })
     }
@@ -51,7 +51,7 @@ export class UiComments implements OnInit {
   showMore() {
     const oldContent: any[] = this.comments.content;
     if (this.parent) {
-      this.commentService.getParentPages(this.target, this.parent, this.comments.number + 1, this.comments.size).subscribe((data) => {
+      this.commentService.getNewByParent(this.target, this.parent, this.comments.number + 1, this.comments.size).subscribe((data) => {
         this.comments = data;
         for (let comment of this.comments.content) {
           oldContent.push(comment);
@@ -59,7 +59,7 @@ export class UiComments implements OnInit {
         this.comments.content = oldContent;
       })
     } else {
-      this.commentService.getPages(this.target, this.comments.number + 1, this.comments.size).subscribe((data) => {
+      this.commentService.getNew(this.target, this.comments.number + 1, this.comments.size).subscribe((data) => {
         this.comments = data;
         for (let comment of this.comments.content) {
           oldContent.push(comment);

src/app/ui/entries/entries.ui.html

@@ -4,7 +4,7 @@
   <mat-list>
     <ng-container *ngFor="let entry of entries.content; let i = index">
       <mat-divider *ngIf="i > 0"></mat-divider>
-      <mat-list-item>
+      <mat-list-item class="entry-item">
         <ui-entry class="entry" [entry]="entry" [index]="i+1 + entries.number*entries.size" [change]="refresh">
         </ui-entry>
       </mat-list-item>

src/app/ui/entries/entries.ui.scss

@@ -1,4 +1,9 @@
 .entry {
   display: inline-block;
   max-width: 100%;
+}
+
+.entry-item {
+  height: auto;
+  min-height: 48px;
 }

src/app/ui/entry/entry.ui.html

@@ -23,12 +23,14 @@
       <mat-icon *ngIf="entry.metadata && entry.metadata.downvoted" inline="true">thumb_down</mat-icon>
       <span>&nbsp;</span>
     </span>
-    {{'points' | i18n:(entry.metadata && entry.metadata.points)}}
+    {{(entry.metadata && entry.metadata.points == 1 ? 'point' :
+    'points') | i18n:(entry.metadata && entry.metadata.points)}}
     <a routerLink="/e/{{entry.id}}" matTooltip="{{entry.created | datef:'LLLL'}}">{{entry.created
       | datef}}</a>
     {{'entry.author' | i18n}}<a routerLink="/u/{{entry.author}}">{{entry.author}}</a>
     <span> | </span>
-    <a routerLink="/e/{{entry.id}}">{{'entry.comments' | i18n:(entry.metadata && entry.metadata.comments)}}</a>
+    <a routerLink="/e/{{entry.id}}">{{(entry.metadata && entry.metadata.comments == 1 ? 'entry.comment' :
+      'entry.comments') | i18n:(entry.metadata && entry.metadata.comments)}}</a>
     <span> | </span>
     <a *ngIf="entry.metadata && !entry.metadata.bookmarked" href="javascript:" (click)="addBookmark()"
       matTooltip="{{'bookmarks.add' | i18n}}">

src/app/ui/entry/entry.ui.scss

@@ -1,5 +1,9 @@
 @import '../../../variables.scss';
 
+a.title {
+  white-space: break-spaces;
+  word-wrap: break-word;
+}
 
 small a {
   color: inherit !important;
@@ -13,4 +17,15 @@ small a:hover {
 
 span.voted {
   opacity: 0.5;
+}
+
+.mat-icon {
+  top: 3px;
+  position: relative;
+  margin-right: 3px;
+}
+
+small .mat-icon {
+  top: 2px;
+  margin-right: 0px;
 }