diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css new file mode 100644 index 000000000..7eac55b11 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.css @@ -0,0 +1,29 @@ +.sidebar-footer { + width: 230px; + height: 40px; + margin: 5px 15px; + padding: 5px; + color: rgb(117, 117, 117); + background-color: #fafafa; + box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); +} + +.sidebar-footer .option { + margin: 0px; + padding-top: 2px; + padding-bottom: 2px; + padding-right: 10px; + border-radius: 0px; +} + +.sidebar-footer .vl { + border-right: 1px solid #d4d4d4; +} + +.option .style-icon { + font-size: 15px; + margin: 0px; + width: 20px; + padding-top: 2px; + color: #2e75b6; +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html new file mode 100644 index 000000000..5b85a6887 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.html @@ -0,0 +1,8 @@ + diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.spec.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.spec.ts new file mode 100644 index 000000000..3faf72650 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SidebarFooterComponent } from './sidebar-footer.component'; + +describe('SidebarFooterComponent', () => { + let component: SidebarFooterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidebarFooterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidebarFooterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts new file mode 100644 index 000000000..7b94c4269 --- /dev/null +++ b/dmp-frontend/src/app/ui/sidebar/sidebar-footer/sidebar-footer.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sidebar-footer', + templateUrl: './sidebar-footer.component.html', + styleUrls: ['./sidebar-footer.component.css'] +}) +export class SidebarFooterComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css index cced65c14..1e5fd15b6 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.css +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.css @@ -1,23 +1,28 @@ .logo-img { - width: 60px; - display: block; - max-height: none; - margin-left: 100px; + width: 60px; + display: block; + max-height: none; + margin-left: 100px; } .logo-img img { - width: 60px; - top: 0px; - position: inherit; + width: 60px; + top: 0px; + position: inherit; } .sidebarSubtitle p { - margin-left: 20px; - color: rgb(166, 166, 166); + margin-left: 20px; + color: rgb(166, 166, 166); } .nav hr { - width: 230px; - border-top: 2px solid #fff; - border-bottom: 2px solid #e0e2e3; + width: 230px; + border-top: 1px solid #fff; + border-bottom: 2px solid #d4d4d4; +} + +.sidebar-footer { + position: relative; + height: 48%; } diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html index 86333828d..1d9146058 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.component.html +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.component.html @@ -45,6 +45,7 @@ + + + diff --git a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts index 581100b4f..d7f6bbabe 100644 --- a/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts +++ b/dmp-frontend/src/app/ui/sidebar/sidebar.module.ts @@ -3,6 +3,7 @@ import { RouterModule } from '@angular/router'; import { CommonFormsModule } from '../../common/forms/common-forms.module'; import { CommonUiModule } from '../../common/ui/common-ui.module'; import { SidebarComponent } from './sidebar.component'; +import { SidebarFooterComponent } from './sidebar-footer/sidebar-footer.component'; @NgModule({ imports: [ @@ -11,7 +12,8 @@ import { SidebarComponent } from './sidebar.component'; RouterModule ], declarations: [ - SidebarComponent + SidebarComponent, + SidebarFooterComponent ], entryComponents: [], exports: [SidebarComponent] diff --git a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss index c30a87f9c..0194352ca 100644 --- a/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss +++ b/dmp-frontend/src/assets/scss/core/_sidebar-and-main-panel.scss @@ -1,503 +1,495 @@ -.wrapper{ - position: relative; - top: 0; - height: 100vh; +.wrapper { + position: relative; + top: 0; + height: 100vh; } .sidebar { - position: fixed; - top: 0; - bottom: 0; - left: 0; - z-index: 2; - width: 260px; - background: $white-color; - @include shadow-big(); + position: fixed; + top: 0; + bottom: 0; + left: 0; + z-index: 2; + width: 260px; + background: $white-color; + @include shadow-big(); - .caret{ - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 4px dashed; - border-top: 4px solid\9; - border-right: 4px solid transparent; - border-left: 4px solid transparent; + .caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid\9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + } + + &[data-background-color="black"] { + background-color: #191919; + } + .logo-img { + width: 35px; + display: block; + max-height: 30px; + margin-left: 13px; + margin-right: 15px; + + img { + width: 35px; + top: 16px; + position: absolute; } - - &[data-background-color="black"]{ - background-color: #191919; - } - .logo-img{ - width: 35px; - display: block; - max-height: 30px; - margin-left: 13px; - margin-right: 15px; - - img{ - width: 35px; - top: 16px; - position: absolute; - } - } - .sidebar-wrapper{ - position: relative; - height: calc(100vh - 75px); - overflow: auto; - width: 260px; - z-index: 4; - - padding-bottom: 30px; - - .dropdown .dropdown-backdrop{ - display: none !important; - } - - .navbar-form{ - border: none; - box-shadow: none; - - .input-group { - font-size: 1.7em; - height: 36px; - width: 78%; - padding-left: 17px; - } - } - - > .nav, - .user .user-info{ - [data-toggle="collapse"] ~ div > ul > li > a{ - span{ - display: inline-block; - @extend .animation-transition-general; - } - - .sidebar-normal{ - margin: 0; - position: relative; - transform: translateX(0px); - opacity: 1; - white-space: nowrap; - display: block; - - } - - .sidebar-mini{ - text-transform: uppercase; - width: 30px; - margin-right: 15px; - text-align: center; - letter-spacing: 1px; - position: relative; - float: left; - display: inherit; - } - - i{ - font-size: 17px; - line-height: 20px; - width: 26px; - } - } - } - } - - .logo-tim{ - border-radius: 50%; - border: 1px solid #333; - display: block; - height: 61px; - width: 61px; - float: left; - overflow: hidden; - - img{ - width: 60px; - height: 60px; - } - } - - .nav{ - margin-top: 20px; - display: block; - - .caret{ - margin-top: 13px; - position: absolute; - right: 6px; - } - - li{ - > a{ - &:hover, - &:focus{ - background-color: transparent; - outline: none; - } - } - - &:first-child > a{ - margin: 0 15px; - } - - &:hover > a, - & .dropdown-menu a:hover, - & .dropdown-menu a:focus, - &.active > [data-toggle="collapse"]{ - background-color: rgba(200, 200, 200, 0.2); - color: $black-color; - box-shadow: none; - } - - &.active > [data-toggle="collapse"]{ - i{ - color: #a9afbb; - } - } - - &.active > a, - &.active > a i{ - color: $white-color; - } - - &.separator{ - margin: 15px 0; - - &:after{ - width: calc(100% - 30px); - content: ""; - position: absolute; - height: 1px; - left: 15px; - background-color: rgba(180,180,180, .3); - } - - & + li { - margin-top: 31px; - } - } - } - - p{ - margin: 0; - line-height: 30px; - font-size: 14px; - position: relative; - display: block; - height: auto; - white-space: nowrap; - } - - i{ - font-size: 24px; - float: left; - margin-right: 15px; - line-height: 30px; - width: 30px; - text-align: center; - color: #a9afbb; - } - } - - .nav li a, - .nav li .dropdown-menu a{ - margin: 10px 15px 0; - border-radius: $border-radius-base; - color: $black-color; - padding-left: 10px; - padding-right: 10px; - text-transform: capitalize; - font-size: $font-paragraph - 1; - padding: 10px 15px; - } - - - .sidebar-background{ - position: absolute; - z-index: 1; - height: 100%; - width: 100%; - display: block; - top: 0; - left: 0; - background-size: cover; - background-position: center center; - - &:after{ - position: absolute; - z-index: 3; - width: 100%; - height: 100%; - content: ""; - display: block; - background: #FFFFFF; - opacity: .93; - } - } - - .logo{ - padding: 15px 0px; - margin: 0; - display: block; - position: relative; - z-index: 4; - - &:after{ - content: ''; - position: absolute; - bottom: 0; - right: 15px; - height: 1px; - width: calc(100% - 30px); - background-color: rgba(180,180,180, .3); - - } - - p{ - float: left; - font-size: 20px; - margin: 10px 10px; - color: $white-color; - line-height: 20px; - } - - .simple-text{ - text-transform: uppercase; - padding: $padding-small-vertical $padding-zero; - display: inline-block; - font-size: 18px; - color: $black-color; - white-space: nowrap; - font-weight: $font-weight-default; - line-height: 30px; - overflow: hidden; - text-align: center; - display: block; - } - } - - .logo-tim{ - border-radius: 50%; - border: 1px solid #333; - display: block; - height: 61px; - width: 61px; - float: left; - overflow: hidden; - - img{ - width: 60px; - height: 60px; - } - } - - - &[data-background-color="black"]{ - @include sidebar-background-color($gray-base, $white-color); - - .nav li .dropdown-menu .dropdown-item{ - color: $white-color; - } - } - - &[data-color="purple"]{ - @include set-background-color-button($brand-primary); - } - &[data-color="azure"]{ - @include set-background-color-button($brand-info); - } - &[data-color="green"]{ - @include set-background-color-button($brand-success); - } - &[data-color="orange"]{ - @include set-background-color-button($brand-warning); - } - &[data-color="danger"]{ - @include set-background-color-button($brand-danger); - } - &[data-color="rose"]{ - @include set-background-color-button($brand-rose); - } - - &[data-color="white"]{ - @include set-background-color-button($white-color); - @include sidebar-active-color($black-color); - } - - &[data-background-color="red"]{ - @include sidebar-background-color($brand-danger, $white-color); - - .user, - .logo, - .nav li.separator{ - &:after{ - background-color: rgba(255,255,255, .3); - } - } - - .nav{ - li:hover:not(.active) > a, - li.active > [data-toggle="collapse"]{ - background-color: rgba(255, 255, 255, 0.1); - } - } - } - - &[data-image]:after, - &.has-image:after{ - opacity: .77; - } -} - -.off-canvas-sidebar .navbar-collapse{ - .nav { - > li > a, - > li > a:hover{ - color: $white-color; - margin: 0 15px; - } - - > li > a:focus, - > li > a:hover{ - background: rgba(200, 200, 200, 0.2); - } - } -} - - -.main-panel{ + } + .sidebar-wrapper { position: relative; - float: right; - width: $sidebar-width; - @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + height: calc(100vh - 75px); + overflow: auto; + width: 260px; + z-index: 4; - .main-content{ - margin-top: 70px; - padding: 30px 15px; - min-height: calc(100vh - 123px); + padding-bottom: 10px; + + .dropdown .dropdown-backdrop { + display: none !important; } - .footer{ - border-top: 1px solid #e7e7e7; + .navbar-form { + border: none; + box-shadow: none; + + .input-group { + font-size: 1.7em; + height: 36px; + width: 78%; + padding-left: 17px; + } } - .navbar{ - margin-bottom: 0; - } - - .header{ - margin-bottom: 30px; - - .title{ - margin-top: 10px; - margin-bottom: 10px; - } - } -} - -.perfect-scrollbar-on{ - .sidebar, - .main-panel{ - height: 100%; - max-height: 100%; - } -} - - -.sidebar, -.main-panel, -.sidebar-wrapper{ - -webkit-transition-property: top,bottom,width; - transition-property: top,bottom, width; - -webkit-transition-duration: .2s,.2s, .35s; - transition-duration: .2s,.2s, .35s; - -webkit-transition-timing-function: linear,linear,ease; - transition-timing-function: linear,linear,ease; - -webkit-overflow-scrolling: touch; -} - -.visible-on-sidebar-regular{ - display: inline-block !important; -} -.visible-on-sidebar-mini{ - display: none !important; -} - -@media (min-width: 991px) { - .sidebar-mini{ - .visible-on-sidebar-regular{ - display: none !important; - } - .visible-on-sidebar-mini{ - display: inline-block !important; + > .nav, + .user .user-info { + [data-toggle="collapse"] ~ div > ul > li > a { + span { + display: inline-block; + @extend .animation-transition-general; } - .sidebar, - .sidebar .sidebar-wrapper{ - width: 80px; + .sidebar-normal { + margin: 0; + position: relative; + transform: translateX(0px); + opacity: 1; + white-space: nowrap; + display: block; } - .main-panel{ - width: $sidebar-mini-width; + .sidebar-mini { + text-transform: uppercase; + width: 30px; + margin-right: 15px; + text-align: center; + letter-spacing: 1px; + position: relative; + float: left; + display: inherit; } - .sidebar{ - display: block; - font-weight: 200; - z-index: 9999; - - .logo{ - a.logo-normal{ - opacity: 0; - @include transform-translate-x(-25px); - } - } - - .sidebar-wrapper{ - > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .user-info > a > span, - > .nav li > a p{ - @include transform-translate-x(-25px); - opacity: 0; - } - } - } - - .sidebar:hover{ - width: 260px; - - .logo{ - a.logo-normal{ - opacity: 1; - @include transform-translate-x(0px); - } - } - - .sidebar-wrapper{ - width: 260px; - - > .nav li > a p, - > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, - .user .user-info > a > span{ - @include transform-translate-x(0px); - opacity: 1; - } - } - } - } - - .sidebar { - .nav .nav-item { - &.active-pro { - position: absolute; - width: 100%; - bottom: 13px; + i { + font-size: 17px; + line-height: 20px; + width: 26px; } } } + } + + .logo-tim { + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img { + width: 60px; + height: 60px; + } + } + + .nav { + margin-top: 20px; + display: block; + + .caret { + margin-top: 13px; + position: absolute; + right: 6px; + } + + li { + > a { + &:hover, + &:focus { + background-color: transparent; + outline: none; + } + } + + &:first-child > a { + margin: 0 15px; + } + + &:hover > a, + & .dropdown-menu a:hover, + & .dropdown-menu a:focus, + &.active > [data-toggle="collapse"] { + background-color: rgba(200, 200, 200, 0.2); + color: $black-color; + box-shadow: none; + } + + &.active > [data-toggle="collapse"] { + i { + color: #a9afbb; + } + } + + &.active > a, + &.active > a i { + color: $white-color; + } + + &.separator { + margin: 15px 0; + + &:after { + width: calc(100% - 30px); + content: ""; + position: absolute; + height: 1px; + left: 15px; + background-color: rgba(180, 180, 180, 0.3); + } + + & + li { + margin-top: 31px; + } + } + } + + p { + margin: 0; + line-height: 30px; + font-size: 14px; + position: relative; + display: block; + height: auto; + white-space: nowrap; + } + + i { + font-size: 24px; + float: left; + margin-right: 15px; + line-height: 30px; + width: 30px; + text-align: center; + color: #a9afbb; + } + } + + .nav li a, + .nav li .dropdown-menu a { + margin: 10px 15px 0; + border-radius: $border-radius-base; + color: $black-color; + padding-left: 10px; + padding-right: 10px; + text-transform: capitalize; + font-size: $font-paragraph - 1; + padding: 10px 15px; + } + + .sidebar-background { + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + display: block; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + + &:after { + position: absolute; + z-index: 3; + width: 100%; + height: 100%; + content: ""; + display: block; + background: #ffffff; + opacity: 0.93; + } + } + + .logo { + padding: 15px 0px; + margin: 0; + display: block; + position: relative; + z-index: 4; + + &:after { + content: ""; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background-color: rgba(180, 180, 180, 0.3); + } + + p { + float: left; + font-size: 20px; + margin: 10px 10px; + color: $white-color; + line-height: 20px; + } + + .simple-text { + text-transform: uppercase; + padding: $padding-small-vertical $padding-zero; + display: inline-block; + font-size: 18px; + color: $black-color; + white-space: nowrap; + font-weight: $font-weight-default; + line-height: 30px; + overflow: hidden; + text-align: center; + display: block; + } + } + + .logo-tim { + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img { + width: 60px; + height: 60px; + } + } + + &[data-background-color="black"] { + @include sidebar-background-color($gray-base, $white-color); + + .nav li .dropdown-menu .dropdown-item { + color: $white-color; + } + } + + &[data-color="purple"] { + @include set-background-color-button($brand-primary); + } + &[data-color="azure"] { + @include set-background-color-button($brand-info); + } + &[data-color="green"] { + @include set-background-color-button($brand-success); + } + &[data-color="orange"] { + @include set-background-color-button($brand-warning); + } + &[data-color="danger"] { + @include set-background-color-button($brand-danger); + } + &[data-color="rose"] { + @include set-background-color-button($brand-rose); + } + + &[data-color="white"] { + @include set-background-color-button($white-color); + @include sidebar-active-color($black-color); + } + + &[data-background-color="red"] { + @include sidebar-background-color($brand-danger, $white-color); + + .user, + .logo, + .nav li.separator { + &:after { + background-color: rgba(255, 255, 255, 0.3); + } + } + + .nav { + li:hover:not(.active) > a, + li.active > [data-toggle="collapse"] { + background-color: rgba(255, 255, 255, 0.1); + } + } + } + + &[data-image]:after, + &.has-image:after { + opacity: 0.77; + } + + .nav .nav-item { + &.active-pro { + position: absolute; + width: 100%; + bottom: 0px; + } + } +} + +.off-canvas-sidebar .navbar-collapse { + .nav { + > li > a, + > li > a:hover { + color: $white-color; + margin: 0 15px; + } + + > li > a:focus, + > li > a:hover { + background: rgba(200, 200, 200, 0.2); + } + } +} + +.main-panel { + position: relative; + float: right; + width: $sidebar-width; + @include transition(0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + + .main-content { + margin-top: 70px; + padding: 30px 15px; + min-height: calc(100vh - 123px); + } + + .footer { + border-top: 1px solid #e7e7e7; + } + + .navbar { + margin-bottom: 0; + } + + .header { + margin-bottom: 30px; + + .title { + margin-top: 10px; + margin-bottom: 10px; + } + } +} + +.perfect-scrollbar-on { + .sidebar, + .main-panel { + height: 100%; + max-height: 100%; + } +} + +.sidebar, +.main-panel, +.sidebar-wrapper { + -webkit-transition-property: top, bottom, width; + transition-property: top, bottom, width; + -webkit-transition-duration: 0.2s, 0.2s, 0.35s; + transition-duration: 0.2s, 0.2s, 0.35s; + -webkit-transition-timing-function: linear, linear, ease; + transition-timing-function: linear, linear, ease; + -webkit-overflow-scrolling: touch; +} + +.visible-on-sidebar-regular { + display: inline-block !important; +} +.visible-on-sidebar-mini { + display: none !important; +} + +@media (min-width: 991px) { + .sidebar-mini { + .visible-on-sidebar-regular { + display: none !important; + } + .visible-on-sidebar-mini { + display: inline-block !important; + } + + .sidebar, + .sidebar .sidebar-wrapper { + width: 80px; + } + + .main-panel { + width: $sidebar-mini-width; + } + + .sidebar { + display: block; + font-weight: 200; + z-index: 9999; + + .logo { + a.logo-normal { + opacity: 0; + @include transform-translate-x(-25px); + } + } + + .sidebar-wrapper { + > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info > a > span, + > .nav li > a p { + @include transform-translate-x(-25px); + opacity: 0; + } + } + } + + .sidebar:hover { + width: 260px; + + .logo { + a.logo-normal { + opacity: 1; + @include transform-translate-x(0px); + } + } + + .sidebar-wrapper { + width: 260px; + + > .nav li > a p, + > .nav [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info [data-toggle="collapse"] ~ div > ul > li > a .sidebar-normal, + .user .user-info > a > span { + @include transform-translate-x(0px); + opacity: 1; + } + } + } + } }