[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:
parent
ca7b309d67
commit
c1b316bee5
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue