test for Safari 14

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

-<div fxLayout="row" [ngClass]="{'search-container' : !scroll, 'search-container-fixed' : scroll}"
-     *ngIf="comments.length > 2" (window:scroll)="checkScroll()" fxLayoutAlign="center">
-  <mat-label *ngIf="deviceType === 'desktop'" fxLayoutAlign="center center">
+<div fxLayout="row"
+     [ngClass]="{'search-container' : !scroll, 'search-container-fixed' : scroll}"
+     *ngIf="comments.length > 2"
+     (window:scroll)="checkScroll()"
+     fxLayoutAlign="center">
+  <mat-label *ngIf="deviceType === 'desktop'"
+             fxLayoutAlign="center center">
     <mat-icon class="search-icon">search</mat-icon>
   </mat-label>
-  <input (focus)="eventService.makeFocusOnInputTrue()" (blur)="eventService.makeFocusOnInputFalse()"
-         #searchBox id="searchBox" [ngClass]="{'desktop-input': deviceType === 'desktop',
+  <input (focus)="eventService.makeFocusOnInputTrue()"
+         (blur)="eventService.makeFocusOnInputFalse()"
+         #searchBox
+         id="searchBox"
+         [ngClass]="{'desktop-input': deviceType === 'desktop',
    'mobile-input': deviceType === 'mobile' && !search, 'mobile-input-2': deviceType === 'mobile' && search }"
-         (input)="searchComments()" [(ngModel)]="searchInput" [placeholder]="searchPlaceholder"
+         (input)="searchComments()"
+         [(ngModel)]="searchInput"
+         [placeholder]="searchPlaceholder"
          aria-labelledby="search-box-input-description"/>
   <button id="search_close-button"
-          mat-icon-button class="searchBarButton close" *ngIf="searchInput !== '' || search"
+          mat-icon-button
+          class="searchBarButton close"
+          *ngIf="searchInput !== '' || search"
           (click)="hideCommentsList=false; searchInput = ''; search = false; searchPlaceholder = '';">
     <mat-icon>close</mat-icon>
   </button>
 
-  <div class="button-bar" fxLayoutAlign="center center">
+  <div class="button-bar"
+       fxLayoutAlign="center center">
     <div *ngIf="comments && comments.length > 0">
-      <h3 class="counter" *ngIf="comments && !hideCommentsList">{{comments.length}}</h3>
-      <h3 class="counter-filtered" *ngIf="filteredComments && hideCommentsList">{{filteredComments.length}}</h3>
+      <h3 class="counter"
+          *ngIf="comments && !hideCommentsList">{{comments.length}}</h3>
+      <h3 class="counter-filtered"
+          *ngIf="filteredComments && hideCommentsList">{{filteredComments.length}}</h3>
     </div>
 
-    <button mat-icon-button class="searchBarButton" (click)="activateSearch()"
+    <button mat-icon-button
+            class="searchBarButton"
+            (click)="activateSearch()"
             *ngIf="deviceType === 'mobile' && !search && comments && comments.length > 0 && !search">
       <mat-icon class="searchBarIcon">search</mat-icon>
     </button>
 
     <button id="sort-button"
-            mat-icon-button class="searchBarButton"
+            mat-icon-button
+            class="searchBarButton"
             *ngIf="!searchBox.value && comments && comments.length > 0 && !search"
-            [matMenuTriggerFor]="sortMenu" matTooltip="{{ 'comment-list.sort-comments' | translate }}">
+            [matMenuTriggerFor]="sortMenu"
+            matTooltip="{{ 'comment-list.sort-comments' | translate }}">
       <mat-icon class="searchBarIcon">swap_vert</mat-icon>
     </button>
 
-    <button mat-icon-button class="searchBarButton" (click)="switchToCommentList()"
+    <button mat-icon-button
+            class="searchBarButton"
+            (click)="switchToCommentList()"
             *ngIf="!searchBox.value && comments && comments.length > 0 && !search"
             matTooltip="{{ 'comment-list.switch-to-comment-list' | translate }}">
       <mat-icon class="searchBarIcon">question_answer</mat-icon>
     </button>
   </div>
 
