Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Center username column on small screens

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-19 18:31:39 +03:00
parent 44b9757448
commit 1ec45bb837
10 changed files with 20 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
View File

@ -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>

15
apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
View File

@ -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>

16
apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
View File

@ -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;
}
}
}
}

2
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
View File

@ -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">

4
apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -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">

4
apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss
View File

@ -17,10 +17,6 @@
padding-right: 13px;
}
}
//.stats-subtitle {
// margin-top: 6px;
//}
}
&.has-scrollbar:hover {

3
apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -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>

2
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.html
View File

@ -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>

1
apps/red-ui/src/app/modules/shared/components/initials-avatar/initials-avatar.component.ts
View File

@ -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;

9
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -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;
}
}
}
}