From 2d255a219d443aa76b83f99f1da4681760437215 Mon Sep 17 00:00:00 2001 From: burgerni10 Date: Mon, 26 Jun 2023 14:05:59 +0200 Subject: [PATCH] fix(ui): Improve OIBus CSS --- frontend/angular.json | 3 + frontend/src/app/about/about.component.html | 2 +- .../src/app/auth/login/login.component.html | 2 +- .../src/app/auth/login/login.component.scss | 1 + .../edit-engine/edit-engine.component.html | 2 +- .../app/engine/engine-detail.component.html | 2 +- .../src/app/engine/engine-detail.component.ts | 6 +- .../external-source-list.component.html | 2 +- .../ip-filter-list.component.html | 4 +- .../scan-mode-list.component.html | 4 +- .../edit-history-query.component.html | 2 +- .../history-query-items.component.html | 7 +- frontend/src/app/logs/logs.component.html | 8 +- frontend/src/app/logs/logs.component.scss | 126 +++++++++++ ...-north-connector-type-modal.component.html | 35 +-- ...-north-connector-type-modal.component.scss | 33 ++- ...se-north-connector-type-modal.component.ts | 19 ++ .../north-detail/north-detail.component.html | 6 +- .../north-metrics.component.html | 4 +- .../north-subscriptions.component.html | 8 +- .../src/app/shared/box/box.component.html | 2 +- .../src/app/shared/box/box.component.scss | 10 + frontend/src/app/shared/box/box.component.ts | 39 +++- .../datepicker-container.component.html | 2 +- .../oib-form-array/oib-array.component.scss | 6 +- ...-south-connector-type-modal.component.html | 35 +-- ...-south-connector-type-modal.component.scss | 29 ++- ...se-south-connector-type-modal.component.ts | 19 ++ .../south-detail/south-detail.component.html | 2 +- .../south-items/south-items.component.html | 20 +- .../south-metrics.component.html | 4 +- .../edit-user-settings.component.html | 2 - frontend/src/styles.scss | 200 +++++++++++++----- 33 files changed, 504 insertions(+), 142 deletions(-) diff --git a/frontend/angular.json b/frontend/angular.json index 36ae1143fc..f839066ac5 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -130,5 +130,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/frontend/src/app/about/about.component.html b/frontend/src/app/about/about.component.html index b1fdb323f0..05aad7550a 100644 --- a/frontend/src/app/about/about.component.html +++ b/frontend/src/app/about/about.component.html @@ -3,7 +3,7 @@

-
+
diff --git a/frontend/src/app/auth/login/login.component.html b/frontend/src/app/auth/login/login.component.html index b8f9f260d2..0d637b1b27 100644 --- a/frontend/src/app/auth/login/login.component.html +++ b/frontend/src/app/auth/login/login.component.html @@ -3,7 +3,7 @@

-
+
diff --git a/frontend/src/app/auth/login/login.component.scss b/frontend/src/app/auth/login/login.component.scss index a59e1eae93..c3df2cda33 100644 --- a/frontend/src/app/auth/login/login.component.scss +++ b/frontend/src/app/auth/login/login.component.scss @@ -5,3 +5,4 @@ input.form-control { background-color: white; } + diff --git a/frontend/src/app/engine/edit-engine/edit-engine.component.html b/frontend/src/app/engine/edit-engine/edit-engine.component.html index b9ca72488b..658d1de970 100644 --- a/frontend/src/app/engine/edit-engine/edit-engine.component.html +++ b/frontend/src/app/engine/edit-engine/edit-engine.component.html @@ -45,7 +45,7 @@

- + diff --git a/frontend/src/app/engine/engine-detail.component.html b/frontend/src/app/engine/engine-detail.component.html index a366f4e1bc..2c4b22e397 100644 --- a/frontend/src/app/engine/engine-detail.component.html +++ b/frontend/src/app/engine/engine-detail.component.html @@ -42,7 +42,7 @@

