pages + refactor

src/app/app-routing.module.ts

@@ -3,13 +3,17 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { AuthGuard, AuthUpdateGuard, AuthenticatedGuard, AnonymousGuard } from './auth/auth.guard';
 import { PageBookmarks } from './pages/bookmarks/bookmarks.page';
+import { PageComment } from './pages/comment/comment.page';
 import { PageEntry } from './pages/entry/entry.page';
 import { PageLogin } from './pages/login/login.page';
 import { PageNew } from './pages/new/new.page';
-import { PageNotFound} from './pages/notfound/notfound.page';
+import { PageNotFound } from './pages/notfound/notfound.page';
 import { PageSettings } from './pages/settings/settings.page';
 import { PageSubmission } from './pages/submission/submission.page';
 import { PageTop } from './pages/top/top.page';
+import { PageUser } from './pages/user/user.page';
+import { PageUserComments } from './pages/user/usercomments/usercomments.page';
+import { PageUserEntries } from './pages/user/userentries/userentries.page';
 import { UiMain } from './ui/main/main.ui';
 
 
@@ -17,7 +21,11 @@ const routes: Routes = [
   {
     path: '', component: UiMain, children: [
       { path: '', component: PageTop, canActivate: [ AuthenticatedGuard ] },
+      { path: 'c/:id', component: PageComment, canActivate: [ AuthenticatedGuard ] },
       { path: 'e/:id', component: PageEntry, canActivate: [ AuthenticatedGuard ] },
+      { path: 'u/:username', component: PageUser, canActivate: [ AuthenticatedGuard ] },
+      { path: 'u/c/:username', component: PageUserComments, canActivate: [ AuthenticatedGuard ] },
+      { path: 'u/e/:username', component: PageUserEntries, canActivate: [ AuthenticatedGuard ] },
       { path: 'new', component: PageNew, canActivate: [ AuthenticatedGuard ] },
       { path: 'bookmarks', component: PageBookmarks, canActivate: [ AuthenticatedGuard ] },
       { path: 'submit', component: PageSubmission, canActivate: [ AuthenticatedGuard ] },

src/app/app.module.ts

@@ -17,6 +17,7 @@ import { I18nPipe } from './utils/i18n.pipe';
 import { MomentPipe } from './utils/moment.pipe';
 import { AppComponent } from './app.component';
 import { PageBookmarks } from './pages/bookmarks/bookmarks.page';
+import { PageComment } from './pages/comment/comment.page';
 import { PageEntry } from './pages/entry/entry.page';
 import { PageLogin } from './pages/login/login.page';
 import { PageNew } from './pages/new/new.page';
@@ -25,6 +26,9 @@ import { PageSettings } from './pages/settings/settings.page';
 import { PageSubmission } from './pages/submission/submission.page';
 import { PageTop } from './pages/top/top.page';
 import { PageUnavailable } from './pages/unavailable/unavailable.page'
+import { PageUser } from './pages/user/user.page';
+import { PageUserComments } from './pages/user/usercomments/usercomments.page';
+import { PageUserEntries } from './pages/user/userentries/userentries.page';
 import { UiComment } from './ui/comment/comment.ui';
 import { UiCommentCount } from './ui/commentcount/commentcount.ui';
 import { UiCommentForm } from './ui/commentform/commentform.ui';
@@ -74,6 +78,7 @@ export class XhrInterceptor implements HttpInterceptor {
     MomentPipe,
     AppComponent,
     PageBookmarks,
+    PageComment,
     PageEntry,
     PageLogin,
     PageNew,
@@ -82,6 +87,7 @@ export class XhrInterceptor implements HttpInterceptor {
     PageSubmission,
     PageTop,
     PageUnavailable,
+    PageUser, PageUserComments, PageUserEntries,
     UiComment,
     UiCommentCount,
     UiCommentForm,

src/app/pages/comment/comment.page.html

@@ -0,0 +1,6 @@
+<div class="container">
+  <page-notfound *ngIf="notfound"></page-notfound>
+  <ng-container *ngIf="comment">
+    <ui-comment class="comment" [comment]="comment"></ui-comment>
+  </ng-container>
+</div>

src/app/pages/comment/comment.page.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { ActivatedRoute } from '@angular/router';
+
+import { CommentService } from '../../services/comment.service';
+import { UiComments } from '../../ui/comments/comments.ui';
+
+@Component({
+  selector: 'page-comment',
+  templateUrl: './comment.page.html',
+  styleUrls: [ './comment.page.scss' ]
+})
+export class PageComment implements OnInit {
+
+  id: number;
+  comment: any;
+  notfound: boolean = false;
+
+  constructor(private commentService: CommentService,
+    private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.id = +this.route.snapshot.paramMap.get('id');
+    this.refresh();
+  }
+
+  refresh() {
+    this.commentService.getComment(this.id).subscribe((data) => {
+      this.comment = data;
+    }, (error) => {
+      if (error.status == 404) {
+        this.notfound = true;
+      }
+    })
+  }
+
+
+
+}

src/app/pages/new/new.page.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { EntriesService } from '../../services/entries.service';
+import { Router, ActivatedRoute } from '@angular/router';
 import { PageEvent } from '@angular/material/paginator';
 
+import { EntriesService } from '../../services/entries.service';
+
 @Component({
   selector: 'page-new',
   templateUrl: './new.page.html'
@@ -11,31 +13,66 @@ export class PageNew implements OnInit {
   entries: any;
   boundRefresh: Function;
   boundUpdate: Function;
+  init: boolean = true;
 
-  constructor(private entriesService: EntriesService) { }
+  constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { }
 
   ngOnInit(): void {
-    this.refresh();
     this.boundRefresh = this.refresh.bind(this);
     this.boundUpdate = this.update.bind(this);
+    this.route.queryParams.subscribe(params => {
+      if (this.init) {
+        this.entries = {};
+        if (params[ 'p' ]) {
+          this.entries.number = +params[ 'p' ] - 1;
+          if (this.entries.number < 0) {
+            this.entries.number = 0;
+          }
+        }
+
+        if (params[ 's' ]) {
+          this.entries.size = +params[ 's' ];
+        }
+
+        this.refresh();
+        this.init = false;
+      }
+    });
   }
 
   refresh(): void {
     if (!this.entries) {
-      this.entriesService.getNew().subscribe((data) => {
-        this.entries = data;
-      })
-    } else {
+      this.entries = {};
+    }
+
     this.entries.content = null;
-      this.entriesService.getNewPages(this.entries.number || 0, this.entries.size || 10).subscribe((data: any) => {
+    this.entriesService.getNew(this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
       this.entries = data;
     }, (error) => { })
-    }
+
   }
 
   update(event: PageEvent) {
     this.entries.content = null;
-    this.entriesService.getNewPages(event.pageIndex, event.pageSize).subscribe((data: any) => {
+    const params: any = { p: null, s: null };
+
+    if (event.pageIndex != 0) {
+      params.p = event.pageIndex + 1;
+    }
+
+    if (event.pageSize != 30) {
+      params.s = event.pageSize;
+    }
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: params,
+        queryParamsHandling: 'merge'
+      });
+
+    this.entriesService.getNew(event.pageIndex, event.pageSize).subscribe((data: any) => {
       this.entries = data;
     }, (error) => { })
   }

src/app/pages/top/top.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -11,8 +11,7 @@ import { PageEvent } from '@angular/material/paginator';
 })
 export class PageTop implements OnInit {
 
-
-  @Input() entries: any;
+  entries: any;
   boundRefresh: Function;
   boundUpdate: Function;
   init: boolean = true;
@@ -48,7 +47,7 @@ export class PageTop implements OnInit {
     }
 
     this.entries.content = null;
-    this.entriesService.getPages(this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
+    this.entriesService.getRanked(this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
       this.entries = data;
     }, (error) => { })
 
@@ -74,7 +73,7 @@ export class PageTop implements OnInit {
         queryParamsHandling: 'merge'
       });
 
-    this.entriesService.getPages(event.pageIndex, event.pageSize).subscribe((data: any) => {
+    this.entriesService.getRanked(event.pageIndex, event.pageSize).subscribe((data: any) => {
       this.entries = data;
     }, (error) => { })
   }

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

@@ -0,0 +1,27 @@
+<div class="container">
+  <page-notfound *ngIf="notfound"></page-notfound>
+  <ng-container *ngIf="user">
+    <table>
+      <tr>
+        <th>{{'user.username' | i18n}}</th>
+        <td>{{user.username}}</td>
+      </tr>
+      <tr>
+        <th>{{'user.points' | i18n}}</th>
+        <td>{{user.metadata && user.metadata.points || 0}}</td>
+      </tr>
+      <tr>
+        <th>{{'user.about' | i18n}}</th>
+        <td><p class="text">{{user.about}}</p></td>
+      </tr>
+      <tr>
+        <th></th>
+        <td><a routerLink="/u/e/{{user.username}}">{{'user.entries' | i18n}}</a></td>
+      </tr>
+      <tr>
+        <th></th>
+        <td><a routerLink="/u/c/{{user.username}}">{{'user.comments' | i18n}}</a></td>
+      </tr>
+    </table>
+  </ng-container>
+</div>

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

@@ -0,0 +1,23 @@
+.text {
+  max-width: 100%;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+
+
+table {
+  margin-left: 15px;
+  margin-bottom: 15px;
+
+  @media screen and (min-width: 576px) {
+    max-width: 100%;
+  }
+
+  @media screen and (min-width: 768px) {
+    max-width: 80%;
+  }
+
+  @media screen and (min-width: 992px) {
+    max-width: 50%;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+
+import { ActivatedRoute } from '@angular/router';
+
+
+import { UserService } from '../../services/user.service';
+
+@Component({
+  selector: 'page-user',
+  templateUrl: './user.page.html',
+  styleUrls: [ './user.page.scss' ]
+})
+export class PageUser implements OnInit {
+
+  notfound: boolean = false;
+  username: string;
+  user: any;
+
+  constructor(private userService: UserService,
+    private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.username = this.route.snapshot.paramMap.get('username');
+    this.userService.getUser(this.username).subscribe((data) => {
+      this.user = data;
+    }, (error) => {
+      if (error.status == 404) {
+        this.notfound = true;
+      }
+    })
+  }
+
+
+
+}

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

@@ -0,0 +1,30 @@
+<div class="container">
+  <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>
+      <div class="comment">
+        <div mat-line>
+          <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>
+          </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>
+
+        <div mat-line>
+          <small>
+            <a *ngIf="moderator" href="javascript:" (click)="deleteComment(comment)">{{'comment.delete' | i18n}}</a>
+          </small>
+        </div>
+      </div>
+    </ng-container>
+
+    <small *ngIf="comments.totalElements > comments.content.length">
+      <a mat-stroked-button color="primary" (click)="showMore()">{{ (parent ? 'comments.subcomments.showMore' :
+        'comments.showMore') | i18n}}</a>
+    </small>
+  </div>
+</div>

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

@@ -0,0 +1,37 @@
+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'
+})
+export class PageUserComments implements OnInit {
+
+  username: string;
+  comments: any = {};
+  init: boolean = true;
+
+  constructor(private commentService: CommentService, private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.username = this.route.snapshot.paramMap.get('username');
+    this.commentService.getByUser(this.username, this.comments.number || 0, this.comments.size || 30).subscribe((data: any) => {
+      this.comments = data;
+    }, (error) => { })
+  }
+
+  showMore() {
+    const oldContent: any[] = this.comments.content;
+    this.commentService.getByUser(this.username, this.comments.number + 1, this.comments.size).subscribe((data) => {
+      this.comments = data;
+      for (let comment of this.comments.content) {
+        oldContent.push(comment);
+      }
+      this.comments.content = oldContent;
+    })
+  }
+}

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

@@ -0,0 +1 @@
+<ui-entries [entries]="entries" [refresh]="boundRefresh" [update]="boundUpdate"></ui-entries>

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

@@ -0,0 +1,83 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { EntriesService } from '../../../services/entries.service';
+import { PageEvent } from '@angular/material/paginator';
+
+@Component({
+  selector: 'page-userentries',
+  templateUrl: './userentries.page.html'
+})
+export class PageUserEntries implements OnInit {
+
+  username : string;
+  entries: any;
+  boundRefresh: Function;
+  boundUpdate: Function;
+  init: boolean = true;
+
+  constructor(private entriesService: EntriesService, private router: Router, private route: ActivatedRoute) { }
+
+  ngOnInit(): void {
+    this.username = this.route.snapshot.paramMap.get('username');
+    this.boundRefresh = this.refresh.bind(this);
+    this.boundUpdate = this.update.bind(this);
+    this.route.queryParams.subscribe(params => {
+      if (this.init) {
+        this.entries = {};
+        if (params[ 'p' ]) {
+          this.entries.number = +params[ 'p' ] - 1;
+          if (this.entries.number < 0) {
+            this.entries.number = 0;
+          }
+        }
+
+        if (params[ 's' ]) {
+          this.entries.size = +params[ 's' ];
+        }
+
+        this.refresh();
+        this.init = false;
+      }
+    });
+  }
+
+  refresh(): void {
+    if (!this.entries) {
+      this.entries = {};
+    }
+
+    this.entries.content = null;
+    this.entriesService.getByUser(this.username, this.entries.number || 0, this.entries.size || 30).subscribe((data: any) => {
+      this.entries = data;
+    }, (error) => { })
+
+  }
+
+  update(event: PageEvent) {
+    this.entries.content = null;
+    const params: any = { p: null, s: null };
+
+    if (event.pageIndex != 0) {
+      params.p = event.pageIndex + 1;
+    }
+
+    if (event.pageSize != 30) {
+      params.s = event.pageSize;
+    }
+
+    this.router.navigate(
+      [],
+      {
+        relativeTo: this.route,
+        queryParams: params,
+        queryParamsHandling: 'merge'
+      });
+
+    this.entriesService.getByUser(this.username,event.pageIndex, event.pageSize).subscribe((data: any) => {
+      this.entries = data;
+    }, (error) => { })
+  }
+
+}

src/app/services/bookmarks.service.ts

@@ -11,19 +11,19 @@ export class BookmarksService {
     }
 
     getEntries() {
-        return this.http.get(environment.apiUrl + "/b");
+        return this.http.get(environment.apiUrl + "/bookmarks");
     }
 
     getEntriesPages(page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/b" + "?page=" + page + "&size=" + size);
+        return this.http.get(environment.apiUrl + "/bookmarks" + "?page=" + page + "&size=" + size);
     }
 
     addEntry(id: number) {
-        return this.http.put(environment.apiUrl + "/b/" + id, {});
+        return this.http.put(environment.apiUrl + "/bookmarks/" + id, {});
     }
 
     removeEntry(id: number) {
-        return this.http.delete(environment.apiUrl + "/b/" + id, {});
+        return this.http.delete(environment.apiUrl + "/bookmarks/" + id, {});
     }
 
 }

src/app/services/comment.service.ts

@@ -10,53 +10,41 @@ export class CommentService {
     constructor(private http: HttpClient) {
     }
 
-    get(target: number) {
-        return this.http.get(environment.apiUrl + "/c/e/" + target);
+    getRanked(target: number, page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/comments/" + target + "?page=" + page + "&size=" + size);
     }
 
-    getParent(target: number, parent: number) {
-        return this.http.get(environment.apiUrl + "/c/e/" + target + "/" + parent);
+    getRankedByParent(target: number, parent: number, page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/comments/" + target + "/" + parent + "?page=" + page + "&size=" + size);
+    }
+
+    getNew(target: number, page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/comments/new/" + target + "?page=" + page + "&size=" + size);
+    }
+
+    getNewByParent(target: number, parent: number, page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/comments/new/" + target + "/" + parent + "?page=" + page + "&size=" + size);
+    }
+
+    getByUser(username: string, page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/comments/byuser/" + username + "?page=" + page + "&size=" + size);
     }
 
     count(target: number) {
-        return this.http.get(environment.apiUrl + "/c/c/" + target);
+        return this.http.get(environment.apiUrl + "/comments/count/" + target);
     }
 
     countParent(target: number, parent: number) {
-        return this.http.get(environment.apiUrl + "/c/c/" + target + "/" + parent);
-    }
-
-    getPages(target: number, page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/c/e/" + target + "?page=" + page + "&size=" + size);
-    }
-
-    getParentPages(target: number, parent: number, page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/c/e/" + target + "/" + parent + "?page=" + page + "&size=" + size);
-    }
-
-    getNew(target: number) {
-        return this.http.get(environment.apiUrl + "/c/e/new/" + target);
-    }
-
-    getNewParent(target: number, parent: number) {
-        return this.http.get(environment.apiUrl + "/c/e/new/" + target + "/" + parent);
-    }
-
-    getNewPages(target: number, page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/c/e/new/" + target + "?page=" + page + "&size=" + size);
-    }
-
-    getNewParentPages(target: number, parent: number, page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/c/e/new/" + target + "/" + parent + "?page=" + page + "&size=" + size);
+        return this.http.get(environment.apiUrl + "/comments/count/" + target + "/" + parent);
     }
 
     getComment(id: number) {
-        return this.http.get(environment.apiUrl + "/c/" + id);
+        return this.http.get(environment.apiUrl + "/comments/comment/" + id);
     }
 
     create(comment: any) {
         comment.type = 'COMMENT';
-        return this.http.post(environment.apiUrl + "/c", comment);
+        return this.http.post(environment.apiUrl + "/comments", comment);
     }
 
 }

src/app/services/entries.service.ts

@@ -10,29 +10,25 @@ export class EntriesService {
     constructor(private http: HttpClient) {
     }
 
-    get() {
-        return this.http.get(environment.apiUrl + "/e");
+    getRanked(page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/entries?page=" + page + "&size=" + size);
     }
 
-    getPages(page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/e?page=" + page + "&size=" + size);
+    getNew(page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/entries/new?page=" + page + "&size=" + size);
     }
 
-    getNew() {
-        return this.http.get(environment.apiUrl + "/e/new");
-    }
-
-    getNewPages(page: number, size: number) {
-        return this.http.get(environment.apiUrl + "/e/new?page=" + page + "&size=" + size);
+    getByUser(username: string, page: number, size: number) {
+        return this.http.get(environment.apiUrl + "/entries/byuser/" + username + "?page=" + page + "&size=" + size);
     }
 
     getEntry(id: number) {
-        return this.http.get(environment.apiUrl + "/e/" + id);
+        return this.http.get(environment.apiUrl + "/entries/entry/" + id);
     }
 
     create(entry: any) {
         entry.type = 'ENTRY';
-        return this.http.post(environment.apiUrl + "/e", entry);
+        return this.http.post(environment.apiUrl + "/entries", entry);
     }
 
 }

src/app/services/moderarion.service.ts

@@ -11,11 +11,11 @@ export class ModerationService {
     }
 
     deleteComment(id: number) {
-        return this.http.delete(environment.apiUrl + "/m/c/" + id);
+        return this.http.delete(environment.apiUrl + "/moderation/comment/" + id);
     }
 
     deleteEntry(id: number) {
-        return this.http.delete(environment.apiUrl + "/m/e/" + id);
+        return this.http.delete(environment.apiUrl + "/moderation/entry/" + id);
     }
 
 }

src/app/services/user.service.ts

@@ -13,14 +13,14 @@ export class UserService {
     }
 
     get() {
-        return this.http.get(environment.apiUrl + "/u");
+        return this.http.get(environment.apiUrl + "/users/user");
     }
 
     getUser(username: string) {
-        return this.http.get(environment.apiUrl + "/u/" + username);
+        return this.http.get(environment.apiUrl + "/users/user/" + username);
     }
 
     update(user: any) {
-        return this.http.post(environment.apiUrl + "/u", user);
+        return this.http.post(environment.apiUrl + "/users/user", user);
     }
 }

src/app/services/vote.service.ts

@@ -12,35 +12,35 @@ export class VoteService {
 
 
     getEntryPoints(target: number) {
-        return this.http.get(environment.apiUrl + "/v/e/" + target);
+        return this.http.get(environment.apiUrl + "/votes/entry/" + target);
     }
 
     voteEntryUp(id: number) {
-        return this.http.put(environment.apiUrl + "/v/e/" + id + "/up", {});
+        return this.http.put(environment.apiUrl + "/votes/entry/" + id + "/up", {});
     }
 
     voteEntryDown(id: number) {
-        return this.http.put(environment.apiUrl + "/v/e/" + id + "/down", {});
+        return this.http.put(environment.apiUrl + "/votes/entry/" + id + "/down", {});
     }
 
     unvoteEntry(id: number) {
-        return this.http.delete(environment.apiUrl + "/v/e/" + id, {});
+        return this.http.delete(environment.apiUrl + "/votes/entry/" + id, {});
     }
 
     getCommentPoints(target: number) {
-        return this.http.get(environment.apiUrl + "/v/c/" + target);
+        return this.http.get(environment.apiUrl + "/votes/comment/" + target);
     }
 
     voteCommentUp(id: number) {
-        return this.http.put(environment.apiUrl + "/v/c/" + id + "/up", {});
+        return this.http.put(environment.apiUrl + "/votes/comment/" + id + "/up", {});
     }
 
     voteCommentDown(id: number) {
-        return this.http.put(environment.apiUrl + "/v/c/" + id + "/down", {});
+        return this.http.put(environment.apiUrl + "/votes/comment/" + id + "/down", {});
     }
 
     unvoteComment(id: number) {
-        return this.http.delete(environment.apiUrl + "/v/c/" + id, {});
+        return this.http.delete(environment.apiUrl + "/votes/comment/" + id, {});
     }
 
 

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

@@ -20,3 +20,14 @@ 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

@@ -2,3 +2,8 @@
   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;
@@ -14,3 +18,14 @@ 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;
+}