From 7e4e6e6d46abdd9f3ff17aba76788a4af6cada6d Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Tue, 8 Nov 2022 15:35:48 +0200
Subject: [PATCH] Change position of note and fix padding in number indicators

---
 src/app/monitor/monitor.component.html | 66 ++++++++++++++------------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index 3c37e1b..8e266d8 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -117,31 +117,33 @@
                           class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
                     <!-- ----------------- -->
                     <div *ngIf="indicator.description || indicator.additionalDescription"
-                         class="uk-position-bottom uk-text-center uk-margin-small-bottom">
+                         class="uk-position-bottom-right uk-text-center uk-margin-small-bottom uk-margin-small-right">
                       <a class="uk-display-inline-block uk-button uk-button-text"
                          (click)="toggleDescriptionOverlay($event, j)">
-                      <span class="uk-flex uk-flex-middle">
-                        <icon name="analytics" type="outlined" [flex]="true"></icon>
-                        <span class="uk-margin-small-left">Note</span>
-                      </span>
+                        <span class="uk-flex uk-flex-middle">
+                          <icon name="analytics" type="outlined" [flex]="true"></icon>
+                          <span class="uk-margin-small-left">Note</span>
+                        </span>
                       </a>
                     </div>
                     <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
                          class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
-                      <div class="inner uk-padding-small" click-outside-or-esc
+                      <div class="inner" click-outside-or-esc
                            (clickOutside)="closeDescriptionOverlay($event, j)">
-                        <div class="uk-flex uk-flex-right">
-                          <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
-                            <icon name="close" ratio="1"></icon>
-                          </button>
-                        </div>
-                        <div class="uk-padding-small uk-padding-remove-horizontal">
-                          <p *ngIf="indicator.description">
-                            {{indicator.description}}
-                          </p>
-                          <p *ngIf="indicator.additionalDescription">
-                            {{indicator.additionalDescription}}
-                          </p>
+                        <div class="uk-padding-small">
+                          <div class="uk-flex uk-flex-right">
+                            <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
+                              <icon name="close" ratio="1"></icon>
+                            </button>
+                          </div>
+                          <div class="uk-padding-small uk-padding-remove-horizontal">
+                            <p *ngIf="indicator.description">
+                              {{indicator.description}}
+                            </p>
+                            <p *ngIf="indicator.additionalDescription">
+                              {{indicator.additionalDescription}}
+                            </p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -203,20 +205,22 @@
                   </div>
                   <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
                        class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
-                    <div class="inner uk-padding-small" click-outside-or-esc
+                    <div class="inner" click-outside-or-esc
                          (clickOutside)="closeDescriptionOverlay($event, j)">
-                      <div class="uk-flex uk-flex-right">
-                        <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
-                          <icon name="close" ratio="1"></icon>
-                        </button>
-                      </div>
-                      <div class="uk-padding-small uk-padding-remove-horizontal">
-                        <p *ngIf="indicator.description">
-                          {{indicator.description}}
-                        </p>
-                        <p *ngIf="indicator.additionalDescription">
-                          {{indicator.additionalDescription}}
-                        </p>
+                      <div class="uk-padding-small">
+                        <div class="uk-flex uk-flex-right">
+                          <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
+                            <icon name="close" ratio="1"></icon>
+                          </button>
+                        </div>
+                        <div class="uk-padding-small uk-padding-remove-horizontal">
+                          <p *ngIf="indicator.description">
+                            {{indicator.description}}
+                          </p>
+                          <p *ngIf="indicator.additionalDescription">
+                            {{indicator.additionalDescription}}
+                          </p>
+                        </div>
                       </div>
                     </div>
                   </div>