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

[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
This commit is contained in:
Konstantinos Triantafyllou 2019-11-13 16:01:33 +00:00
parent 68006a73a1
commit eb88aec5d9
3 changed files with 69 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/home/home.component.html
View File

@ -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>

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

@ -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>

48
src/assets/theme-assets/dashboard-custom.css
View File

@ -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;
}
/*---*/