From 05cd331124c45ef6e6d463ad4006da80b8650da2 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Wed, 16 Oct 2019 10:56:28 +0000
Subject: [PATCH] [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
---
 src/app/monitor/monitor.component.html | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html
index c0d34b0..0da3882 100644
--- a/src/app/monitor/monitor.component.html
+++ b/src/app/monitor/monitor.component.html
@@ -32,7 +32,8 @@
   </div>
   <div uk-grid>
     <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>
       <div class="uk-grid-medium uk-margin-bottom" uk-grid>
         <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-2@m]="number.width === 'medium'"
                [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>
               <div class="uk-h2">
                 {{numberResults.get(i)|number}}
@@ -49,15 +50,15 @@
           </div>
         </ng-template>
       </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">
           <div *ngIf="chart.isActive && chart.isPublic"
              [class.uk-width-1-3@m]="chart.width === 'small'"
              [class.uk-width-1-2@m]="chart.width === 'medium'"
              [class.uk-width-1-1@m]="chart.width === 'large'">
           <div>
-            <h5>{{chart.name}}</h5>
-            <div class="uk-card uk-card-default uk-padding-small" [attr.uk-tooltip]="chart.description">
+            <h5 class="uk-margin-bottom uk-margin-top">{{chart.name}}</h5>
+            <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">
                 <button *ngFor="let indicatorPath of chart.indicatorPaths;"
                         class="uk-button"
@@ -68,12 +69,10 @@
               </div>
               <iframe *ngIf="chartsActiveType.get(i).source !== 'fake'"
                       [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
-                      class="uk-width-1-1"
-                      height="600"></iframe>
+                      class="uk-width-1-1 uk-height-medium"></iframe>
               <img *ngIf="chartsActiveType.get(i).source === 'fake'"
                    [src]="getUrlByStakeHolder(chartsActiveType.get(i))"
-                   class="uk-width-1-1"
-                   height="600">
+                   class="uk-width-1-1 uk-height-medium">
             </div>
           </div>
         </div>