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

RED-7641: License view layout fixes

Browse Source
This commit is contained in:
Adina Țeudan 2023-09-26 16:50:29 +03:00
parent 0c586453da
commit 5e72b489d9
6 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/modules/admin/screens/license/components/chart/chart.component.scss
View File

@ -1,7 +1,3 @@
:host {
margin: 0 auto;
}
.canvas-container {
position: relative;
width: 1200px;

20
apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.html
View File

@ -20,7 +20,7 @@
<div>
{{ licenseService.selectedLicenseReport.totalFilesUploadedBytes | size }}
<ng-container *ngIf="licenseService.uploadedFilesBytesForSelectedLicensePercentage >= 0">
({{ licenseService.uploadedFilesBytesForSelectedLicensePercentage | number : '1.0-2' }}%)
({{ licenseService.uploadedFilesBytesForSelectedLicensePercentage | number: '1.0-2' }}%)
</ng-container>
</div>
</div>
@ -38,14 +38,16 @@
></redaction-donut-chart>
</div>
<div class="row">
<redaction-chart
*ngIf="data$ | async as data"
[datasets]="data.datasets"
[labels]="data.labels"
[reverseLegend]="true"
[valueFormatter]="formatSize"
></redaction-chart>
<div class="row chart-row">
<div>
<redaction-chart
*ngIf="data$ | async as data"
[datasets]="data.datasets"
[labels]="data.labels"
[reverseLegend]="true"
[valueFormatter]="formatSize"
></redaction-chart>
</div>
</div>
</div>

8
apps/red-ui/src/app/modules/admin/screens/license/components/license-storage/license-capacity.component.scss
View File

@ -5,11 +5,11 @@
.grid-container {
width: calc(100% - 40px);
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-columns: 250px 300px 1fr;
margin: 20px;
.donut-chart-wrapper {
grid-row: 2 / span 4;
grid-row: 2 / span 5;
grid-column: 3;
width: fit-content;
}
@ -25,7 +25,7 @@
}
}
&:hover {
&:not(.chart-row):hover {
> div {
background-color: var(--iqser-alt-background);
}
@ -39,7 +39,7 @@
border-bottom: 1px solid var(--iqser-separator);
}
redaction-chart {
.chart-row > div {
grid-column: span 3;
}
}

2
apps/red-ui/src/app/modules/admin/screens/license/components/license-usage/license-usage.component.scss
View File

@ -5,7 +5,7 @@
.grid-container {
width: calc(100% - 40px);
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-columns: 250px 300px 1fr;
margin: 20px;
.row {

2
apps/red-ui/src/app/modules/admin/screens/license/license-screen/license-screen.component.scss
View File

@ -11,7 +11,7 @@
.grid-container {
width: calc(100% - 40px);
display: grid;
grid-template-columns: 1fr 2fr 2fr;
grid-template-columns: 250px 300px 1fr;
margin: 20px;
.row {

8
apps/red-ui/src/assets/styles/themes/scm.css
View File

@ -2,8 +2,8 @@ body.light {
--iqser-primary: #4d4fdd;
--iqser-primary-rgb: 77, 79, 221;
--iqser-primary-2: #4d97dd;
--iqser-red-1: #4d4fdd;
--iqser-red-2: #4d97dd;
--iqser-red-1: #dd4d50;
--iqser-red-2: #f16164;
--iqser-helpmode-primary: #fdbd00;
/*Override the default light theme here*/
/*Copy CSS variables from theme-template.css file*/
@ -13,8 +13,8 @@ body.dark {
--iqser-primary: #4d4fdd;
--iqser-primary-rgb: 77, 79, 221;
--iqser-primary-2: #4d97dd;
--iqser-red-1: #4d4fdd;
--iqser-red-2: #4d97dd;
--iqser-red-1: #dd4d50;
--iqser-red-2: #f16164;
--iqser-helpmode-primary: #fdbd00;
/*Override the default dark theme here*/
/*Copy CSS variables from theme-template.css file*/