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

[Monitor Dashboard]: Indicator components: Make width of card base on indicator width(small, medium, large) 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57840 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-12-09 10:52:17 +00:00
parent ca7b309d67
commit c1b316bee5
1 changed files with 260 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/app/topic/indicators.component.html
View File

@ -51,14 +51,14 @@
</div>
</div>
<h4 class="uk-text-bold">Number Indicators</h4>
<div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid"
[class.max-width-large]="!grid" id="number"
<div [class.max-width-large]="!grid" id="number"
class="uk-grid-match uk-grid-small"
uk-sortable uk-grid>
<ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
<div *ngIf="indicator" [id]="indicator._id">
<div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-3@m]="grid && indicator.width === 'small'"
[class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
<div class="md-card" [class.uk-sortable-nodrag]="!canNumbersReorder">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
@ -74,10 +74,12 @@
</span>
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
<div uk-dropdown="mode: click; pos: bottom-right"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>
<li><a (click)="deleteIndicatorOpen(indicator._id, 'number')">Delete</a></li>
<li><a (click)="deleteIndicatorOpen(indicator._id, 'number')">Delete</a>
</li>
</ul>
</div>
</div>
@ -105,14 +107,14 @@
</ng-template>
</div>
<h4 class="uk-text-bold">Chart Indicators</h4>
<div [class.uk-child-width-1-3@m]="grid"
[class.uk-child-width-1-2@s]="grid"
[class.uk-child-width-1-1]="!grid"
[class.max-width-large]="!grid" id="chart"
<div [class.max-width-large]="!grid" id="chart"
class="uk-grid-match uk-grid-small uk-grid"
uk-sortable uk-grid>
<ng-template ngFor [ngForOf]="displayCharts" let-indicator let-i="index">
<div *ngIf="indicator" [id]="indicator._id">
<div *ngIf="indicator" [id]="indicator._id"
[class.uk-width-1-3@m]="grid && indicator.width === 'small'"
[class.uk-width-1-2@m]="grid && indicator.width === 'medium'"
[class.uk-width-1-1@m]="!grid || indicator.width === 'large'">
<div class="md-card" [class.uk-sortable-nodrag]="!canChartsReorder">
<div class="md-card-toolbar">
<div class="md-card-toolbar-actions" [class.uk-flex-middle]="!grid" [class.uk-flex]="!grid">
@ -140,7 +142,8 @@
</span>
<div class="md-card-dropdown uk-inline">
<i class="md-icon material-icons">more_vert</i>
<div uk-dropdown="mode: click; pos: bottom-right" class="uk-padding-remove-horizontal">
<div uk-dropdown="mode: click; pos: bottom-right"
class="uk-padding-remove-horizontal">
<ul class="uk-nav uk-dropdown-nav">
<li><a (click)="editChartIndicatorOpen(indicator._id)">Edit</a></li>
<li><a (click)="deleteIndicatorOpen(indicator._id)">Delete</a></li>
@ -181,7 +184,9 @@
</div>
</div>
</ng-template>
<div class="disable-sortable">
<div class="disable-sortable"
[class.uk-width-1-3@m]="grid"
[class.uk-width-1-1@m]="!grid">
<div class="md-card clickable uk-sortable-nodrag" (click)="createIndicatorOpen()">
<div class="md-card-toolbar">
<div class="md-card-toolbar-heading-text"
@ -195,7 +200,8 @@
<div *ngIf="grid" class="md-card-content">
<div uk-grid>
<div class="uk-width-1-1">
Use our advance tool to create a custom Indicator that suit the needs of your funding KPI's.
Use our advance tool to create a custom Indicator that suit the needs of your funding
KPI's.
</div>
<div class="uk-width-1-1 uk-flex uk-flex-center">
<i class="material-icons md-48">add</i>
@ -272,11 +278,13 @@
</div>
</div>
</div>
<div *ngIf="indicator.indicatorPaths[i].safeResourceUrl" class="uk-margin-medium-top uk-position-relative">
<div *ngIf="indicator.indicatorPaths[i].safeResourceUrl"
class="uk-margin-medium-top uk-position-relative">
<div *ngIf="hasDifference(i) && !indicatorPath.invalid"
class="uk-width-1-1 uk-height-medium refresh-iframe">
<div class="uk-position-relative uk-height-1-1">
<div class="uk-position-center md-color-white uk-text-center clickable" (click)="refreshIndicator()">
<div class="uk-position-center md-color-white uk-text-center clickable"
(click)="refreshIndicator()">
<div><i class="material-icons md-color-white">refresh</i></div>
<span>Click to refresh the graph view</span>
</div>