[Monitor Dashboard | Trunk]: Clarify css of login button. Add section title.
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57978 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
parent
54f03f4c98
commit
0142ebb9ec
|
@ -17,7 +17,7 @@
|
||||||
<ul class="uk-navbar-nav user_actions">
|
<ul class="uk-navbar-nav user_actions">
|
||||||
<li>
|
<li>
|
||||||
<user-mini *ngIf="properties"
|
<user-mini *ngIf="properties"
|
||||||
[user]="user" [dashboard]="true" [colors]="'light'"
|
[user]="user" [dashboard]="true"
|
||||||
[redirectUrl]="properties.afterLoginRedirectLink"
|
[redirectUrl]="properties.afterLoginRedirectLink"
|
||||||
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||||
[cookieDomain]=properties.cookieDomain
|
[cookieDomain]=properties.cookieDomain
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
<div [class.uk-child-width-1-4@m]="grid"
|
<div [class.uk-child-width-1-4@m]="grid"
|
||||||
[class.uk-child-width-1-3@s]="grid"
|
[class.uk-child-width-1-3@s]="grid"
|
||||||
[class.uk-child-width-1-1]="!grid"
|
[class.uk-child-width-1-1]="!grid"
|
||||||
[class.max-width-large]="!grid"
|
[class.list-view]="!grid"
|
||||||
class="uk-grid-match uk-grid-small"
|
class="uk-grid-match uk-grid-small"
|
||||||
uk-grid>
|
uk-grid>
|
||||||
<loading *ngIf="loading"></loading>
|
<loading *ngIf="loading"></loading>
|
||||||
|
@ -115,7 +115,7 @@
|
||||||
<div [class.uk-child-width-1-4@m]="grid"
|
<div [class.uk-child-width-1-4@m]="grid"
|
||||||
[class.uk-child-width-1-3@s]="grid"
|
[class.uk-child-width-1-3@s]="grid"
|
||||||
[class.uk-child-width-1-1]="!grid"
|
[class.uk-child-width-1-1]="!grid"
|
||||||
[class.max-width-large]="!grid"
|
[class.list-view]="!grid"
|
||||||
class="uk-grid-match uk-grid-small"
|
class="uk-grid-match uk-grid-small"
|
||||||
uk-grid>
|
uk-grid>
|
||||||
<loading *ngIf="loading"></loading>
|
<loading *ngIf="loading"></loading>
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
|
<ul class="uk-navbar-nav user_actions uk-padding uk-padding-remove-vertical">
|
||||||
<li>
|
<li>
|
||||||
<user-mini *ngIf="properties"
|
<user-mini *ngIf="properties"
|
||||||
[user]="user" [dashboard]="true" [colors]="'dark'"
|
[user]="user" [dashboard]="true"
|
||||||
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
[logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
|
||||||
[cookieDomain]=properties.cookieDomain
|
[cookieDomain]=properties.cookieDomain
|
||||||
[userMenuItems]=userMenuItems>
|
[userMenuItems]=userMenuItems>
|
||||||
|
|
|
@ -55,18 +55,38 @@
|
||||||
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
|
<div #element uk-dropdown="mode: click; pos: bottom-right; offset: 5; delay-hide: 0; flip: false"
|
||||||
class="uk-padding-remove-horizontal">
|
class="uk-padding-remove-horizontal">
|
||||||
<ul class="uk-nav uk-dropdown-nav">
|
<ul class="uk-nav uk-dropdown-nav">
|
||||||
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a></li>
|
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'public'}" (click)="hide(element)">Public</a>
|
||||||
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a></li>
|
</li>
|
||||||
|
<li><a target="_blank" [routerLink]="preview" [queryParams]="{view: 'private'}" (click)="hide(element)">Private</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="uk-text-bold">Number Indicators</h4>
|
<h4 class="uk-text-bold">Number Indicators</h4>
|
||||||
<div [class.max-width-large]="!grid" [id]="number._id"
|
<div [class.list-view]="!grid" [id]="number._id"
|
||||||
class="uk-grid-match section uk-grid-small"
|
class="uk-grid-match section uk-grid-small"
|
||||||
*ngFor="let number of displayNumbers; let i = index"
|
*ngFor="let number of displayNumbers; let i = index"
|
||||||
uk-sortable="group: number" uk-grid>
|
uk-sortable="group: number" uk-grid>
|
||||||
<div class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
|
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
|
||||||
|
<div class="md-btn-group">
|
||||||
|
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
|
||||||
|
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
|
||||||
|
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="false"
|
||||||
|
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag"
|
||||||
|
uk-grid>
|
||||||
|
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="null"
|
||||||
|
label="Add a section title"></div>
|
||||||
|
<div class="uk-width-expand">
|
||||||
|
<button class="md-btn md-btn-small">
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!grid && number.title" class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
|
||||||
<h4>{{number.title}}</h4>
|
<h4>{{number.title}}</h4>
|
||||||
</div>
|
</div>
|
||||||
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
|
||||||
|
@ -134,26 +154,32 @@
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="uk-text-bold">Chart Indicators</h4>
|
<h4 class="uk-text-bold">Chart Indicators</h4>
|
||||||
<div>
|
<div *ngIf="chartSections">
|
||||||
<ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
|
<ng-template ngFor [ngForOf]="displayCharts" let-chart let-i="index">
|
||||||
<div [class.max-width-large]="!grid" [id]="'chart-' + chart._id"
|
<div [class.list-view]="!grid" [id]="'chart-' + chart._id"
|
||||||
class="uk-grid-match section uk-grid-small uk-grid"
|
class="uk-grid-match section uk-grid-small uk-grid uk-margin-top"
|
||||||
uk-sortable="group: chart" uk-grid>
|
uk-sortable="group: chart" uk-grid>
|
||||||
<div class="tools disable-sortable uk-sortable-nodrag">
|
<div *ngIf="grid" class="tools disable-sortable uk-sortable-nodrag">
|
||||||
<div class="md-btn-group">
|
<div class="md-btn-group">
|
||||||
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
|
<button class="md-btn md-btn-mini"><i class="material-icons">add</i></button>
|
||||||
<button class="md-btn md-btn-mini"><i class="material-icons">drag_indicator</i></button>
|
<button class="md-btn md-btn-mini"><i class="material-icons rotate-90">drag_indicator</i></button>
|
||||||
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
|
<button class="md-btn md-btn-mini"><i class="material-icons">clear</i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle disable-sortable uk-sortable-nodrag" uk-grid>
|
<div *ngIf="grid && chartSections.at(i)"
|
||||||
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="null" label="Add a section title"></div>
|
class="uk-form-row uk-width-1-1 uk-grid-medium uk-flex uk-flex-middle uk-margin-bottom disable-sortable uk-sortable-nodrag"
|
||||||
|
uk-grid>
|
||||||
|
<div dashboard-input class="uk-width-2-3 uk-width-1-3@m" [formInput]="chartSections.at(i).get('title')"
|
||||||
|
label="Add a section title"></div>
|
||||||
<div class="uk-width-expand">
|
<div class="uk-width-expand">
|
||||||
<button class="md-btn md-btn-small md-btn-primary">
|
<button *ngIf="chartSections.at(i).dirty" class="md-btn">
|
||||||
Save
|
Save
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div *ngIf="!grid && chart.title" class="uk-width-1-1 disable-sortable uk-sortable-nodrag">
|
||||||
|
<h4>{{chart.title}}</h4>
|
||||||
|
</div>
|
||||||
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
|
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="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-3@m]="grid && indicator.width === 'small'"
|
||||||
|
@ -267,6 +293,14 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
<div *ngIf="grid" class="new-section uk-margin-top">
|
||||||
|
<div class="tools uk-flex uk-flex-middle">
|
||||||
|
<button class="md-btn add uk-margin-small-right">
|
||||||
|
<i class="material-icons md-24 md-color-white">add</i>
|
||||||
|
</button>
|
||||||
|
<span>Create a new section</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -34,7 +34,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
public preview: string;
|
public preview: string;
|
||||||
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
|
public indicatorUtils: IndicatorUtils = new IndicatorUtils();
|
||||||
public indicatorFb: FormGroup;
|
public indicatorFb: FormGroup;
|
||||||
public sectionFbs: FormArray;
|
public chartSections: FormArray;
|
||||||
|
public numberSections: FormArray;
|
||||||
/**
|
/**
|
||||||
* Editable indicator
|
* Editable indicator
|
||||||
*/
|
*/
|
||||||
|
@ -73,6 +74,7 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.buildFilters();
|
this.buildFilters();
|
||||||
|
this.buildSections();
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnDestroy(): void {
|
ngOnDestroy(): void {
|
||||||
|
@ -172,6 +174,31 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private buildSections() {
|
||||||
|
this.numberSections = this.fb.array([]);
|
||||||
|
this.numbers.forEach(section => {
|
||||||
|
this.numberSections.push(this.fb.group({
|
||||||
|
_id: this.fb.control(section._id),
|
||||||
|
title: this.fb.control(section.title),
|
||||||
|
stakeholderAlias: this.fb.control(section.stakeholderAlias),
|
||||||
|
defaultId: this.fb.control(section.defaultId),
|
||||||
|
type: this.fb.control(section.type),
|
||||||
|
indicators: this.fb.control(section.indicators)
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
this.chartSections = this.fb.array([]);
|
||||||
|
this.charts.forEach(section => {
|
||||||
|
this.chartSections.push(this.fb.group({
|
||||||
|
_id: this.fb.control(section._id),
|
||||||
|
title: this.fb.control(section.title),
|
||||||
|
stakeholderAlias: this.fb.control(section.stakeholderAlias),
|
||||||
|
defaultId: this.fb.control(section.defaultId),
|
||||||
|
type: this.fb.control(section.type),
|
||||||
|
indicators: this.fb.control(section.indicators)
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
filterCharts() {
|
filterCharts() {
|
||||||
this.displayCharts = this.filterChartType(this.filterPrivacy(
|
this.displayCharts = this.filterChartType(this.filterPrivacy(
|
||||||
this.filterStatus(this.filterByKeyword(HelperFunctions.copy(this.charts), this.filters.value.keyword),
|
this.filterStatus(this.filterByKeyword(HelperFunctions.copy(this.charts), this.filters.value.keyword),
|
||||||
|
@ -508,4 +535,8 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
|
||||||
indicator.isPublic = isPublic;
|
indicator.isPublic = isPublic;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
createSection(index: number = -1) {
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -37,9 +37,9 @@
|
||||||
|
|
||||||
"piwikBaseUrl" :"https://analytics.openaire.eu/piwik.php?idsite=",
|
"piwikBaseUrl" :"https://analytics.openaire.eu/piwik.php?idsite=",
|
||||||
"piwikSiteId" : "80",
|
"piwikSiteId" : "80",
|
||||||
"loginUrl" :"http://scoobydoo.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
|
"loginUrl" :"http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/openid_connect_login",
|
||||||
|
|
||||||
"userInfoUrl" : "http://scoobydoo.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
|
"userInfoUrl" : "http://rudie.di.uoa.gr:8080/dnet-openaire-users-1.0.0-SNAPSHOT/api/users/getUserInfo?accessToken=",
|
||||||
|
|
||||||
"logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",
|
"logoutUrl" :"https://aai.openaire.eu/proxy/saml2/idp/SingleLogoutService.php?ReturnTo=",
|
||||||
|
|
||||||
|
|
|
@ -19,9 +19,13 @@
|
||||||
--connect-portal-lower-tone: #b48536;
|
--connect-portal-lower-tone: #b48536;
|
||||||
--develop-portal-lower-tone: #9f4e7e;
|
--develop-portal-lower-tone: #9f4e7e;
|
||||||
|
|
||||||
|
|
||||||
|
/* Dashboard variables*/
|
||||||
--sidebar-width: 320px;
|
--sidebar-width: 320px;
|
||||||
--sidebar-font-size: 16px;
|
--sidebar-font-size: 16px;
|
||||||
--header-height: 70px;
|
--header-height: 70px;
|
||||||
|
--primary-color: #0d47a1;
|
||||||
|
--secondary-color: #1CA9D5;
|
||||||
|
|
||||||
--monitor-header-menu-height: 100px;
|
--monitor-header-menu-height: 100px;
|
||||||
}
|
}
|
||||||
|
@ -44,6 +48,12 @@
|
||||||
|
|
||||||
/*}*/
|
/*}*/
|
||||||
|
|
||||||
|
.double-header #header_menu a {
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
.double-header #header_main .uk-navbar-nav > li > a {
|
.double-header #header_main .uk-navbar-nav > li > a {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
|
@ -94,15 +104,15 @@
|
||||||
.double-header #header_main{
|
.double-header #header_main{
|
||||||
top: var(--monitor-header-menu-height);
|
top: var(--monitor-header-menu-height);
|
||||||
}
|
}
|
||||||
.double-header #header_menu{
|
.double-header #header_menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height:var(--monitor-header-menu-height);
|
height:var(--monitor-header-menu-height);
|
||||||
background:white;
|
background:white;
|
||||||
z-index: 1215;
|
z-index: 1215;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.double-header #header_menu .uk-navbar-nav > li.uk-active a span {
|
.double-header #header_menu .uk-navbar-nav > li.uk-active a span {
|
||||||
-webkit-box-shadow: inset 0 -2px 0 #333;
|
-webkit-box-shadow: inset 0 -2px 0 #333;
|
||||||
box-shadow: inset 0 -2px 0 #333;
|
box-shadow: inset 0 -2px 0 #333;
|
||||||
|
@ -128,46 +138,24 @@
|
||||||
max-height: 80px;
|
max-height: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stakeholderPage #style_switcher{
|
.stakeholderPage #style_switcher {
|
||||||
top:200px;
|
top:200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loginLink.light{
|
|
||||||
color: white !important;
|
/* Login Box*/
|
||||||
|
.dashboard .double-header .login {
|
||||||
|
color: rgba(0,0,0,.54);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
circle.userBox.light{
|
.dashboard .double-header circle, .dashboard .double-header .login svg,
|
||||||
stroke: white;
|
.dashboard .double-header svg svg *, .dashboard .double-header .login svg * {
|
||||||
fill: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
text.userBox.light {
|
|
||||||
stroke: #0d47a1;
|
|
||||||
fill: #0d47a1;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .icon.userBox.light{
|
|
||||||
stroke: #0d47a1;
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg .loginLink.userBox.light{
|
|
||||||
stroke: white;
|
|
||||||
fill: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loginLink.dark{
|
|
||||||
color: rgba(0,0,0,.54) !important;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
circle.userBox.dark, svg .icon.userBox.dark, svg .loginLink.userBox.dark{
|
|
||||||
stroke: rgba(0,0,0,.54);
|
stroke: rgba(0,0,0,.54);
|
||||||
fill: none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
text.userBox.dark {
|
.dashboard .double-header text {
|
||||||
stroke: rgba(0,0,0,.54);
|
stroke: rgba(0,0,0,.54);
|
||||||
fill: rgba(0,0,0,.54);
|
fill: rgba(0,0,0,.54);
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,8 @@
|
||||||
--sidebar-font-size: 16px;
|
--sidebar-font-size: 16px;
|
||||||
--header-height: 70px;
|
--header-height: 70px;
|
||||||
--list-card-max-width: 1220px;
|
--list-card-max-width: 1220px;
|
||||||
|
--primary-color: #0d47a1;
|
||||||
|
--secondary-color: #1CA9D5;
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* Global css*/
|
/* Global css*/
|
||||||
|
@ -15,6 +17,12 @@ html .dashboard {
|
||||||
cursor: pointer !important;
|
cursor: pointer !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dashboard #hide_controls #toggle *, .dashboard #header_main a, .dashboard #sidebar_main a {
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* On link hover, his items with this class will be displayed*/
|
/* On link hover, his items with this class will be displayed*/
|
||||||
.dashboard li > a .onHover {
|
.dashboard li > a .onHover {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -25,7 +33,7 @@ html .dashboard {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom height of header, change var: header-height*/
|
/* Sidebar with hide controls*/
|
||||||
.dashboard #sidebar_main {
|
.dashboard #sidebar_main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -76,19 +84,13 @@ html .dashboard {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard #hide_controls #toggle:hover, .dashboard #hide_controls #toggle:not(.sidebar_main_open) {
|
.dashboard #hide_controls #toggle:hover, .dashboard #hide_controls #toggle:not(.sidebar_main_open) {
|
||||||
color: #0d47a1;
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard #hide_controls:hover #toggle:hover .material-icons,
|
.dashboard #hide_controls:hover #toggle:hover .material-icons,
|
||||||
.dashboard #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
|
.dashboard #hide_controls #toggle:not(.sidebar_main_open) .material-icons {
|
||||||
color: #0d47a1;
|
color: var(--primary-color);
|
||||||
border: #0d47a1 solid 1px;
|
border: var(--primary-color) solid 1px;
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard #hide_controls #toggle * {
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard #hide_controls #toggle .material-icons {
|
.dashboard #hide_controls #toggle .material-icons {
|
||||||
|
@ -177,6 +179,7 @@ html .dashboard {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
body.dashboard {
|
body.dashboard {
|
||||||
padding-top: var(--header-height);
|
padding-top: var(--header-height);
|
||||||
}
|
}
|
||||||
|
@ -201,7 +204,36 @@ body.dashboard {
|
||||||
margin: calc(var(--header-height) - 48px) 0;
|
margin: calc(var(--header-height) - 48px) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Custom card*/
|
.dashboard #header_main .material-icons {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard #header_main .login {
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard #header_main circle, .dashboard #header_main .login svg {
|
||||||
|
stroke: white;
|
||||||
|
fill: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard #header_main text {
|
||||||
|
stroke: var(--primary-color);
|
||||||
|
fill: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard #header_main svg svg *{
|
||||||
|
stroke: var(--primary-color);
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard #header_main .login svg *{
|
||||||
|
stroke: white;
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card */
|
||||||
.dashboard .md-card .md-card-content {
|
.dashboard .md-card .md-card-content {
|
||||||
color: rgba(0, 0, 0, 0.8);
|
color: rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
|
@ -210,21 +242,11 @@ body.dashboard {
|
||||||
color: rgba(0, 0, 0, 0.8);
|
color: rgba(0, 0, 0, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 767px) {
|
|
||||||
.dashboard .md-card .md-card-toolbar .md-card-toolbar-actions span {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {
|
.dashboard .md-card .md-card-toolbar .md-card-toolbar-heading-text {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .max-width-large {
|
|
||||||
max-width: 1220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Breadcrumb*/
|
/* Breadcrumb*/
|
||||||
.dashboard #breadcrumbs {
|
.dashboard #breadcrumbs {
|
||||||
background: inherit;
|
background: inherit;
|
||||||
|
@ -245,7 +267,7 @@ body.dashboard {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Notification */
|
/* Notification */
|
||||||
/* Change z-index, because of sidebar and header z-index is bigger that default */
|
/* Change z-index, because of sidebar's and header's z-index are bigger that default */
|
||||||
.dashboard .uk-notification {
|
.dashboard .uk-notification {
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
}
|
}
|
||||||
|
@ -269,7 +291,6 @@ body.dashboard {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.dashboard .uk-notification-close.uk-icon.uk-close svg {
|
.dashboard .uk-notification-close.uk-icon.uk-close svg {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -288,6 +309,7 @@ body.dashboard {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modal*/
|
/* Modal*/
|
||||||
|
|
||||||
.dashboard .uk-modal .large-modal {
|
.dashboard .uk-modal .large-modal {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
}
|
}
|
||||||
|
@ -318,6 +340,11 @@ body.dashboard {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* List view*/
|
||||||
|
.dashboard .list-view {
|
||||||
|
max-width: 1220px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Section Tools*/
|
/* Section Tools*/
|
||||||
|
|
||||||
.dashboard .section {
|
.dashboard .section {
|
||||||
|
@ -336,21 +363,34 @@ body.dashboard {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .section:hover {
|
.dashboard .section:not(.list-view):hover {
|
||||||
border: rgb(28, 169, 213) solid 1px;
|
border: var(--secondary-color) solid 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .section:hover .tools {
|
.dashboard .section:not(.list-view):hover .tools {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .section:hover .tools .md-btn-group .md-btn-mini {
|
.dashboard .section:hover .tools .md-btn-group .md-btn-mini {
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: rgb(28, 169, 213);
|
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
margin-left: -1px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard .section:hover .tools .md-btn-group .md-btn-mini:first-child {
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard .section:hover .tools .md-btn-group .md-btn-mini:last-child {
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard .section .md-btn {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
width: 20px;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .section:hover .tools .md-btn-group .md-btn-mini * {
|
.dashboard .section:hover .tools .md-btn-group .md-btn-mini * {
|
||||||
|
@ -359,16 +399,46 @@ body.dashboard {
|
||||||
|
|
||||||
.dashboard .section:hover .tools .md-btn-group::before {
|
.dashboard .section:hover .tools .md-btn-group::before {
|
||||||
content: "";
|
content: "";
|
||||||
border-bottom: 25px solid rgb(28, 169, 213);
|
border-bottom: 25px solid var(--secondary-color);
|
||||||
border-left:solid 12px transparent;
|
border-left:solid 12px transparent;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
margin-left: -1px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard .section:hover .tools .md-btn-group::after {
|
.dashboard .section:hover .tools .md-btn-group::after {
|
||||||
content: "";
|
content: "";
|
||||||
border-bottom: 25px solid rgb(28, 169, 213);
|
border-bottom: 25px solid var(--secondary-color);
|
||||||
border-right:solid 12px transparent;
|
border-right: solid 12px transparent;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
margin-left: -1px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* New section*/
|
||||||
|
.dashboard .new-section {
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
border: #cecece dashed 2px;
|
||||||
|
background-color: white;
|
||||||
|
min-height: 100px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard .new-section .tools {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dashboard .new-section .tools .md-btn.add {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
min-width: 40px;
|
||||||
|
min-height: 40px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Dropdown*/
|
/* Dropdown*/
|
||||||
|
@ -385,7 +455,7 @@ body.dashboard {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Badge */
|
/* Badge */
|
||||||
.badge {
|
.dashboard .badge {
|
||||||
height: 75px;
|
height: 75px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -393,15 +463,31 @@ body.dashboard {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-badge {
|
.dashboard .badge.small-badge {
|
||||||
height: 70px;
|
height: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-badge{
|
.dashboard .badge.right-badge {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
right: 0;
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Login Icon*/
|
||||||
|
|
||||||
|
.loginLink.dark{
|
||||||
|
color: rgba(0,0,0,.54) !important;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
circle.userBox.dark, svg .icon.userBox.dark, svg .loginLink.userBox.dark{
|
||||||
|
stroke: rgba(0,0,0,.54);
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
text.userBox.dark {
|
||||||
|
stroke: rgba(0,0,0,.54);
|
||||||
|
fill: rgba(0,0,0,.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue