From e179a6094c8728280884a924fb660c5ac81f4653 Mon Sep 17 00:00:00 2001 From: Argiro Kokogiannaki Date: Mon, 12 Oct 2020 12:54:57 +0000 Subject: [PATCH] [Monitor Dashboard|Trunk] Merge branch to trunk (59477:59555 https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/branches/themeChange/monitor_dashboard) Changes applied: remove theme css and classes, update with new admin UI git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@59556 d315682c-612b-4755-9ff5-7f18f6832af3 --- angular.json | 9 +- src/app/app-routing.module.ts | 22 +- src/app/app.component.html | 35 +- src/app/app.component.ts | 123 ++++-- src/app/error/errorPage.component.ts | 4 +- .../manageStakeholder-routing.module.ts | 21 + .../manageStakeholder.component.html | 73 ++++ .../manageStakeholder.component.ts | 383 ++++++++++++++++++ .../manageStakeholder.module.ts | 31 ++ .../manageStakeholders.component.html | 113 +++--- src/app/monitor/monitor.component.html | 60 +-- .../stakeholder/stakeholder.component.html | 30 +- src/app/topic/indicators.component.html | 157 ++++--- src/app/topic/topic.component.html | 224 ++++++++-- src/app/topic/topic.component.ts | 71 +++- src/assets/monitor-custom.css | 99 +---- src/assets/new.css | 372 +++++++++++++++++ src/index.html | 4 +- src/styles.css | 26 +- 19 files changed, 1481 insertions(+), 376 deletions(-) create mode 100644 src/app/manageStakeholder/manageStakeholder-routing.module.ts create mode 100644 src/app/manageStakeholder/manageStakeholder.component.html create mode 100644 src/app/manageStakeholder/manageStakeholder.component.ts create mode 100644 src/app/manageStakeholder/manageStakeholder.module.ts create mode 100644 src/assets/new.css diff --git a/angular.json b/angular.json index dd66c8e..0c1cd14 100644 --- a/angular.json +++ b/angular.json @@ -27,6 +27,9 @@ "node_modules/datatables.net-dt/css/jquery.dataTables.css" ], "scripts": [ + "src/assets/common-assets/common/jquery.js", + "src/assets/common-assets/common/uikit.min.js", + "src/assets/common-assets/common/uikit-icons.min.js", "node_modules/jquery/dist/jquery.js", "node_modules/datatables.net/js/jquery.dataTables.js" ] @@ -104,8 +107,10 @@ "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "scripts": [ - "node_modules/jquery/dist/jquery.js", - "node_modules/datatables.net/js/jquery.dataTables.js" + "src/assets/common-assets/common/jquery.js", + "src/assets/common-assets/common/uikit.min.js", + "src/assets/common-assets/common/uikit-icons.min.js", + "node_modules/jquery/dist/jquery.js" ], "styles": [ "src/styles.css", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 8aac17a..ba0a059 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -32,17 +32,29 @@ const routes: Routes = [ data: {hasAdminMenu: true} }, { - path: 'admin/:stakeholder/users', - loadChildren: './users/users.module#UsersModule', - resolve: {envSpecific: EnvironmentSpecificResolver} + + path: 'admin/:stakeholder/general', + loadChildren: './manageStakeholder/manageStakeholder.module#ManageStakeholderModule', + resolve: {envSpecific: EnvironmentSpecificResolver}, + data: {hasAdminMenu: true} }, { - path: 'admin/:stakeholder', + path: 'admin/:stakeholder/users', + loadChildren: './users/users.module#UsersModule', + resolve: {envSpecific: EnvironmentSpecificResolver}, + data: {hasAdminMenu: true} + }, + { + path: 'admin/:stakeholder', loadChildren: './stakeholder/stakeholder.module#StakeholderModule', resolve: {envSpecific: EnvironmentSpecificResolver}, }, { - path: 'admin/:stakeholder/:topic', + path: 'admin/:stakeholder/indicators/:topic', + loadChildren: './topic/topic.module#TopicModule', + resolve: {envSpecific: EnvironmentSpecificResolver}, + }, + { path: 'admin/:stakeholder/indicators', loadChildren: './topic/topic.module#TopicModule', resolve: {envSpecific: EnvironmentSpecificResolver}, }, diff --git a/src/app/app.component.html b/src/app/app.component.html index ca494ab..04dd017 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,13 +1,14 @@
-
-
-
- search -
-
-
- view_module -
-
- list -
-
-
-

