MaDgIK
/
monitor
13
0
Fork 0
Code Issues Pull Requests Projects Releases 15 Wiki Activity

[Monitor]: Add shadow on cards. Match height of titles. 

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor@57389 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
Konstantinos Triantafyllou 2019-10-16 10:56:28 +00:00
parent 23943a4c76
commit 05cd331124
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,8 @@
</div> </div>
<div uk-grid> <div uk-grid>
<sidebar [menuItems]="sideMenuItems" class="uk-width-1-5 sidebar"></sidebar> <sidebar [menuItems]="sideMenuItems" class="uk-width-1-5 sidebar"></sidebar>
<div *ngIf="activeSubCategory" class="uk-width-expand uk-padding uk-text-center@s uk-text-left@m"> <div *ngIf="activeSubCategory"
class="uk-width-expand uk-background-muted uk-padding uk-text-center@s uk-text-left@m">
<h5 class="uk-margin-bottom uk-text-bold">Indicators</h5> <h5 class="uk-margin-bottom uk-text-bold">Indicators</h5>
<div class="uk-grid-medium uk-margin-bottom" uk-grid> <div class="uk-grid-medium uk-margin-bottom" uk-grid>
<ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index"> <ng-template ngFor [ngForOf]="activeSubCategory.numbers" let-number let-i="index">
@ -40,7 +41,7 @@
[class.uk-width-1-3@m]="number.width === 'small'" [class.uk-width-1-3@m]="number.width === 'small'"
[class.uk-width-1-2@m]="number.width === 'medium'" [class.uk-width-1-2@m]="number.width === 'medium'"
[class.uk-width-1-1@m]="number.width === 'large'"> [class.uk-width-1-1@m]="number.width === 'large'">
<div class="uk-card uk-card-default uk-padding-small" [attr.uk-tooltip]="number.description"> <div class="uk-card uk-card-default uk-box-shadow-large uk-padding-small" [attr.uk-tooltip]="number.description">
<h6>{{number.name}}</h6> <h6>{{number.name}}</h6>
<div class="uk-h2"> <div class="uk-h2">
{{numberResults.get(i)|number}} {{numberResults.get(i)|number}}
@ -49,15 +50,15 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div class="uk-grid-medium uk-margin-bottom" uk-grid> <div class="uk-grid-medium uk-margin-bottom" uk-grid uk-height-match="target: div > h5">
<ng-template ngFor [ngForOf]="activeSubCategory.charts" let-chart let-i="index"> <ng-template ngFor [ngForOf]="activeSubCategory.charts" let-chart let-i="index">
<div *ngIf="chart.isActive && chart.isPublic" <div *ngIf="chart.isActive && chart.isPublic"
[class.uk-width-1-3@m]="chart.width === 'small'" [class.uk-width-1-3@m]="chart.width === 'small'"
[class.uk-width-1-2@m]="chart.width === 'medium'" [class.uk-width-1-2@m]="chart.width === 'medium'"
[class.uk-width-1-1@m]="chart.width === 'large'"> [class.uk-width-1-1@m]="chart.width === 'large'">
<div> <div>
<h5>{{chart.name}}</h5> <h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5>
<div class="uk-card uk-card-default uk-padding-small" [attr.uk-tooltip]="chart.description"> <div class="uk-card uk-card-default uk-box-shadow-large uk-padding-small" [attr.uk-tooltip]="chart.description">
<div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group"> <div *ngIf="chart.indicatorPaths.length > 1" class="uk-button-group">
<button *ngFor="let indicatorPath of chart.indicatorPaths;" <button *ngFor="let indicatorPath of chart.indicatorPaths;"
class="uk-button" class="uk-button"
@ -68,12 +69,10 @@
</div> </div>
<iframe *ngIf="chartsActiveType.get(i).source !== 'fake'" <iframe *ngIf="chartsActiveType.get(i).source !== 'fake'"
[src]="getUrlByStakeHolder(chartsActiveType.get(i))" [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
class="uk-width-1-1" class="uk-width-1-1 uk-height-medium"></iframe>
height="600"></iframe>
<img *ngIf="chartsActiveType.get(i).source === 'fake'" <img *ngIf="chartsActiveType.get(i).source === 'fake'"
[src]="getUrlByStakeHolder(chartsActiveType.get(i))" [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
class="uk-width-1-1" class="uk-width-1-1 uk-height-medium">
height="600">
</div> </div>
</div> </div>
</div> </div>