MaDgIK
/
monitor-dashboard
13
0
Fork 0
Code Issues Pull Requests Projects Releases 17 Wiki Activity

Change position of note and fix padding in number indicators

This commit is contained in:
Konstantinos Triantafyllou 2022-11-08 15:35:48 +02:00
parent 8e978b0c9f
commit 7e4e6e6d46
1 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/monitor/monitor.component.html
View File

@ -117,31 +117,33 @@
class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span> class="uk-text-bold uk-hidden">{{numberResults.get(i + '-' + j) | number}}</span>
<!-- ----------------- --> <!-- ----------------- -->
<div *ngIf="indicator.description || indicator.additionalDescription" <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" <a class="uk-display-inline-block uk-button uk-button-text"
(click)="toggleDescriptionOverlay($event, j)"> (click)="toggleDescriptionOverlay($event, j)">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<icon name="analytics" type="outlined" [flex]="true"></icon> <icon name="analytics" type="outlined" [flex]="true"></icon>
<span class="uk-margin-small-left">Note</span> <span class="uk-margin-small-left">Note</span>
</span> </span>
</a> </a>
</div> </div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)" <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center"> 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)"> (clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right"> <div class="uk-padding-small">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)"> <div class="uk-flex uk-flex-right">
<icon name="close" ratio="1"></icon> <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
</button> <icon name="close" ratio="1"></icon>
</div> </button>
<div class="uk-padding-small uk-padding-remove-horizontal"> </div>
<p *ngIf="indicator.description"> <div class="uk-padding-small uk-padding-remove-horizontal">
{{indicator.description}} <p *ngIf="indicator.description">
</p> {{indicator.description}}
<p *ngIf="indicator.additionalDescription"> </p>
{{indicator.additionalDescription}} <p *ngIf="indicator.additionalDescription">
</p> {{indicator.additionalDescription}}
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -203,20 +205,22 @@
</div> </div>
<div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)" <div *ngIf="showDescriptionOverlay[j] && (indicator.description || indicator.additionalDescription)"
class="indicator-description uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center"> 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)"> (clickOutside)="closeDescriptionOverlay($event, j)">
<div class="uk-flex uk-flex-right"> <div class="uk-padding-small">
<button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)"> <div class="uk-flex uk-flex-right">
<icon name="close" ratio="1"></icon> <button class="uk-close uk-icon" (click)="toggleDescriptionOverlay($event, j)">
</button> <icon name="close" ratio="1"></icon>
</div> </button>
<div class="uk-padding-small uk-padding-remove-horizontal"> </div>
<p *ngIf="indicator.description"> <div class="uk-padding-small uk-padding-remove-horizontal">
{{indicator.description}} <p *ngIf="indicator.description">
</p> {{indicator.description}}
<p *ngIf="indicator.additionalDescription"> </p>
{{indicator.additionalDescription}} <p *ngIf="indicator.additionalDescription">
</p> {{indicator.additionalDescription}}
</p>
</div>
</div> </div>
</div> </div>
</div> </div>