Default Profiles

- -
-
-
+ +
+
+
{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}} {{(stakeholder.isPublic) ? 'Public' : 'Private'}} @@ -50,10 +51,10 @@ {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
- more_vert +
-
-
{{stakeholder.name}}
+
{{stakeholder.name}}
-
+
{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}} @@ -89,23 +90,23 @@
-
-
-
+
+
- add + Create a default profile
-
+
Create a new default profile.
- add +
@@ -121,10 +122,12 @@ uk-grid> - -
-
-
+ +
+
+
{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}} {{(stakeholder.isPublic) ? 'Public' : 'Private'}} @@ -135,10 +138,10 @@ {{(stakeholder.isActive) ? 'Active' : 'Inactive'}}
- more_vert +
-
-
{{stakeholder.name}}
+
{{stakeholder.name}}
-
+
{{stakeholderUtils.isPublicIcon.get(stakeholder.isPublic)}} @@ -175,24 +178,24 @@
-
-
-
+
+
- add + Create a profile
-
+
Create a new profile by selecting the type (Funder, Organization, Research Initiative or Project) and select indicators based on a default or a blank profile.
- add +
diff --git a/src/app/monitor/monitor.component.html b/src/app/monitor/monitor.component.html index d7bf6d2..9d97080 100644 --- a/src/app/monitor/monitor.component.html +++ b/src/app/monitor/monitor.component.html @@ -2,7 +2,7 @@ - + {{periodFilter.selectedFromAndToValues}} @@ -40,7 +40,7 @@
-
-
+ uk-height-match="target: div.uk-card">

{{number.title}}

@@ -133,10 +133,10 @@ [class.uk-width-1-3@m]="indicator.width === 'small'" [class.uk-width-1-2@m]="indicator.width === 'medium'" [class.uk-width-1-1]="indicator.width === 'large'" class=" uk-margin-bottom"> -
-
+
Filtered: {{indicator.indicatorPaths[0].filtersApplied}} out of @@ -168,14 +168,14 @@

{{indicator.name + " "}}

-
-
+
-
-
- - - - - - - - - + +
+ + + + + + + + + +
+
+ +
+
+ +
-
-
-
Filters
Clear All
diff --git a/src/app/stakeholder/stakeholder.component.html b/src/app/stakeholder/stakeholder.component.html index 72302ab..5c38b41 100644 --- a/src/app/stakeholder/stakeholder.component.html +++ b/src/app/stakeholder/stakeholder.component.html @@ -1,4 +1,5 @@
-
-

+
+

Customise your Monitor Dashboard!

@@ -108,12 +112,12 @@
- +
-
+
{{topic.name}}
-
+
diff --git a/src/app/topic/indicators.component.html b/src/app/topic/indicators.component.html index b1a957e..cfaaa6c 100644 --- a/src/app/topic/indicators.component.html +++ b/src/app/topic/indicators.component.html @@ -1,40 +1,39 @@ -
-
-
-
-
+ -
-
-
You are about to delete "{{element.name}}" {{type}} permanently.
diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts index 8777e56..1291ade 100644 --- a/src/app/topic/topic.component.ts +++ b/src/app/topic/topic.component.ts @@ -1,6 +1,6 @@ import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; -import {Title} from '@angular/platform-browser'; +import {DomSanitizer, Title} from '@angular/platform-browser'; import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'; import {Category, Section, Stakeholder, SubCategory, Topic} from "../openaireLibrary/monitor/entities/stakeholder"; import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service"; @@ -11,6 +11,7 @@ import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {StakeholderUtils} from "../utils/indicator-utils"; import {StringUtils} from "../openaireLibrary/utils/string-utils.class"; import {IDeactivateComponent} from "../openaireLibrary/utils/can-exit.guard"; +import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service"; declare var UIkit; @@ -58,7 +59,8 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent { private router: Router, private title: Title, private fb: FormBuilder, - private stakeholderService: StakeholderService) { + private stakeholderService: StakeholderService, + private layoutService: LayoutService) { } public ngOnInit() { @@ -73,7 +75,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent { subscription = this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => { if (stakeholder) { this.stakeholder = stakeholder; - this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']); + if(params['topic']) { + this.topicIndex = this.stakeholder.topics.findIndex(topic => topic.alias === params['topic']); + }else{ + this.topicIndex = 0; + } + this.categoryIndex = 0; + this.subCategoryIndex = 0; + // console.debug(this. stakeholder.topics[this.topicIndex]) + // console.debug(this. stakeholder.topics[this.topicIndex].categories) + console.debug( this. stakeholder.topics[this.topicIndex].categories[this.categoryIndex].subCategories[this.subCategoryIndex]) if (this.topicIndex === -1) { this.navigateToError(); } else { @@ -156,14 +167,19 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent { })); } - public editTopicOpen() { - this.index = this.topicIndex; + public editTopicOpen(index=this.topicIndex) { + this.index = index; this.type = 'topic'; - this.buildTopic(this.stakeholder.topics[this.index]); + if (index === -1) { + this.buildTopic(new Topic(null, null, null, true, true)); + } else { + this.buildTopic(this.stakeholder.topics[index]); + } this.editOpen(); } - public saveTopic() { + public saveTopic(index=this.topicIndex) { + this.index = index; if (!this.form.invalid) { let path = [this.stakeholder._id]; let callback = (topic: Topic): void => { @@ -173,47 +189,46 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent { } } - public toggleTopicStatus() { - this.index = this.topicIndex; + public toggleTopicStatus(index=this.topicIndex) { this.type = 'topic'; let path = [ this.stakeholder._id, - this.stakeholder.topics[this.topicIndex]._id + this.stakeholder.topics[index]._id ]; - this.toggleStatus(this.stakeholder.topics[this.topicIndex], path); + this.toggleStatus(this.stakeholder.topics[index], path); } - public toggleTopicAccess() { - this.index = this.topicIndex; + public toggleTopicAccess(index=this.topicIndex) { + this.index = index; this.type = 'topic'; let path = [ this.stakeholder._id, - this.stakeholder.topics[this.topicIndex]._id + this.stakeholder.topics[index]._id ]; - this.toggleAccess(this.stakeholder.topics[this.topicIndex], path); + this.toggleAccess(this.stakeholder.topics[index], path); } - public deleteTopicOpen(childrenAction: string = null) { + public deleteTopicOpen( index=this.topicIndex, childrenAction: string = null) { this.type = 'topic'; - this.index = this.topicIndex; + this.index = index; this.element = this.stakeholder.topics[this.index]; this.deleteOpen(childrenAction); } - public deleteTopic() { + public deleteTopic(index=this.topicIndex) { let path: string[] = [ this.stakeholder._id, - this.stakeholder.topics[this.index]._id + this.stakeholder.topics[index]._id ]; let callback = (): void => { - this.stakeholder.topics.splice(this.index, 1); + this.stakeholder.topics.splice(index, 1); }; this.delete('Topic has been successfully be deleted', path, callback, true); } public toggleCategory(index: number) { - if (this.selectedCategoryIndex !== index) { - this.selectedCategoryIndex = index; + if (this.categoryIndex !== index) { + this.categoryIndex = index; this.toggle = true; } else { this.toggle = !this.toggle; @@ -558,4 +573,16 @@ export class TopicComponent implements OnInit, OnDestroy, IDeactivateComponent { return this.type; } } + + public get isSmallScreen() { + return this.layoutService.isSmallScreen; + } + public get open() { + return this.layoutService.open; + } + + public toggleOpen(event: MouseEvent) { + event.preventDefault(); + this.layoutService.setOpen(!this.open); + } } diff --git a/src/assets/monitor-custom.css b/src/assets/monitor-custom.css index a40a98c..c95f469 100644 --- a/src/assets/monitor-custom.css +++ b/src/assets/monitor-custom.css @@ -20,6 +20,7 @@ /* Dashboard variables*/ --sidebar-width: 320px; + --sidebar-mini-width: 130px; --sidebar-font-size: 14px; --header-height: 70px; --primary-color: #0d47a1; @@ -40,11 +41,7 @@ .stakeholderPage #sidebar_main .sidebar_main_header .logo{ margin-top: 15px; } -.stakeholderPage .uk-navbar-container{ - /*background-color: white !important;*/ - padding-left: 0; -} .stakeholderPage .uk-navbar-center .uk-logo{ max-height: var(--header-height); } @@ -56,10 +53,10 @@ .stakeholderPage #header_main{ padding-left: 6px; } -#header_main.light_header { +/*#header_main.light_header { background: #F9FBFC !important; color: #000000B3; -} +}*/ .dashboard #header_main.light_header .uk-navbar-nav > li > user-mini > a, .dashboard #header_main.light_header .uk-navbar-nav > li > a { color: #000000B3; @@ -71,38 +68,12 @@ stroke: #000000B3; } -.stakeholderPage #hide_controls:hover #toggle:hover .material-icons, .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons { - color: var(--portal-main-color); - /*border: var(--portal-main-color) solid 0px;*/ -} -.stakeholderPage #hide_controls #toggle:hover .material-icons , .stakeholderPage #hide_controls #toggle:not(.sidebar_main_open) .material-icons, #hide_controls #toggle .material-icons{ - color: var(--portal-main-color) !important; -} - -.stakeholderPage #sidebar_main .menu_section > ul > li > a > .menu_icon .material-icons, .stakeholderPage #sidebar_main .menu_section > ul > li > a > .menu_icon svg * { - color: #1A1A1A !important; - fill: #1A1A1A !important; -} -.stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg * { - color: var(--portal-main-color) !important; - fill: var(--portal-main-color) !important; -} - .sidebar_mini #sidebar_main .menu_section > ul > li { margin-bottom: 15px !important; } -.stakeholderPage #sidebar_main .menu_section > ul > li.current_section, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover, -.stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a:hover -{ - /*background-color: var(--portal-main-color) !important;*/ -} .stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_title,.stakeholderPage #sidebar_main .menu_section > ul > li.current_section .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover .menu_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover .menu_mini_title, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon .material-icons, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section > a > .menu_icon svg * -/*, .stakeholderPage #sidebar_main .menu_section > ul > li.current_section:hover > a > .menu_icon svg **/ -/*.stakeholderPage #sidebar_main .menu_section > ul > li:hover > a > .menu_icon .material-icons*/ { - /*color: white !important;*/ - /*fill: white !important;*/ color: var(--portal-main-color) !important; font-weight: 700; } @@ -111,22 +82,9 @@ max-height: calc(var(--header-height) - 30px); } .stakeholderPage .uk-tab > li.uk-active > a,.stakeholderPage .uk-tab > li > a:focus, .stakeholderPage .uk-tab > li > a:hover { - /*border-bottom-color: var(--portal-main-color) !important;*/ - border: 0px !important; + border: 0 transparent !important; color: var(--portal-main-color) !important } -.stakeholderPage #style_switcher { - top:200px; -} - -.stakeholderPage .uk-navbar-container{ - /*box-shadow: 0px 1px 3px #0000004D;*/ - -} -/* -.stakeholderPage #sidebar_main{ - background-color: #F0F4F2; -}*/ .stakeholderPage .categoriesTabs >li a{ font-size: 14px; text-transform: capitalize; @@ -150,12 +108,9 @@ bottom a:not(.license), bottom a > :not(svg) { text-decoration: underline; } -#style_switcher{ +#style_switcher .uk-offcanvas-bar{ width:450px !important; } -#style_switcher:not(.switcher_active){ - margin-right: -450px !important; -} .ng5-slider .ng5-slider-pointer, .ng5-slider .ng5-slider-selection { background-color: var(--portal-main-color) !important; @@ -169,13 +124,6 @@ bottom a:not(.license), bottom a > :not(svg) { top:200px !important; } -#style_switcher{ - top: 0 !important; - bottom: 0 !important; - /*padding: 50px !important;*/ - z-index: 1105 !important; - } - .uk-subnav.recentyears > :first-child { padding-left: 0 !important; @@ -185,13 +133,6 @@ bottom a:not(.license), bottom a > :not(svg) { padding-left: 0 !important; } -/*add miniTitle*/ -.sidebar_mini #sidebar_main .menu_section > ul > li > a .menu_icon{ - height:35px !important; -} -/* #sidebar_main .menu_section > ul > li > a .menu_icon{*/ -/* height:35px !important;*/ -/*}*/ #sidebar_main .menu_section > ul > li > a { height:inherit !important; } @@ -221,10 +162,6 @@ bottom a:not(.license), bottom a > :not(svg) { margin-left: auto; } -.stakeholderPage #sidebar_main .menu_section > ul > li > a { - display: inherit !important; - text-align: center; -} .stakeholderPage #sidebar_main .menu_section > ul > li.current_section { width: 150px; height: 100%; @@ -238,7 +175,7 @@ bottom a:not(.license), bottom a > :not(svg) { -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); - margin: 35px auto 30px auto; + margin: 63px auto 63px auto; } .sidebar_mini #sidebar_main .menu_section > ul > li.current_section{ -webkit-transform: rotate(0deg); @@ -258,11 +195,9 @@ bottom a:not(.license), bottom a > :not(svg) { border: 1px solid #1a1a1a; color: #1a1a1a; border-radius: 40px; - background-color: white; + background-color: transparent; opacity: 0.5 ; - /*background: var(--portal-main-color) !important;*/ - /*color: var(--portal-main-contrast) !important;*/ - + padding: 5px 10px; } @@ -278,7 +213,7 @@ bottom a:not(.license), bottom a > :not(svg) { } -.stakeholderPage #style_switcher { +.stakeholderPage #style_switcher .uk-offcanvas-bar { box-shadow: none; border: 1px solid var(--monitor-portal-color); } @@ -287,10 +222,10 @@ bottom a:not(.license), bottom a > :not(svg) { border-right: 1px solid var(--monitor-portal-color); } -.stakeholderPage .md-card.uk-disabled, .stakeholderPage .md-card.semiFiltered{ +.stakeholderPage .uk-card.uk-disabled, .stakeholderPage .uk-card.semiFiltered{ opacity: 0.5; } -.stakeholderPage .md-card.semiFiltered > * > .highcharts-series-group{ +.stakeholderPage .uk-card.semiFiltered > * > .highcharts-series-group{ opacity: 0.5; } .stakeholderPage:not(.sidebar_mini) #sidebar_main .menu_section > ul.searchLink { @@ -303,11 +238,9 @@ bottom a:not(.license), bottom a > :not(svg) { } .stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container{ background-color: #F9FBFC !important; + box-shadow: none; } -.stakeholderPage #page_content_inner > div.indicators{ - padding: 0px 150px; -} .stakeholderPage #page_content_inner { background-image: url(/assets/monitor-shapes-bg.svg); @@ -317,10 +250,6 @@ bottom a:not(.license), bottom a > :not(svg) { background-attachment: fixed; } -/*Don't grey out */ -.sidebar_main_active #page_content, .sidebar_main_active #header_main, .sidebar_main_active #top_bar { - margin-left: 320px !important; -} @media only screen and (max-width: 1219px) { .sidebar_main_active #page_content:before { opacity: 0 !important; @@ -332,6 +261,6 @@ bottom a:not(.license), bottom a > :not(svg) { opacity: 0.8; } -.dashboard .sidebar_mini #hide_controls { - width: 130px; +.uk-navbar-container:not(.uk-navbar-transparent){ + background-color: #F9FBFC !important; } diff --git a/src/assets/new.css b/src/assets/new.css new file mode 100644 index 0000000..296e29c --- /dev/null +++ b/src/assets/new.css @@ -0,0 +1,372 @@ +:root { + --portal-main-color: #4686E5; /*#8DCA26;*/ + --portal-main-contrast: white; + --portal-dark-color: #004494;/*#7c9144;*/ + + --openaire-main-color: #313179; + + --explore-portal-color: #D95F2D; + --provide-portal-color: #37C7E9; + --monitor-portal-color: #8DCA26; + --connect-portal-color: #EBB13E; + --develop-portal-color: #DA65AB; + + --explore-portal-lower-tone: #a0462c; + --provide-portal-lower-tone: #3A8FA3; + --monitor-portal-lower-tone: #7c9144; + --connect-portal-lower-tone: #b48536; + --develop-portal-lower-tone: #9f4e7e; + + + /* Dashboard variables*/ + --sidebar-width: 320px; + --sidebar-mini-width: 130px; + --sidebar-font-size: 14px; + --header-height: 70px; + --primary-color: #0d47a1; + --secondary-color: #1CA9D5; + + --monitor-header-menu-height: 100px; +} +/*Stakeholder Specific*/ +.publicationsSearchForm{ + background-image: none; +} +.stakeholderPage #page_content > div, .stakeholderPage #page_content .uk-navbar-container{ + background-color: #F9FBFC !important; + box-shadow: none; +} +/*.stakeholderPage #header_main, .stakeholderPage .uk-sticky.uk-navbar-container {*/ +/* background: #F9FBFC !important;*/ +/*}*/ +.stakeholderPage #page_content_inner { + background-image: url(/assets/monitor-shapes-bg.svg); + background-size: cover; + background-repeat: no-repeat; + background-position: top; + background-attachment: fixed; + +} +/*General*/ +#sidebar_main #sidebar_content{ + width:var(--sidebar-width); + position: fixed; + height: 100%; + top: 0; + bottom: 0; + left: 0; + z-index: 981; + background: #fff; +} +.stakeholderPage { + background: #F9FBFC !important; +} + +#style_switcher .uk-offcanvas-bar { + box-sizing: border-box; + padding: 16px; +} +#style_switcher_toggle { + top: 320px !important; + position: fixed; + height: 36px; + /*background: #fff;*/ + background-color: rgb(255, 255, 255); + border-radius: 4px 0 0 4px; + cursor: pointer; + padding: 0 8px; + box-shadow: -2px 2px 5px rgba(0,0,0,.26); + box-sizing: border-box; + /*z-index: 981;*/ +} +#filters_switcher_toggle { + top: 320px !important; + position: fixed; + height: 36px; + background-color: var(--portal-main-color); + border-radius: 4px 0 0 4px; + cursor: pointer; + padding: 0 2px; + box-shadow: -2px 2px 5px rgba(0,0,0,.26); + box-sizing: border-box; + /*z-index: 981;*/ + right: 0; +} +.sidebar_main_swipe.sidebar_mini #sidebar_switcher_toggle{ + left:calc( var(--sidebar-mini-width) + 0px); + +} +.sidebar_main_swipe #sidebar_switcher_toggle{ + left:calc( var(--sidebar-width) + 0px); +} +#sidebar_switcher_toggle { + top: 320px !important; + position: fixed; + background: #fff; + background-color: rgb(255, 255, 255); + border: 1px solid var(--portal-dark-color); + border-left: 0px ; + cursor: pointer; + padding: 0 4px; + width:10px; + height: 66px; + z-index: 981; +} + +/*Sidebar*/ +.badge { + height: 59px; + position: absolute; + top: 0; + left: -5px; + z-index: 1; + background-color: transparent; + display: block !important; +} +/*Style*/ + + +#sidebar_main .menu_section > ul li > a { + font-size: var(--sidebar-font-size); + color: rgba(0,0,0,.7); +} + +.dashboard #sidebar_main .menu_section > ul > li > a:hover, #sidebar_main .menu_section > ul li.current_section > a { + color: var(--portal-main-color); +} +/*#sidebar_main .menu_section > ul li.current_section > a {*/ +/* font-size: var(--sidebar-font-size);*/ +/* color: rgba(0,0,0,.7);*/ +/*}*/ +.sidebar_main_swipe #page_content{ + padding-left: var(--sidebar-width); + transition: 0.5s; +} + +/*Sidebar close*/ +.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #page_content{ + padding-left:0; + transition: 0.5s; + +} +.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_main #sidebar_content { + display: none; + width:0; + +} +.sidebar_main_swipe:not(.sidebar_main_active):not(.sidebar_mini) #sidebar_switcher_toggle{ + left: 10px; +} +/*Sidebar mini*/ +.sidebar_main_swipe.sidebar_mini #page_content{ + padding-left:var(--sidebar-mini-width); + transition: 0.5s; + +} + +.sidebar_mini #sidebar_main #sidebar_content { + width: var(--sidebar-mini-width); + +} +#sidebar_main .menu_section > ul > li > a { + display: block; +} + +.dashboard #sidebar_main #sidebar_content{ + border-right: 1px solid var(--portal-dark-color); +} +/*Sidebar Header logo */ + #sidebar_main .sidebar_main_header .portalLogo{ + background: url("/assets/logo-large-monitor.png") no-repeat; + background-size: contain ; + margin-left: 35px; + margin-top: 5px; + height:50px; +} + + .sidebar_mini #sidebar_main .sidebar_main_header .portalLogo{ + background: url("/assets/logo-small-monitor.png") no-repeat !important; + background-size: 50px 50px !important; +} +/*Sidebar Rotation*/ + +.stakeholderPage #sidebar_main .menu_section > ul > li.current_section { + width: 150px; + height: 100%; + transition: 0.70s; + -webkit-transition: 0.70s; + -moz-transition: 0.70s; + -ms-transition: 0.70s; + -o-transition: 0.70s; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); + margin: 63px auto 63px auto; +} +.stakeholderPage #sidebar_main .menu_section > ul > li { + transition: 0.70s; + -webkit-transition: 0.70s; + -moz-transition: 0.70s; + -ms-transition: 0.70s; + -o-transition: 0.70s; + /*display: block;*/ + /*text-align: center;*/ + /*margin-right: auto;*/ + /*margin-left: auto;*/ +} +.sidebar_mini #sidebar_main .menu_section > ul > li.current_section{ + -webkit-transform: rotate(0deg); + -moz-transform: rotate(0deg); + -o-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); + width: inherit; + height: inherit; + + margin: 0px 0px; +} + + +.stakeholderPage #sidebar_main #sidebar_content, .stakeholderPage #sidebar_switcher_toggle { + border-color: var(--monitor-portal-color); +} + + + +/*tabs + +*/ + +.categoriesTabs.uk-tab > li > a, .categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover { + border: 0 transparent !important; +} +.categoriesTabs.uk-tab > li.uk-active > a,.categoriesTabs.uk-tab > li > a:focus, .categoriesTabs.uk-tab > li > a:hover { + color: var(--portal-main-color) !important +} +.categoriesTabs >li a{ + font-size: 14px; + text-transform: capitalize; +} + .subCategoriesTabs >li a{ + font-size: 13px; + text-transform: capitalize; +} + .categoriesTabs > li.uk-active a, .subCategoriesTabs > li.uk-active a{ + font-weight:bold; +} +.uk-subnav-pill.subCategoriesTabs > li > a{ + border: 1px solid #1a1a1a; + color: #1a1a1a; + border-radius: 40px; + background-color: transparent; + opacity: 0.5 ; + padding: 5px 10px; +} + + +.uk-subnav-pill.subCategoriesTabs > li.uk-active > a{ + color: white; + border: 1px solid var(--portal-main-color); + background-color: var(--portal-main-color); + opacity: 1 ; +} + +.uk-tab.categoriesTabs::before { + border-bottom: none !important; +} + +/*dashboard tabs*/ + +.categoriesTabs.uk-tab.admin > li.uk-active > a, .categoriesTabs.uk-tab.admin > li > a:focus, .categoriesTabs.uk-tab.admin > li > a:hover { + color: var(--portal-dark-color) !important +} +.uk-subnav-pill.subCategoriesTabs.admin > li.uk-active > a{ + border: 1px solid var(--portal-dark-color); + background-color: var(--portal-dark-color); +} +/* Section Tools*/ + +.dashboard .section { + padding-top: 10px; + padding-bottom: 10px; + padding-right: 10px; + border: rgba(0, 0, 0, 0) solid 1px; + position: relative; +} + +.dashboard .section .tools { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -100%); + display: none; +} + +.dashboard .section:not(.list-view) { + border: white solid 1px; +} + +.dashboard .section:not(.list-view):hover { + border: var(--secondary-color) solid 1px; +} + +.dashboard .section:not(.list-view):hover .tools { + display: block; + width: 50px; + background: var(--secondary-color) ; + color: white; + -webkit-clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%); + clip-path: polygon(20% 0%, 80% 0, 100% 100%, 0% 100%); +} + +.dashboard .section:not(.list-view):hover .tools a{ + color: white; +} + +.dashboard .section:hover .tools .actions a:last-child { + margin-left: 3px +; +} + + + +/* 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 { + background-color: var(--secondary-color); + position: relative; + min-width: 40px; + min-height: 40px; + border-radius: 50%; +} + +.dashboard .new-section .tools .md-btn .material-icons { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + margin: 0; +} +/*Search */ +#searchFormPanel{ + margin-top: 30px; + height: 250px; +} diff --git a/src/index.html b/src/index.html index 283869e..7f39126 100644 --- a/src/index.html +++ b/src/index.html @@ -32,10 +32,10 @@
- +