mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
fix(sidebar): fix #997
This commit is contained in:
Alexander Zhukov
parent
4931da2d22
commit
2a5d9463b1
8 changed files with 186 additions and 227 deletions
|
|
@ -19,22 +19,23 @@
|
|||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"../node_modules/normalize.css/normalize.css",
|
||||
"../node_modules/bootstrap/scss/bootstrap.scss",
|
||||
"../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
|
||||
"../node_modules/normalize.css/normalize.css",
|
||||
"../node_modules/font-awesome/scss/font-awesome.scss",
|
||||
"../node_modules/ionicons/scss/ionicons.scss",
|
||||
"../node_modules/bootstrap/scss/bootstrap.scss",
|
||||
"../node_modules/leaflet/dist/leaflet.css",
|
||||
"../node_modules/chartist/dist/chartist.css",
|
||||
"../node_modules/fullcalendar/dist/fullcalendar.css",
|
||||
"app/theme/initial.scss",
|
||||
"app/theme/theme.scss",
|
||||
"styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"../node_modules/jquery/dist/jquery.js",
|
||||
"../node_modules/easy-pie-chart/dist/jquery.easypiechart.js",
|
||||
"../node_modules/jquery-slimscroll/jquery.slimscroll.js",
|
||||
"../node_modules/tether/dist/js/tether.js",
|
||||
"../node_modules/easy-pie-chart/dist/jquery.easypiechart.js"
|
||||
"../node_modules/bootstrap/dist/js/bootstrap.js"
|
||||
],
|
||||
"environmentSource": "environments/environment.ts",
|
||||
"environments": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
@import './theme/sass/conf/conf';
|
||||
@import './theme/components/baSidebar/baSidebar';
|
||||
|
||||
:host /deep/ {
|
||||
@mixin layout-collapsed() {
|
||||
.al-main {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.al-footer {
|
||||
padding-left: 83px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-collapsed() {
|
||||
.al-sidebar {
|
||||
width: 52px;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 52px;
|
||||
@include bg-translucent-dark(0.8);
|
||||
width: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transition: width 0.5s ease;
|
||||
&.slide-right {
|
||||
width: 135px;
|
||||
}
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
min-width: 130px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-overlap() {
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
@include bg-translucent-dark(0.75);
|
||||
transition: width 0.5s ease;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
top: auto;
|
||||
left: auto;
|
||||
background: none;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: $sidebar-width - 4;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-hidden() {
|
||||
.al-sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.menu-collapsed {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (min-width: $resXS) {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
|
||||
@media (min-width: $resXS + 1) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@include sidebar-overlap();
|
||||
}
|
||||
|
||||
@media (max-width: $resXS) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-hidden();
|
||||
}
|
||||
.al-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
.al-footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import {
|
||||
inject,
|
||||
async,
|
||||
TestBed,
|
||||
ComponentFixture
|
||||
} from '@angular/core/testing';
|
||||
|
||||
// Load the implementations that should be tested
|
||||
import { App } from './app.component';
|
||||
import { GlobalState } from './global.state';
|
||||
import { BaImageLoaderService, BaThemeSpinner } from './theme/services';
|
||||
import { BaThemeConfigProvider } from './theme/theme.configProvider';
|
||||
import { BaThemeConfig } from './theme/theme.config';
|
||||
|
||||
describe(`App`, () => {
|
||||
let comp: App;
|
||||
let fixture: ComponentFixture<App>;
|
||||
|
||||
// async beforeEach
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ App ],
|
||||
schemas: [NO_ERRORS_SCHEMA],
|
||||
providers: [GlobalState, BaImageLoaderService, BaThemeSpinner, BaThemeConfigProvider, BaThemeConfig]
|
||||
})
|
||||
.compileComponents(); // compile template and css
|
||||
}));
|
||||
|
||||
// synchronous beforeEach
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(App);
|
||||
comp = fixture.componentInstance;
|
||||
|
||||
fixture.detectChanges(); // trigger initial data binding
|
||||
});
|
||||
|
||||
it(`should be readly initialized`, () => {
|
||||
expect(fixture).toBeDefined();
|
||||
expect(comp).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
|
@ -12,8 +12,9 @@ import { layoutPaths } from './theme/theme.constants';
|
|||
*/
|
||||
@Component({
|
||||
selector: 'app',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
template: `
|
||||
<main [ngClass]="{'menu-collapsed': isMenuCollapsed}" baThemeRun>
|
||||
<main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
|
||||
<div class="additional-bg"></div>
|
||||
<router-outlet></router-outlet>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
@import "~normalize.css";
|
||||
@import "theme/theme";
|
||||
|
|
@ -1,11 +1,48 @@
|
|||
@import '../../sass/conf/conf';
|
||||
|
||||
$sidebar-scroll-width: 4px;
|
||||
$angle-left: "\f100";
|
||||
$angle-right: "\f101";
|
||||
$angle-left: '\f100';
|
||||
$angle-right: '\f101';
|
||||
|
||||
:host /deep/{
|
||||
@mixin default-sublist() {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: none;
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
> ba-menu-item > li {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
a {
|
||||
display: block;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
padding-left: 52px;
|
||||
height: auto;
|
||||
line-height: 29px;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&.selected:not(.with-sub-menu) > a {
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
&:hover {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
:host /deep/ {
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
top: $top-height;
|
||||
|
|
@ -114,59 +151,11 @@ $angle-right: "\f101";
|
|||
}
|
||||
|
||||
.slimScrollBar, .slimScrollRail {
|
||||
border-radius: 0px !important;
|
||||
border-radius: 0 !important;
|
||||
width: $sidebar-scroll-width !important;
|
||||
left: $sidebar-width - $sidebar-scroll-width;
|
||||
}
|
||||
|
||||
@mixin layout-collapsed() {
|
||||
.al-main {
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.al-footer {
|
||||
padding-left: 83px
|
||||
}
|
||||
}
|
||||
|
||||
@mixin default-sublist() {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
display: none;
|
||||
&.expanded {
|
||||
display: block;
|
||||
}
|
||||
> ba-menu-item > li {
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 0;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
a {
|
||||
display: block;
|
||||
text-shadow: none;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: $sidebar-text;
|
||||
padding-left: 52px;
|
||||
height: auto;
|
||||
line-height: 29px;
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&.selected:not(.with-sub-menu) > a {
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
&:hover {
|
||||
color: $sidebar-text;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
}
|
||||
|
|
@ -188,119 +177,9 @@ $angle-right: "\f101";
|
|||
top: 94px;
|
||||
}
|
||||
|
||||
@mixin sidebar-collapsed() {
|
||||
.al-sidebar {
|
||||
width: 52px;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 52px;
|
||||
@include bg-translucent-dark(0.8);
|
||||
width: 0;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transition: width 0.5s ease;
|
||||
&.slide-right {
|
||||
width: 135px;
|
||||
}
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
min-width: 130px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-hidden() {
|
||||
.al-sidebar {
|
||||
width: 0;
|
||||
}
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-overlap() {
|
||||
.al-sidebar {
|
||||
width: $sidebar-width;
|
||||
@include bg-translucent-dark(0.75);
|
||||
transition: width 0.5s ease;
|
||||
|
||||
.fa-angle-down, .fa-angle-up {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.al-sidebar-sublist {
|
||||
@include default-sublist();
|
||||
top: auto;
|
||||
left: auto;
|
||||
background: none;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sidebar-hover-elem, .sidebar-select-elem {
|
||||
left: $sidebar-width - 4;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-collapsed {
|
||||
.slimScrollBar, .slimScrollRail {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.menu-collapsed {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $resXS + 1) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-collapsed();
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) and (min-width: $resXS) {
|
||||
@include layout-collapsed();
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
@include sidebar-overlap();
|
||||
}
|
||||
|
||||
@media (max-width: $resXS) {
|
||||
.menu-collapsed {
|
||||
@include sidebar-hidden();
|
||||
}
|
||||
.al-main {
|
||||
margin-left: 0;
|
||||
}
|
||||
.al-footer {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
@import 'sass/conf/conf';
|
||||
@import 'sass/preloader';
|
||||
@import 'sass/ionicons';
|
||||
@import 'sass/fonts';
|
||||
|
|
@ -1,12 +1,15 @@
|
|||
@import "sass/conf/conf";
|
||||
@import "sass/bootstrap-overrides/overrides";
|
||||
@import "~animate.css/animate";
|
||||
@import "sass/typography";
|
||||
@import "sass/buttons";
|
||||
@import "sass/icons";
|
||||
@import "sass/layout";
|
||||
@import "sass/socicon";
|
||||
@import "sass/table";
|
||||
@import "sass/form";
|
||||
@import "sass/treeView";
|
||||
@import "sass/modal";
|
||||
@import 'sass/conf/conf';
|
||||
@import 'sass/bootstrap-overrides/overrides';
|
||||
@import '~animate.css/animate';
|
||||
@import 'sass/typography';
|
||||
@import 'sass/buttons';
|
||||
@import 'sass/icons';
|
||||
@import 'sass/layout';
|
||||
@import 'sass/socicon';
|
||||
@import 'sass/table';
|
||||
@import 'sass/form';
|
||||
@import 'sass/treeView';
|
||||
@import 'sass/modal';
|
||||
@import 'sass/preloader';
|
||||
@import 'sass/ionicons';
|
||||
@import 'sass/fonts';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue