From 1ec45bb8373e3bee1d7c2e2b948c1cb566490e08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 19 Apr 2021 18:31:39 +0300
Subject: [PATCH] Center username column on small screens

---
 .../screens/audit/audit-screen.component.html    |  4 ++--
 .../rule-sets-listing-screen.component.html      | 15 +++++----------
 .../rule-sets-listing-screen.component.scss      | 16 ----------------
 .../user-listing-screen.component.html           |  2 +-
 .../project-listing-screen.component.html        |  4 ++--
 .../project-listing-screen.component.scss        |  4 ----
 .../project-overview-screen.component.html       |  3 ++-
 .../initials-avatar.component.html               |  2 +-
 .../initials-avatar/initials-avatar.component.ts |  1 -
 .../src/assets/styles/red-page-layout.scss       |  9 +++++++--
 10 files changed, 20 insertions(+), 40 deletions(-)

diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index fd339218f..ad73c3521 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -84,7 +84,7 @@
             <div class="table-header" redactionSyncWidth="table-item">
                 <redaction-table-col-name label="audit-screen.table-col-names.message" column="message"></redaction-table-col-name>
                 <redaction-table-col-name label="audit-screen.table-col-names.date" column="date"></redaction-table-col-name>
-                <redaction-table-col-name label="audit-screen.table-col-names.user" column="user"></redaction-table-col-name>
+                <redaction-table-col-name label="audit-screen.table-col-names.user" column="user" class="user-column"></redaction-table-col-name>
                 <redaction-table-col-name label="audit-screen.table-col-names.category" column="category"></redaction-table-col-name>
                 <div class="scrollbar-placeholder"></div>
             </div>
@@ -99,7 +99,7 @@
                     <div class="small-label">
                         {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
                     </div>
-                    <div>
+                    <div class="user-column">
                         <redaction-initials-avatar size="small" [userId]="log.userId" [withName]="true"></redaction-initials-avatar>
                     </div>
                     <div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
index 137f9212b..72be0a00e 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
@@ -58,7 +58,7 @@
                     [activeSortingOption]="sortingOption"
                     [withSort]="true"
                 ></redaction-table-col-name>
-                <redaction-table-col-name label="project-templates-listing.table-col-names.created-by"></redaction-table-col-name>
+                <redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="user-column"></redaction-table-col-name>
                 <redaction-table-col-name
                     label="project-templates-listing.table-col-names.created-on"
                     column="dateAdded"
@@ -95,7 +95,7 @@
                         <mat-icon class="selection-icon active" *ngIf="isRuleSetSelected(ruleSet)" svgIcon="red:radio-selected"></mat-icon>
                     </div>
 
-                    <div class="template-name">
+                    <div>
                         <div class="table-item-title heading">
                             {{ ruleSet.name }}
                         </div>
@@ -104,20 +104,16 @@
                                 <mat-icon svgIcon="red:dictionary"></mat-icon>
                                 {{ 'project-templates-listing.dictionaries' | translate: { length: ruleSet.dictionariesCount } }}
                             </div>
-                            <!--                            <div>-->
-                            <!--                                <mat-icon svgIcon="red:entries"></mat-icon>-->
-                            <!--                                {{ 'project-templates-listing.entries' | translate: { length: ruleSet.totalDictionaryEntries } }}-->
-                            <!--                            </div>-->
                         </div>
                     </div>
 
-                    <div class="created-by">
+                    <div class="user-column">
                         <redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar>
                     </div>
-                    <div class="created-on small-label">
+                    <div class="small-label">
                         {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
                     </div>
-                    <div class="modified-on">
+                    <div>
                         <div class="small-label">
                             {{ ruleSet.dateModified | date: 'd MMM. yyyy' }}
                         </div>
@@ -128,7 +124,6 @@
                             (loadRuleSetsData)="loadRuleSetsData()"
                         ></redaction-rule-set-actions>
                     </div>
-
                     <div class="scrollbar-placeholder"></div>
                 </div>
             </cdk-virtual-scroll-viewport>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
index fbddcbde4..0e4487311 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
@@ -20,17 +20,7 @@ redaction-table-col-name::ng-deep {
 
             .table-item {
                 > div:not(.scrollbar-placeholder) {
-                    display: flex;
-                    flex-direction: row;
                     padding-left: 10px;
-                    align-items: center;
-                    justify-content: flex-start;
-
-                    &.template-name {
-                        flex-direction: column;
-                        justify-content: center;
-                        align-items: flex-start;
-                    }
 
                     .stats-subtitle {
                         margin-top: 4px;
@@ -39,12 +29,6 @@ redaction-table-col-name::ng-deep {
                     .table-item-title {
                         max-width: 100%;
                     }
-
-                    &.created-by,
-                    &.created-on,
-                    &.modified-on {
-                        display: flex;
-                    }
                 }
             }
         }
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index 9c7313bee..bd27526a2 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -83,7 +83,7 @@
                         <mat-icon class="selection-icon active" *ngIf="isUserSelected(user)" svgIcon="red:radio-selected"></mat-icon>
                     </div>
                     <div>
-                        <redaction-initials-avatar [user]="user" [withName]="true" [showYou]="true" [alwaysShowName]="true"></redaction-initials-avatar>
+                        <redaction-initials-avatar [user]="user" [withName]="true" [showYou]="true"></redaction-initials-avatar>
                     </div>
                     <div class="small-label">{{ user.email || '-' }}</div>
                     <div class="center">
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
index 80f7a2c2f..13b48099b 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
@@ -63,7 +63,7 @@
 
                 <redaction-table-col-name label="project-listing.table-col-names.needs-work"></redaction-table-col-name>
 
-                <redaction-table-col-name label="project-listing.table-col-names.owner"></redaction-table-col-name>
+                <redaction-table-col-name label="project-listing.table-col-names.owner" class="user-column"></redaction-table-col-name>
 
                 <redaction-table-col-name class="flex-end" label="project-listing.table-col-names.status"></redaction-table-col-name>
                 <div class="scrollbar-placeholder"></div>
@@ -126,7 +126,7 @@
                     <div>
                         <redaction-needs-work-badge [needsWorkInput]="pw"></redaction-needs-work-badge>
                     </div>
-                    <div>
+                    <div class="user-column">
                         <redaction-initials-avatar [userId]="pw.project.ownerId" [withName]="true"></redaction-initials-avatar>
                     </div>
                     <div class="status-container">
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss
index 5f0223e31..73cf4c93b 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss
@@ -17,10 +17,6 @@
                     padding-right: 13px;
                 }
             }
-
-            //.stats-subtitle {
-            //    margin-top: 6px;
-            //}
         }
 
         &.has-scrollbar:hover {
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
index 0d9f31cad..c4f6ba38c 100644
--- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
@@ -139,6 +139,7 @@
                     [withSort]="true"
                     column="reviewerName"
                     label="project-overview.table-col-names.assigned-to"
+                    class="user-column"
                 ></redaction-table-col-name>
 
                 <redaction-table-col-name
@@ -210,7 +211,7 @@
                     <div *ngIf="!fileStatus.isError">
                         <redaction-needs-work-badge [needsWorkInput]="fileStatus"></redaction-needs-work-badge>
                     </div>
-                    <div *ngIf="!fileStatus.isError" class="assigned-to">
+                    <div *ngIf="!fileStatus.isError" class="user-column">
                         <redaction-initials-avatar [userId]="fileStatus.currentReviewer" [withName]="true"></redaction-initials-avatar>
                     </div>
 
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
index 317f19a47..d77835ae3 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
@@ -6,7 +6,7 @@
     >
         {{ initials }}
     </div>
-    <div *ngIf="withName" class="clamp-2 username" [class.always-visible]="alwaysShowName" [class.disabled]="disabled">
+    <div *ngIf="withName" class="clamp-2 username" [class.disabled]="disabled">
         {{ displayName || ('initials-avatar.unassigned' | translate) }}
     </div>
 </div>
diff --git a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
index 79ee82fc0..4636db7ab 100644
--- a/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
@@ -15,7 +15,6 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
     @Input() public size: 'small' | 'large' = 'small';
     @Input() public withName = false;
     @Input() public showYou = false;
-    @Input() public alwaysShowName = false;
     @Input() public tooltipPosition: 'below' | 'above' = 'above';
 
     public displayName: string;
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index cbe6ca36e..2fdf6d02e 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/apps/red-ui/src/assets/styles/red-page-layout.scss
@@ -127,8 +127,13 @@ body {
     }
 
     @media only screen and (max-width: 1600px) {
-        redaction-initials-avatar .username:not(.always-visible) {
-            display: none;
+        .user-column {
+            justify-content: center;
+            align-items: center;
+
+            redaction-initials-avatar .username {
+                display: none;
+            }
         }
     }
 }