From f6e9cb9bbbb111a88eb1892f77e1860b7726d8a9 Mon Sep 17 00:00:00 2001 From: Loris Giraud Date: Mon, 17 Jul 2023 12:51:03 +0200 Subject: [PATCH] fix(styles): change of south/north/history-query icon add new files: history-query.svg + north.svg + south.svg. New class: oib-title-image/title-image (the purpose of these css classes is to resize the new icons) correct bug about oib-box --- .../history-query-list.component.html | 2 ++ .../history-query-list.component.scss | 31 +++++++++++++++++++ .../src/app/north/north-list.component.html | 2 ++ .../src/app/north/north-list.component.scss | 31 +++++++++++++++++++ .../src/app/shared/box/box.component.html | 5 ++- frontend/src/app/shared/box/box.component.ts | 12 ++++++- .../src/app/south/south-list.component.html | 2 ++ .../src/app/south/south-list.component.scss | 31 +++++++++++++++++++ frontend/src/assets/home/history-queries.svg | 1 - frontend/src/assets/home/history-query.svg | 19 ++++++++++++ frontend/src/assets/home/north.svg | 18 ++++++++++- frontend/src/assets/home/south.svg | 18 ++++++++++- frontend/src/styles.scss | 5 +++ 13 files changed, 172 insertions(+), 5 deletions(-) delete mode 100644 frontend/src/assets/home/history-queries.svg create mode 100644 frontend/src/assets/home/history-query.svg diff --git a/frontend/src/app/history-query/history-query-list.component.html b/frontend/src/app/history-query/history-query-list.component.html index c8c293ff04..165905d5c9 100644 --- a/frontend/src/app/history-query/history-query-list.component.html +++ b/frontend/src/app/history-query/history-query-list.component.html @@ -1,6 +1,8 @@
+
+

diff --git a/frontend/src/app/history-query/history-query-list.component.scss b/frontend/src/app/history-query/history-query-list.component.scss index e69de29bb2..ed23d1ebc9 100644 --- a/frontend/src/app/history-query/history-query-list.component.scss +++ b/frontend/src/app/history-query/history-query-list.component.scss @@ -0,0 +1,31 @@ +@import '../../common'; + +.image-block { + text-align: center; + color: $white; + border-radius: 1rem; + background-color: $darkGrey; + width: 5rem; + height: 4rem; + margin-left: 0 !important; +} + +img.title-image { + height: 3rem; + padding-top: 1rem; +} + +// container of the page title +.oib-header-container { + display: flex; +} + +.justify-content-between{ + margin: 0; + margin-bottom: 1rem; +} + +h1 { + margin-top: 0.8rem; + margin-left: 1rem +} diff --git a/frontend/src/app/north/north-list.component.html b/frontend/src/app/north/north-list.component.html index 2f878f5a8e..43a1bdbb9c 100644 --- a/frontend/src/app/north/north-list.component.html +++ b/frontend/src/app/north/north-list.component.html @@ -1,6 +1,8 @@
+
+

diff --git a/frontend/src/app/north/north-list.component.scss b/frontend/src/app/north/north-list.component.scss index e69de29bb2..ed23d1ebc9 100644 --- a/frontend/src/app/north/north-list.component.scss +++ b/frontend/src/app/north/north-list.component.scss @@ -0,0 +1,31 @@ +@import '../../common'; + +.image-block { + text-align: center; + color: $white; + border-radius: 1rem; + background-color: $darkGrey; + width: 5rem; + height: 4rem; + margin-left: 0 !important; +} + +img.title-image { + height: 3rem; + padding-top: 1rem; +} + +// container of the page title +.oib-header-container { + display: flex; +} + +.justify-content-between{ + margin: 0; + margin-bottom: 1rem; +} + +h1 { + margin-top: 0.8rem; + margin-left: 1rem +} diff --git a/frontend/src/app/shared/box/box.component.html b/frontend/src/app/shared/box/box.component.html index c044d654db..6f82bafd91 100644 --- a/frontend/src/app/shared/box/box.component.html +++ b/frontend/src/app/shared/box/box.component.html @@ -4,7 +4,10 @@ - {{ boxTitle | translate }} + + Image + {{ boxTitle | translate }} +

diff --git a/frontend/src/app/shared/box/box.component.ts b/frontend/src/app/shared/box/box.component.ts index dad0b307f1..a559b05fa9 100644 --- a/frontend/src/app/shared/box/box.component.ts +++ b/frontend/src/app/shared/box/box.component.ts @@ -37,6 +37,7 @@ export class BoxTitleDirective { export class BoxComponent implements AfterContentInit { @Input() boxTitle = ''; titleTemplateRef: TemplateRef | null = null; + imagePath = ''; @ViewChild('boxContent', { static: true }) boxContent: ElementRef | undefined; @ContentChild(BoxTitleDirective, { static: true }) titleQuery: BoxTitleDirective | undefined; @@ -59,12 +60,21 @@ export class BoxComponent implements AfterContentInit { if (tableElement) { contentElement.classList.add('has-table'); } - if (emptyDivElements.length > 0) { + if (emptyDivElements.length >= 0) { contentElement.classList.add('has-empty-div'); } if (alertWarningElement) { contentElement.classList.add('has-alert-warning'); } } + + // Assign image path based on boxTitle + if (this.boxTitle.includes('home.south.title')) { + this.imagePath = '../../assets/home/south.svg'; + } else if (this.boxTitle.includes('home.north.title')) { + this.imagePath = '../../assets/home/north.svg'; + } else if (this.boxTitle.includes('home.history-query.title')) { + this.imagePath = '../../assets/home/history-query.svg'; + } } } diff --git a/frontend/src/app/south/south-list.component.html b/frontend/src/app/south/south-list.component.html index f6146d71a4..c9ded11d58 100644 --- a/frontend/src/app/south/south-list.component.html +++ b/frontend/src/app/south/south-list.component.html @@ -1,6 +1,8 @@
+
+

diff --git a/frontend/src/app/south/south-list.component.scss b/frontend/src/app/south/south-list.component.scss index e69de29bb2..ed23d1ebc9 100644 --- a/frontend/src/app/south/south-list.component.scss +++ b/frontend/src/app/south/south-list.component.scss @@ -0,0 +1,31 @@ +@import '../../common'; + +.image-block { + text-align: center; + color: $white; + border-radius: 1rem; + background-color: $darkGrey; + width: 5rem; + height: 4rem; + margin-left: 0 !important; +} + +img.title-image { + height: 3rem; + padding-top: 1rem; +} + +// container of the page title +.oib-header-container { + display: flex; +} + +.justify-content-between{ + margin: 0; + margin-bottom: 1rem; +} + +h1 { + margin-top: 0.8rem; + margin-left: 1rem +} diff --git a/frontend/src/assets/home/history-queries.svg b/frontend/src/assets/home/history-queries.svg deleted file mode 100644 index 8bb3ae1c22..0000000000 --- a/frontend/src/assets/home/history-queries.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/assets/home/history-query.svg b/frontend/src/assets/home/history-query.svg new file mode 100644 index 0000000000..c3f5506407 --- /dev/null +++ b/frontend/src/assets/home/history-query.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/home/north.svg b/frontend/src/assets/home/north.svg index 8bb3ae1c22..03cb9fc66c 100644 --- a/frontend/src/assets/home/north.svg +++ b/frontend/src/assets/home/north.svg @@ -1 +1,17 @@ - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/home/south.svg b/frontend/src/assets/home/south.svg index 8bb3ae1c22..b511439453 100644 --- a/frontend/src/assets/home/south.svg +++ b/frontend/src/assets/home/south.svg @@ -1 +1,17 @@ - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 30432d9af9..4b1fa1d34e 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -15,6 +15,11 @@ $fa-font-path: '../fonts'; --menu-height: 35px; } +img.oib-title-image { + height: 1rem; + margin-right: 0.3rem; +} + .oib-box-btn { padding-bottom: 0.2rem; }