SuiteCRM/SuiteCRM-Core
2
0
Fork 0
mirror of https://github.com/SuiteCRM/SuiteCRM-Core.git synced 2025-09-02 08:09:19 +08:00
Code Issues Projects Packages Activity Actions

Adjust top widget styling

Browse source
This commit is contained in:
Clemente Raposo 2025-01-21 12:41:09 +00:00 • committed by Jack Anderson
parent 4a956fea14
commit 8aaf22e0ff
2 changed files with 69 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

8
core/app/core/src/lib/containers/top-widget/components/statistics-top-widget/statistics-top-widget.component.html
View file

@ -31,9 +31,10 @@
{{vm.appStrings[this.messageLabelKey] || '' | uppercase}} {{vm.appStrings[this.messageLabelKey] || '' | uppercase}}
</div> </div>
<ng-container *ngIf="!loading()"> <ng-container *ngIf="!loading()">
<ng-container *ngFor="let item of statistics | keyvalue"> <div class="d-flex justify-content-center align-items-center w-100 mt-3 mb-3">
<ng-container *ngFor="let item of statistics | keyvalue; index as i; last as isLast; count as total">
<div class="d-flex flex-column justify-content-center align-items-baseline widget-bar-entry p-2"> <div class="d-flex col h-100 flex-column justify-content-start align-items-center widget-bar-entry"
[class.border-right]="total > 1 && i%2 === 0 && !isLast">
<ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)"> <ng-container *ngIf="!shouldHide(vm.statistics[item.key], item.value)">
@ -87,6 +88,7 @@
</div> </div>
</ng-container> </ng-container>
</div>
</ng-container> </ng-container>
<ng-container *ngIf="loading()"> <ng-container *ngIf="loading()">

23
core/app/shell/src/themes/suite8/css/components/_widget-bar.scss
View file

@ -29,12 +29,19 @@
color: $dark-midnight-grey; color: $dark-midnight-grey;
box-shadow: 0 .125rem .25rem #00000013; box-shadow: 0 .125rem .25rem #00000013;
border: 1px solid $extra-light-grey; border: 1px solid $extra-light-grey;
min-height: 70px; min-height: 60px;
.widget-bar-entry:not(:first-child):not(:last-child) {
margin-top: .5rem;
margin-bottom: .5rem;
}
} }
.widget-bar .widget-bar-entry-value { .widget-bar .widget-bar-entry-value {
font-weight: 900; font-weight: 700;
font-size: 1.7em; font-size: 1.3em;
.skeleton-field-content { .skeleton-field-content {
background-color: $dark-midnight-grey; background-color: $dark-midnight-grey;
@ -45,9 +52,17 @@
.widget-bar .widget-bar-entry-label, .widget-bar .widget-bar-entry-label,
.widget-bar .widget-bar-entry-end-label { .widget-bar .widget-bar-entry-end-label {
font-weight: 400; font-weight: 400;
font-size: 0.7em; font-size: 0.8em;
text-align: center;
} }
.widget-bar .widget-bar-entry-label:first-child {
padding-top: 0.2rem;
}
.widget-bar .inline-spinner > div { .widget-bar .inline-spinner > div {
width: 0.45em; width: 0.45em;
height: 0.45em; height: 0.45em;