-  <mat-menu #sortMenu="matMenu" xPosition="before">
-    <button mat-menu-item *ngIf="isSafari === 'true'" matTooltip="{{ 'comment-list.time' | translate }}"
-            (click)="sortComments(time)" aria-labelledby="access_time">
+  <mat-menu #sortMenu="matMenu"
+            xPosition="before">
+    <button mat-menu-item
+            matTooltip="{{ 'comment-list.time' | translate }}"
+            (click)="sortComments(time)"
+            aria-labelledby="access_time">
       <mat-icon [ngClass]="{time: 'unread-icon'}[currentSort]">access_time</mat-icon>
       <span>{{ 'comment-list.sort-list-time' | translate }}</span>
     </button>
 
-    <button mat-menu-item matTooltip="{{ 'comment-list.vote-asc' | translate }}"
-            (click)="sortComments(votedesc)" aria-labelledby="keyboard_arrow_up">
+    <button mat-menu-item
+            matTooltip="{{ 'comment-list.vote-asc' | translate }}"
+            (click)="sortComments(votedesc)"
+            aria-labelledby="keyboard_arrow_up">
       <mat-icon [ngClass]="{votedesc: 'up'}[currentSort]">keyboard_arrow_up</mat-icon>
       <span>{{ 'comment-list.sort-vote-asc' | translate }}</span>
     </button>
 
-    <button mat-menu-item matTooltip="{{ 'comment-list.vote-desc' | translate }}"
-            (click)="sortComments(voteasc)" aria-labelledby="keyboard_arrow_down">
+    <button mat-menu-item
+            matTooltip="{{ 'comment-list.vote-desc' | translate }}"
+            (click)="sortComments(voteasc)"
+            aria-labelledby="keyboard_arrow_down">
       <mat-icon [ngClass]="{voteasc: 'down'}[currentSort]">keyboard_arrow_down</mat-icon>
       <span>{{ 'comment-list.sort-vote-desc' | translate }}</span>
     </button>
@@ -61,18 +88,27 @@
 
 </div>
 
-<button mat-icon-button class="scrollTop" [ngClass]="{'visible': isScrollButtonVisible()}"
-        (click)="AppComponent.scrollTop()" tabIndex="-1">
+<button mat-icon-button
+        class="scrollTop"
+        [ngClass]="{'visible': isScrollButtonVisible()}"
+        (click)="AppComponent.scrollTop()"
+        tabIndex="-1">
   <mat-icon>arrow_upward</mat-icon>
 </button>
 
 <div *ngIf="!isLoading">
-  <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [userRole]="user.role"
-               [parseVote]="getVote(current)" [moderator]="true" (clickedUserNumber)="clickedUserNumber($event)">
-              </app-comment>
+  <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments"
+               [comment]="current"
+               [userRole]="user.role"
+               [parseVote]="getVote(current)"
+               [moderator]="true"
+               (clickedUserNumber)="clickedUserNumber($event)">
+  </app-comment>
 </div>
 
-<div *ngIf="comments && comments.length < 1 && !isLoading" fxLayout="row" fxLayoutAlign="center center"
+<div *ngIf="comments && comments.length < 1 && !isLoading"
+     fxLayout="row"
+     fxLayoutAlign="center center"
      class="no-comments">
   <!-- no question present-->
   <p class="oldtypo-p">{{ 'comment-page.no-comments' | translate }}</p>

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

@@ -96,7 +96,6 @@
             xPosition="before">
 
     <button mat-menu-item
-            *ngIf="isSafari === 'true'"
             (click)="sortComments(time)"
             aria-labelledby="access_time">
       <mat-icon [ngClass]="{time: 'unread-icon'}[currentSort]">access_time</mat-icon>
@@ -126,7 +125,9 @@
       <button mat-menu-item
               (click)="filterComments(favorite)"
               aria-labelledby="grade">
-        <mat-icon class="star" [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">grade</mat-icon>
+        <mat-icon class="star"
+                  [ngClass]="{favorite: 'favorite-icon'}[currentFilter]">grade
+        </mat-icon>
         <span>{{ 'comment-list.filter-favorite' | translate }}</span>
       </button>