Fix final

src/app/components/shared/comment-list/comment-list.component.html

@@ -15,5 +15,5 @@
   <app-comment *ngFor="let current of filteredComments" [comment]="current"> </app-comment>
 </mat-card>
 <mat-card class="outer-card" *ngIf="!hideCommentsList">
-  <app-comment *ngFor="let current of comments" [comment]="current"> </app-comment>
+  <app-comment *ngFor="let current of comments | orderBy: 'score'" [comment]="current"> </app-comment>
 </mat-card>

src/app/components/shared/comment/comment.component.html

 <mat-card class="card-container">
-  <div fxLayout="row" fxLayoutAlign="center center">
-    <div fxLayout="column">
+  <div fxLayout="column">
+    <div fxLayout="row">
+      <span class="fill-remaining-space"></span>
       <button mat-icon-button *ngIf="comment.correct || !isStudent" [disabled]="isStudent" (click)="setCorrect(comment)" [matTooltip]="comment.correct ? 'Unmark as correct' : 'Mark as correct'">
         <mat-icon [ngClass]="{true : 'correct-icon', false: 'incorrect-icon'}[comment.correct]">check_circle</mat-icon>
       </button>
@@ -11,16 +12,18 @@
         <mat-icon [ngClass]="{true: 'read-icon', false: 'unread-icon'}[comment.read]">visibility</mat-icon>
       </button>
     </div>
-    <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div>
-    <span class="fill-remaining-space"></span>
-    <div fxLayout="column">
-      <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)">
-        <mat-icon class="voting-icon" [ngClass]="{'upvoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
-      </button>
+    <div fxLayout="row">
+      <div class="body" (click)="openPresentDialog(comment.body)">{{comment.body}}</div>
+      <span class="fill-remaining-space"></span>
+      <div fxLayout="column">
+        <button mat-icon-button [disabled]="!isStudent" (click)="voteUp(comment)">
+          <mat-icon class="voting-icon" [ngClass]="{'upvoted' : hasVoted === 1}">keyboard_arrow_up</mat-icon>
+        </button>
         <h2>{{comment.score}}</h2>
-      <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
-        <mat-icon class="voting-icon" [ngClass]="{'downvoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
-      </button>
+        <button mat-icon-button [disabled]="!isStudent" (click)="voteDown(comment)">
+          <mat-icon class="voting-icon" [ngClass]="{'downvoted' : hasVoted === -1}">keyboard_arrow_down</mat-icon>
+        </button>
+      </div>
     </div>
   </div>
 </mat-card>

src/app/components/shared/shared.module.ts

@@ -23,6 +23,7 @@ import { LoginComponent } from './login/login.component';
 import { StatisticHelpComponent } from './_dialogs/statistic-help/statistic-help.component';
 import { CommentComponent } from './comment/comment.component';
 import { SubmitCommentComponent } from './_dialogs/submit-comment/submit-comment.component';
+import { OrderBy} from './sort';
 import { PresentCommentComponent } from './_dialogs/present-comment/present-comment.component';
 
 @NgModule({
@@ -54,6 +55,7 @@ import { PresentCommentComponent } from './_dialogs/present-comment/present-comm
     StatisticHelpComponent,
     CommentComponent,
     SubmitCommentComponent,
+    OrderBy,
     PresentCommentComponent
   ],
   exports: [

src/app/components/shared/sort.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'orderBy'
+})
+
+export class OrderBy implements PipeTransform {
+  transform(array: Array<string>, args: string): Array<string> {
+    array.sort((a: any, b: any) => {
+      if (a[args] > b[args]) {
+        return -1;
+      } else if (a[args] <= b[args]) {
+        return 1;
+      }
+    });
+    return array;
+  }
+}