- +
diff --git a/frontend/src/app/engine/engine-detail.component.ts b/frontend/src/app/engine/engine-detail.component.ts index f2ad38c260..29fe9ca93a 100644 --- a/frontend/src/app/engine/engine-detail.component.ts +++ b/frontend/src/app/engine/engine-detail.component.ts @@ -10,9 +10,9 @@ import { IpFilterListComponent } from './ip-filter-list/ip-filter-list.component import { NotificationService } from '../shared/notification.service'; import { ConfirmationService } from '../shared/confirmation.service'; import { switchMap } from 'rxjs'; -import { BoxComponent } from '../shared/box/box.component'; import { EnabledEnumPipe } from '../shared/enabled-enum.pipe'; import { ObservableState } from '../shared/save-button/save-button.component'; +import { BoxComponent } from '../shared/box/box.component'; @Component({ selector: 'oib-engine-detail', @@ -24,10 +24,10 @@ import { ObservableState } from '../shared/save-button/save-button.component'; ScanModeListComponent, ExternalSourceListComponent, IpFilterListComponent, - BoxComponent, EnabledEnumPipe, NgForOf, - AsyncPipe + AsyncPipe, + BoxComponent ], templateUrl: './engine-detail.component.html', styleUrls: ['./engine-detail.component.scss'] diff --git a/frontend/src/app/engine/external-source-list/external-source-list.component.html b/frontend/src/app/engine/external-source-list/external-source-list.component.html index 03f8950160..152c4f7291 100644 --- a/frontend/src/app/engine/external-source-list/external-source-list.component.html +++ b/frontend/src/app/engine/external-source-list/external-source-list.component.html @@ -2,7 +2,7 @@
-
diff --git a/frontend/src/app/engine/ip-filter-list/ip-filter-list.component.html b/frontend/src/app/engine/ip-filter-list/ip-filter-list.component.html index 4537d71faa..5c46781743 100644 --- a/frontend/src/app/engine/ip-filter-list/ip-filter-list.component.html +++ b/frontend/src/app/engine/ip-filter-list/ip-filter-list.component.html @@ -2,7 +2,7 @@
-
@@ -11,7 +11,7 @@
-
+
diff --git a/frontend/src/app/engine/scan-mode-list/scan-mode-list.component.html b/frontend/src/app/engine/scan-mode-list/scan-mode-list.component.html index 2a7cec9a04..11abadfbd3 100644 --- a/frontend/src/app/engine/scan-mode-list/scan-mode-list.component.html +++ b/frontend/src/app/engine/scan-mode-list/scan-mode-list.component.html @@ -2,7 +2,7 @@
-
@@ -11,7 +11,7 @@
-
+
diff --git a/frontend/src/app/history-query/edit-history-query/edit-history-query.component.html b/frontend/src/app/history-query/edit-history-query/edit-history-query.component.html index 985c1ea073..c222ffa4f3 100644 --- a/frontend/src/app/history-query/edit-history-query/edit-history-query.component.html +++ b/frontend/src/app/history-query/edit-history-query/edit-history-query.component.html @@ -246,7 +246,7 @@

+
diff --git a/frontend/src/app/history-query/history-query-items/history-query-items.component.html b/frontend/src/app/history-query/history-query-items/history-query-items.component.html index 55d890c853..20398ea852 100644 --- a/frontend/src/app/history-query/history-query-items/history-query-items.component.html +++ b/frontend/src/app/history-query/history-query-items/history-query-items.component.html @@ -4,8 +4,7 @@
-
+
-

+
diff --git a/frontend/src/app/logs/logs.component.html b/frontend/src/app/logs/logs.component.html index eb498ce3d0..2ea75b5061 100644 --- a/frontend/src/app/logs/logs.component.html +++ b/frontend/src/app/logs/logs.component.html @@ -52,8 +52,8 @@

{{ 'logs.title' | translate }}

-
-
+
+
@@ -65,7 +65,9 @@

{{ 'logs.title' | translate }}

