From eb88aec5d95b16dcb8f6f8c55cab27fb3bbbc143 Mon Sep 17 00:00:00 2001
From: Konstantinos Triantafyllou <k.triantafyllou@di.uoa.gr>
Date: Wed, 13 Nov 2019 16:01:33 +0000
Subject: [PATCH] [Monitor Dashboard]: customize breadcrumbs.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57602 d315682c-612b-4755-9ff5-7f18f6832af3
---
 src/app/home/home.component.html             | 23 +++++-----
 src/app/topic/indicators.component.html      | 33 +++++++++-----
 src/assets/theme-assets/dashboard-custom.css | 48 +++++++++++++++-----
 3 files changed, 69 insertions(+), 35 deletions(-)

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index f4f38b9..b6aef81 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -41,7 +41,8 @@
                         <div class="uk-width-1-1">
                           <label class="uk-text-bold">Topic Settings</label>
                           <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
-                                 [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" type="text">
+                                 [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"
+                                 type="text">
                         </div>
                         <div class="uk-width-1-1">
                           <label>Description</label>
@@ -79,7 +80,7 @@
             </li>
           </ng-template>
           <li>
-            <a  (click)="saveTopicOpen(newTopic)">
+            <a (click)="saveTopicOpen(newTopic)">
               <span class="menu_icon"><i class="material-icons">add</i></span>
               <span class="menu_title">Create new Topic</span>
             </a>
@@ -95,7 +96,8 @@
                       <div class="uk-width-1-1">
                         <label class="uk-text-bold">New Topic</label>
                         <input class="uk-input uk-form-small" [(ngModel)]="copyTopic.name"
-                               [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')" type="text">
+                               [class.uk-form-danger]="!valid && (!copyTopic.name || copyTopic.name === '')"
+                               type="text">
                       </div>
                       <div class="uk-width-1-1">
                         <label>Description</label>
@@ -164,17 +166,14 @@
         Select one of the <span class="md-color-blue-900">topics below</span>!
       </div>
     </div>
-    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-medium uk-grid uk-grid-match" uk-grid
-         uk-height-match="target: .md-card; row: true">
+    <div *ngIf="stakeholder" class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium" uk-grid>
       <ng-template ngFor [ngForOf]="stakeholder.topics" let-topic>
         <div>
-          <a [routerLink]="topic.alias">
-            <div class="md-card">
-              <div class="md-card-content">
-                <h6 class="uk-text-bold">{{topic.name}}</h6>
-                <div class="uk-text-secondary">
-                  {{topic.description}}
-                </div>
+          <a [routerLink]="topic.alias" class="md-card">
+            <div class="md-card-content">
+              <h6 class="uk-text-bold">{{topic.name}}</h6>
+              <div class="uk-text-secondary">
+                {{topic.description}}
               </div>
             </div>
           </a>
diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html
index 4f143aa..937d593 100644
--- a/src/app/topic/indicators.component.html
+++ b/src/app/topic/indicators.component.html
@@ -69,11 +69,11 @@
         <button class="md-btn md-btn-primary">Preview</button>
       </div>
     </div>
-    <h5 class="uk-text-bold">Number Indicators</h5>
+    <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"
-         uk-height-match="target: .md-card"
+         class="uk-grid-match"
          uk-grid>
       <ng-template ngFor [ngForOf]="displayNumbers" let-indicator let-i="index">
         <div>
@@ -114,7 +114,7 @@
         </div>
       </ng-template>
     </div>
-    <h5 class="uk-text-bold">Chart Indicators</h5>
+    <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"
@@ -128,19 +128,23 @@
                 <ng-template [ngIf]="!grid">
                   <span *ngFor="let indicatorPath of indicator.indicatorPaths"
                         class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
-                    <i
-                      class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
+                    <i class="material-icons md-24 uk-margin-small-right">
+                      {{indicatorUtils.chartTypes.get(indicatorPath.type)}}
+                    </i>
                     {{indicatorPath.type + ' Chart'}}
                   </span>
                 </ng-template>
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
-                  <i
-                    class="material-icons md-24 uk-margin-small-right">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                  <i class="material-icons md-24 uk-margin-small-right">
+                    {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
+                  </i>
                   {{(indicator.isPublic) ? 'Public' : 'Private'}}
                 </span>
                 <span *ngIf="!grid" class="uk-margin-medium-right uk-flex uk-flex-middle">
                   <i class="material-icons md-24 uk-margin-small-right"
-                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                     [class.md-color-green-300]="indicator.isActive">
+                    {{indicatorUtils.isActiveIcon}}
+                  </i>
                   {{(indicator.isActive) ? 'Active' : 'Inactive'}}
                 </span>
                 <i class="md-icon material-icons">more_vert</i>
@@ -155,17 +159,22 @@
                 <div class="uk-width-1-3 uk-text-center"
                      [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
                   <div *ngFor="let indicatorPath of indicator.indicatorPaths">
-                    <i class="material-icons md-24">{{indicatorUtils.chartTypes.get(indicatorPath.type)}}</i>
+                    <i class="material-icons md-24">
+                      {{indicatorUtils.chartTypes.get(indicatorPath.type)}}
+                    </i>
                     <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
                   </div>
                 </div>
                 <div class="uk-width-1-3 uk-text-center">
-                  <i class="material-icons md-24">{{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}</i>
+                  <i class="material-icons md-24">
+                    {{indicatorUtils.isPublicIcon.get(indicator.isPublic)}}
+                  </i>
                   <div>{{(indicator.isPublic) ? 'Public' : 'Private'}}</div>
                 </div>
                 <div class="uk-width-1-3 uk-text-center">
-                  <i class="material-icons md-24"
-                     [class.md-color-green-300]="indicator.isActive">{{indicatorUtils.isActiveIcon}}</i>
+                  <i class="material-icons md-24" [class.md-color-green-300]="indicator.isActive">
+                    {{indicatorUtils.isActiveIcon}}
+                  </i>
                   <div>{{(indicator.isActive) ? 'Active' : 'Inactive'}}</div>
                 </div>
               </div>
diff --git a/src/assets/theme-assets/dashboard-custom.css b/src/assets/theme-assets/dashboard-custom.css
index 6a1a0de..bc0647a 100644
--- a/src/assets/theme-assets/dashboard-custom.css
+++ b/src/assets/theme-assets/dashboard-custom.css
@@ -7,6 +7,11 @@
   --header-height: 70px;
 */
 
+/* Global css*/
+
+html .dashboard {
+  color: black;
+}
 
 /* On link hover, his items with this class will be displayed*/
 .dashboard li>a .onHover {
@@ -16,8 +21,6 @@
 .dashboard li>a:hover .onHover {
   display: block;
 }
-/*---*/
-
 
 /* Custom width of sidebar, change var: sidebar-width*/
 .dashboard #sidebar_main {
@@ -31,15 +34,19 @@
   transform: translate3d(0,0,0);
 }
 
+.dashboard #sidebar_main .sidebar_main_header {
+  color: #000000;
+}
+
 .dashboard #sidebar_main .menu_section > ul > li > a {
   font-weight: 700;
   font-size: var(--sidebar-font-size);
-  color: rgba(0, 0, 0, 0.70);
+  color: rgba(0, 0, 0, 0.7);
 }
 
 .dashboard #sidebar_main .menu_section > ul > li ul a {
   font-size: var(--sidebar-font-size);
-  color: rgba(0, 0, 0, 0.70);
+  color: rgba(0, 0, 0, 0.7);
 }
 
 @media only screen and (min-width: 1220px) {
@@ -49,6 +56,7 @@
     margin-left: var(--sidebar-width);
   }
 }
+
 /* Custom height of header, change var: header-height*/
 body.dashboard {
   padding-top: var(--header-height);
@@ -57,26 +65,44 @@ body.dashboard {
 .dashboard #header_main {
   padding: calc((var(--header-height) - 48px)/2) 25px;
 }
-/*---*/
 
 /* Custom card*/
-.dashboard .md-card .md-card-toolbar-heading-text {
+.dashboard .md-card .md-card-content {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.dashboard .md-card .md-card-toolbar .md-card-toolbar-actions {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {
   font-weight: 700;
 }
-/*---*/
 
 /* Breadcrumb*/
 .dashboard #breadcrumbs {
   background: inherit;
 }
 
-/* Notification */
+.dashboard #breadcrumbs > li a,
+.dashboard #breadcrumbs > li span {
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 12px;
+  line-height: 20px;
+}
 
-/*Remove the second close added by theme because it was used uikit 2*/
+.dashboard #breadcrumbs > li + li a:before,
+.dashboard #breadcrumbs > li + li span:before {
+  font-weight: 400 !important;
+  margin-top: -9px;
+  font-size: 16px;
+}
+
+/* Notification */
+/* Remove the second close added by theme because it was used uikit 2*/
 .dashboard .uk-close::after {content: '';}
 
-/* Change z-index, because of sidebar and header z-index is larger that default */
+/* Change z-index, because of sidebar and header z-index is bigger that default */
 .dashboard .uk-notification {
   z-index: 2000;
 }
-/*---*/