- + diff --git a/frontend/src/app/logs/logs.component.scss b/frontend/src/app/logs/logs.component.scss index e69de29bb2..c6b1b47d7c 100644 --- a/frontend/src/app/logs/logs.component.scss +++ b/frontend/src/app/logs/logs.component.scss @@ -0,0 +1,126 @@ +@import 'src/common.scss'; + +.level-badge { + display: inline-block; + padding: 0.25rem 0.8rem; + border-radius: 10rem; + font-weight: bold; + text-align: center; +} + +.level-badge.error { + background-color: #E24D42; + color: $lightGrey; +} + +.level-badge.warn { + background-color: #EAB837; + color: $darkGrey; +} + +.level-badge.info { + background-color: #7CB26C; + color: $lightGrey; +} + +.level-badge.debug { + background-color: #2478BE; + color: $lightGrey; +} + +.level-badge.trace { + background-color: #72CDDE; + color: $lightGrey; +} + +// changes of the default display +.oib-table-logs { + // table header + thead { + color: white; + background-color: $darkGrey; + // alternative case + &.light { + color: $darkGrey; + background-color: white; + } + // case of table header + th { + padding-left: 1rem; + border-style: none; + } + // first case of the first line + th:first-child { + border-top-left-radius: 1rem; + width: 11rem; + } + // last case of the first line + th:last-child { + border-top-right-radius: 1rem; + } + // alternative case if oib-box-title is on top of table + .light { + background-color: $white; + } + } + // body of the table + tbody { + padding: 0; + // case of table + td { + padding-left: 1rem; + border-bottom-width: 0px; + vertical-align: middle; + } + // line + tr { + max-width: 155rem; + // color of button in table in line + .btn { + color: $blue; + } + // hover settings + &:hover { + // color of button in line when hover the line + .btn { + color: $darkGrey; + // color of button when hover it + &:hover { + color: $yellow; + } + } + } + td:first-child { + width: 11rem; + } + td:nth-child(2) { + width: 2rem; + } + td:nth-child(3) { + width: 6rem; + } + td:last-child { + text-align: right; + padding-right: 1em; + overflow-wrap: break-word; + max-width: 12rem; //idk why but with a little max-width the table isn't broken + } + } + // customised colours on the lines (one out of two) + tr:nth-child(even) { + background-color: $white; + // changes color when hover + &:hover { + background-color: $mediumGrey; + } + } + // customised colours on the lines (one out of two) + tr:nth-child(odd) { + background-color: $veryLightGrey; + // changes color when hover + &:hover { + background-color: $mediumGrey; + } + } + } +} diff --git a/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.html b/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.html index b2d09cfd8a..05bd7bf00c 100644 --- a/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.html +++ b/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.html @@ -3,21 +3,26 @@

-
- -
+ +
+

{{ 'enums.categories.' + group.category | translate }}

+
+
+ +
+
diff --git a/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.scss b/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.scss index c26a72486b..4a247f28d5 100644 --- a/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.scss +++ b/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.scss @@ -1,5 +1,25 @@ @import '../../../common'; +.modal-content-list { + background-color: $veryLightGrey; + border-radius: 1rem; + margin: 0.5rem; + width: 100%; + height:90%; + color: $darkGrey; +} + +.modal-container-list { + padding: 0; +} + +.modal-container-list:hover { + .modal-content-list { + background-color: $yellow; + color: $darkGrey; + } +} + .module-button { border: none; width: 100%; @@ -18,17 +38,17 @@ } .category-image { - height: 40px; + height: 3rem; + transform: translate(0%,30%); } .image-block { - height: 100%; text-align: center; color: $white; border-radius: 12px; background-color: $darkGrey; - width: 50px; - min-height: 30px; + width: 5rem; + height: 5rem; } h5 { @@ -39,6 +59,11 @@ h6 { font-size: 1.75rem; } +h1 { + text-transform: capitalize; + color: $darkGrey; +} + p { font-size: 1.2rem; } diff --git a/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.ts b/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.ts index d3dbbfaa5d..c35d24813f 100644 --- a/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.ts +++ b/frontend/src/app/north/choose-north-connector-type-modal/choose-north-connector-type-modal.component.ts @@ -16,15 +16,34 @@ import { NorthConnectorService } from '../../services/north-connector.service'; }) export class ChooseNorthConnectorTypeModalComponent implements OnInit { northTypes: Array = []; + groupedNorthTypes: { category: string; types: NorthType[] }[] = []; constructor(private modal: NgbActiveModal, private northConnectorService: NorthConnectorService, private router: Router) {} ngOnInit() { this.northConnectorService.getNorthConnectorTypes().subscribe(types => { this.northTypes = types; + this.groupNorthTypes(); }); } + groupNorthTypes() { + const groupedTypes: { [key: string]: NorthType[] } = {}; + + for (const northType of this.northTypes) { + if (groupedTypes[northType.category]) { + groupedTypes[northType.category].push(northType); + } else { + groupedTypes[northType.category] = [northType]; + } + } + + this.groupedNorthTypes = Object.keys(groupedTypes).map(category => ({ + category, + types: groupedTypes[category] + })); + } + selectType(type: string) { this.modal.close(); this.router.navigate(['/north', 'create'], { queryParams: { type: type } }); diff --git a/frontend/src/app/north/north-detail/north-detail.component.html b/frontend/src/app/north/north-detail/north-detail.component.html index 3beae8382b..74e5808e47 100644 --- a/frontend/src/app/north/north-detail/north-detail.component.html +++ b/frontend/src/app/north/north-detail/north-detail.component.html @@ -20,7 +20,7 @@

-

{{ log.timestamp | datetime:'mediumWithSeconds'}}{{ log.level | logLevelsEnum }} + {{ log.level | logLevelsEnum }} + {{ log.scope }} {{ log.message }}
+
@@ -39,14 +39,14 @@

-

+
diff --git a/frontend/src/app/north/north-detail/north-metrics/north-metrics.component.html b/frontend/src/app/north/north-detail/north-metrics/north-metrics.component.html index f994e2bb65..2b24a3757e 100644 --- a/frontend/src/app/north/north-detail/north-metrics/north-metrics.component.html +++ b/frontend/src/app/north/north-detail/north-metrics/north-metrics.component.html @@ -2,11 +2,11 @@
- +
-
+
diff --git a/frontend/src/app/north/north-subscriptions/north-subscriptions.component.html b/frontend/src/app/north/north-subscriptions/north-subscriptions.component.html index 0d111c0704..a06a69826e 100644 --- a/frontend/src/app/north/north-subscriptions/north-subscriptions.component.html +++ b/frontend/src/app/north/north-subscriptions/north-subscriptions.component.html @@ -2,12 +2,12 @@
- +
-
-
+
+
@@ -32,6 +32,6 @@
-
+
diff --git a/frontend/src/app/shared/box/box.component.html b/frontend/src/app/shared/box/box.component.html index 4536e6a577..c044d654db 100644 --- a/frontend/src/app/shared/box/box.component.html +++ b/frontend/src/app/shared/box/box.component.html @@ -7,7 +7,7 @@ {{ boxTitle | translate }}
-
+
diff --git a/frontend/src/app/shared/box/box.component.scss b/frontend/src/app/shared/box/box.component.scss index 5d4e87f30f..ac2cc53330 100644 --- a/frontend/src/app/shared/box/box.component.scss +++ b/frontend/src/app/shared/box/box.component.scss @@ -1,3 +1,13 @@ :host { display: block; } + +.oib-box-content { + padding: 0.3rem 0.75rem; /* Default padding */ +} + +.oib-box-content.has-table, +.oib-box-content.has-empty-div, +.oib-box-content.has-alert-warning { + padding: 0; /* Remove padding for table, empty div, and alert-warning */ +} diff --git a/frontend/src/app/shared/box/box.component.ts b/frontend/src/app/shared/box/box.component.ts index 38a664d27d..dad0b307f1 100644 --- a/frontend/src/app/shared/box/box.component.ts +++ b/frontend/src/app/shared/box/box.component.ts @@ -2,11 +2,12 @@ import { AfterContentInit, ChangeDetectionStrategy, Component, - ContentChildren, + ContentChild, Directive, + ElementRef, Input, - QueryList, - TemplateRef + TemplateRef, + ViewChild } from '@angular/core'; import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap'; import { NgIf, NgTemplateOutlet } from '@angular/common'; @@ -21,8 +22,8 @@ export class BoxTitleDirective { } /** - * A reusable box component with a title and a content. - * The title can be simple text, or can be a ng-template. + * A reusable box component with a title and content. + * The title can be simple text, or an ng-template. * The content is always projected content. */ @Component({ @@ -37,9 +38,33 @@ export class BoxComponent implements AfterContentInit { @Input() boxTitle = ''; titleTemplateRef: TemplateRef | null = null; - @ContentChildren(BoxTitleDirective, { descendants: false }) titleQuery: QueryList | undefined; + @ViewChild('boxContent', { static: true }) boxContent: ElementRef | undefined; + @ContentChild(BoxTitleDirective, { static: true }) titleQuery: BoxTitleDirective | undefined; ngAfterContentInit(): void { - this.titleTemplateRef = this.titleQuery?.first?.templateRef || null; + this.titleTemplateRef = this.titleQuery?.templateRef || null; + this.checkContent(); + } + + private checkContent(): void { + const contentElement = this.boxContent?.nativeElement; + + if (contentElement) { + const tableElement = contentElement.querySelector('table'); + const alertWarningElement = contentElement.querySelector('.alert-warning'); + const emptyDivElements = contentElement.querySelectorAll('div:empty'); + + contentElement.classList.remove('has-empty-div'); // Supprime la classe existante + + if (tableElement) { + contentElement.classList.add('has-table'); + } + if (emptyDivElements.length > 0) { + contentElement.classList.add('has-empty-div'); + } + if (alertWarningElement) { + contentElement.classList.add('has-alert-warning'); + } + } } } diff --git a/frontend/src/app/shared/datepicker-container/datepicker-container.component.html b/frontend/src/app/shared/datepicker-container/datepicker-container.component.html index 57bedfdf78..0b280ecb19 100644 --- a/frontend/src/app/shared/datepicker-container/datepicker-container.component.html +++ b/frontend/src/app/shared/datepicker-container/datepicker-container.component.html @@ -1,4 +1,4 @@ - diff --git a/frontend/src/app/shared/form/oib-form-array/oib-array.component.scss b/frontend/src/app/shared/form/oib-form-array/oib-array.component.scss index 364d1ce4c8..64aaf4e640 100644 --- a/frontend/src/app/shared/form/oib-form-array/oib-array.component.scss +++ b/frontend/src/app/shared/form/oib-form-array/oib-array.component.scss @@ -1,11 +1,13 @@ .data-list-header { background-color: #e9ecef; - border-bottom: 2px solid #dee2e6; - border-top: 2px solid #dee2e6; + border-bottom: 0px; + border-top: 0px; + border-radius: 1rem; } .component-drop-list { min-height: 2rem; + border-radius: 1rem; &.empty { background-color: #e9ecef; } diff --git a/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.html b/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.html index 7c998e6883..32ccd96767 100644 --- a/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.html +++ b/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.html @@ -3,21 +3,26 @@

-
- -
+ +
+

{{ 'enums.categories.' + group.category | translate }}

+
+
+ +
+
diff --git a/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.scss b/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.scss index c26a72486b..c202c6d26f 100644 --- a/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.scss +++ b/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.scss @@ -1,5 +1,21 @@ @import '../../../common'; +.modal-content-list { + background-color: $veryLightGrey; + border-radius: 1rem; + margin: 0.5rem; + width: 100%; + height:90%; + color: $darkGrey; +} + +.modal-container-list:hover { + .modal-content-list { + background-color: $yellow; + color: $darkGrey; + } +} + .module-button { border: none; width: 100%; @@ -18,17 +34,17 @@ } .category-image { - height: 40px; + height: 3rem; + transform: translate(0%,30%); } .image-block { - height: 100%; text-align: center; color: $white; border-radius: 12px; background-color: $darkGrey; - width: 50px; - min-height: 30px; + width: 5rem; + height: 5rem; } h5 { @@ -39,6 +55,11 @@ h6 { font-size: 1.75rem; } +h1 { + text-transform: capitalize; + color: $darkGrey; +} + p { font-size: 1.2rem; } diff --git a/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.ts b/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.ts index a21f4b8898..e320979c4d 100644 --- a/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.ts +++ b/frontend/src/app/south/choose-south-connector-type-modal/choose-south-connector-type-modal.component.ts @@ -16,15 +16,34 @@ import { NgForOf } from '@angular/common'; }) export class ChooseSouthConnectorTypeModalComponent implements OnInit { southTypes: Array = []; + groupedSouthTypes: { category: string; types: SouthType[] }[] = []; constructor(private modal: NgbActiveModal, private southConnectorService: SouthConnectorService, private router: Router) {} ngOnInit() { this.southConnectorService.getAvailableTypes().subscribe(types => { this.southTypes = types; + this.groupSouthTypes(); }); } + groupSouthTypes() { + const groupedTypes: { [key: string]: SouthType[] } = {}; + + for (const southType of this.southTypes) { + if (groupedTypes[southType.category]) { + groupedTypes[southType.category].push(southType); + } else { + groupedTypes[southType.category] = [southType]; + } + } + + this.groupedSouthTypes = Object.keys(groupedTypes).map(category => ({ + category, + types: groupedTypes[category] + })); + } + selectType(type: string) { this.modal.close(); this.router.navigate(['/south', 'create'], { queryParams: { type: type } }); diff --git a/frontend/src/app/south/south-detail/south-detail.component.html b/frontend/src/app/south/south-detail/south-detail.component.html index 2f78ba0438..84690fc89a 100644 --- a/frontend/src/app/south/south-detail/south-detail.component.html +++ b/frontend/src/app/south/south-detail/south-detail.component.html @@ -33,7 +33,7 @@

+ diff --git a/frontend/src/app/south/south-items/south-items.component.html b/frontend/src/app/south/south-items/south-items.component.html index dee7e6b6af..7564272bc7 100644 --- a/frontend/src/app/south/south-items/south-items.component.html +++ b/frontend/src/app/south/south-items/south-items.component.html @@ -4,21 +4,20 @@
- - + - +
-
+
-
+
diff --git a/frontend/src/app/south/south-metrics/south-metrics.component.html b/frontend/src/app/south/south-metrics/south-metrics.component.html index 4fef41f471..9f13e99def 100644 --- a/frontend/src/app/south/south-metrics/south-metrics.component.html +++ b/frontend/src/app/south/south-metrics/south-metrics.component.html @@ -2,11 +2,11 @@
- +
-
+
diff --git a/frontend/src/app/user-settings/edit-user-settings/edit-user-settings.component.html b/frontend/src/app/user-settings/edit-user-settings/edit-user-settings.component.html index 24f4d1c39c..c15348999a 100644 --- a/frontend/src/app/user-settings/edit-user-settings/edit-user-settings.component.html +++ b/frontend/src/app/user-settings/edit-user-settings/edit-user-settings.component.html @@ -40,8 +40,6 @@

{{ editedUserSettings.login }}

-
-
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 76f7040b97..30432d9af9 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -15,6 +15,54 @@ $fa-font-path: '../fonts'; --menu-height: 35px; } +.oib-box-btn { + padding-bottom: 0.2rem; +} + +.box { + .alert-warning { + border-bottom-right-radius: 1rem; + border-bottom-left-radius: 1rem; + } +} + +// customization of the button of datepicker + .datepicker-toggle { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + background-color: $yellow; + color: $darkGrey; + border: 0px; + &:hover { + border-top-right-radius: 1rem; + border-bottom-right-radius: 1rem; + background-color: $electricBlue; + color: $white; + border: 0px; + } + } +// change to yellow when hover a day in the ngb-datepicker +.dropdown-menu.show { + .btn-light { + color: $darkGrey; + } + .btn-light:hover { + background-color: $yellow; + } + .btn-light:active, .bg-primary { + background-color: $electricBlue; + color:white; + } + .bg-primary { + background-color: $electricBlue; + color:white; + } +} +.ngb-dp-weekday.small { + color: $electricBlue; +} + +// container of the page + padding .oib-padded-container { padding-left: 2rem; padding-right: 2rem; @@ -26,20 +74,31 @@ $fa-font-path: '../fonts'; } } +// container of the page title .oib-header-container { height: 4rem; } +// search bar form .oib-search-form { background-color: $veryLightGrey; border-radius: 1rem; } +// display of grey empty field under a oib-box-title .oib-grey-container { background-color: $lightGrey; border-radius: 0.25rem; padding: 0.375rem 0.75rem; - border: 1px solid $mediumGrey; + border: 0px; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; +} + +// display of grey alone empty field +.oib-grey-container.empty { + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; } .oib-inner-form { @@ -50,65 +109,75 @@ $fa-font-path: '../fonts'; } .oib-table { + // table header thead { color: white; background-color: $darkGrey; - + // alternative case &.light { color: $darkGrey; background-color: white; } - + // case of table header th { padding-left: 1rem; border-style: none; } - + // first case of the first line th:first-child { - border-top-left-radius: 10px; + border-top-left-radius: 1rem; } - + // last case of the first line th:last-child { - border-top-right-radius: 10px; + border-top-right-radius: 1rem; } - + // alternative case if oib-box-title is on top of table .light { background-color: $white; } } - + // body of the table tbody { + padding: 0; + // case of table td { padding-left: 1rem; + border-bottom-width: 0px; } - + // line tr { + // color of button in table in line .btn { color: $blue; } - + // hover settings &:hover { + // color of button in line when hover the line .btn { color: $darkGrey; - + // color of button when hover it &:hover { color: $yellow; } } } + td:last-child { + text-align: right; + padding-right: 1em; + } } - + // customised colours on the lines (one out of two) tr:nth-child(even) { background-color: $white; - + // changes color when hover &:hover { background-color: $mediumGrey; } } - + // customised colours on the lines (one out of two) tr:nth-child(odd) { background-color: $veryLightGrey; - + // changes color when hover &:hover { background-color: $mediumGrey; } @@ -116,6 +185,7 @@ $fa-font-path: '../fonts'; } } +// darkGrey container for title .oib-box-title { background-color: $darkGrey; color: $white; @@ -123,23 +193,31 @@ $fa-font-path: '../fonts'; font-weight: bold; border-top-left-radius: 1rem; border-top-right-radius: 1rem; - + // style in oib-box-title of primary button .btn-primary { margin-right: 0.75rem; } - + // style in oib-box-title of link button .btn-link { color: $white; padding: 0 0.75rem; - + // style in oib-box-title of link button when hover &:hover { color: $yellow; } } } -.oib-box-content { - padding: 0.3rem 0.75rem; +// container for title (head of the box) +.oib-box-title { + input.form-control { + background-color: $white !important; + } +} + +.oib-box-input-header { + width: 20rem; + height: 1.5rem; } // override of some bootstrap styles to better fit Optimistik branding @@ -161,7 +239,7 @@ $fa-font-path: '../fonts'; color: $darkGrey; } } - +// override of some bootstrap styles to better fit Optimistik branding .btn-cancel { @extend .btn-primary; background-color: $blue !important; @@ -170,12 +248,23 @@ $fa-font-path: '../fonts'; background-color: $yellow; } } - +// override of some bootstrap styles to better fit Optimistik branding .btn-danger { @extend .btn-primary; background-color: $red; } +.btn-outline-secondary { + border: 1px $blue solid; + color: $blue; + &:hover { + background-color: $blue; + color: white; + border: 1px $blue solid; + } +} + +// margin for better readability .form-group { margin-bottom: 1rem; } @@ -205,12 +294,6 @@ textarea.form-control { } } -.oib-box-title { - input.form-control { - background-color: $white !important; - } -} - .input-group-text { border-radius: 1rem; border: none; @@ -258,19 +341,10 @@ label.col-form-label { } label.form-check-label { - font-size: 1rem; + font-size: 1rem; // .form-check-label is bigger than our default labels font-weight: normal; } -// customization of modal colors -.modal-body { - background-color: $white !important; -} - -.modal-footer { - background-color: $white !important; -} - // This targets the errors that appear inside the val-errors component. // Since errors occupy some vertical space, clicking on a button such as a cancel button which comes after a focused // invalid control misses the button, because the click is done after the blur of the invalid control, which makes the @@ -295,17 +369,31 @@ val-errors > div { opacity: 1; } } - +// customization of modal colors +.modal-body { + background-color: $white !important; +} +// customization of modal footer colors +.modal-footer { + background-color: $white !important; + border-top: 0px; + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + border:0px; +} +// customization of modal content colors .modal-content { background-color: transparent; - + border: 0px; + // customization of modal header colors in modal content .modal-header { background-color: $darkGrey; - border-bottom: 1px solid $darkGrey; color: white; padding-top: 0.5rem; padding-bottom: 0.5rem; - + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; + // customization of modal title font size in modal content .modal-title { font-size: 1.1rem; } @@ -317,40 +405,50 @@ val-errors > div { } } +// centered position of flex items in a modal +.modal-container-list { + display: flex; + align-items: center; +} + +// Suppression of border on not-first and not-last child of btn-group .btn-group { .btn:not(:last-child) { border-right-color: white; } - .btn:not(:first-child) { border-left-color: white; } } +// custom pagination system to fit better with the optimistik branding // override of bootstrap page styles -.page-item { - border: none; - padding-left: 0.7rem; -} - +// style of page number .page-link { color: $darkGrey; background-color: $veryLightGrey; border: none; border-radius: 0.3rem; - + // the page number changes color on hover &:hover { color: $white; background-color: $yellow; - } + }} + +// arrow to navigate +.page-item { + border: none; + padding-left: 0.7rem; } +// arrow to navigate (disable) .page-item.disabled { .page-link { background-color: $veryLightGrey; } } +// arrow to navigate (active) .page-item.active { .page-link { background-color: $electricBlue;