mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
refactor(layout): enable window mode
This commit is contained in:
Sergey Andrievskiy
parent
3bedd2588d
commit
c2890a46d2
9 changed files with 73 additions and 348 deletions
|
|
@ -3,38 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
::ng-deep .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .main-container {
|
||||
width: $sidebar-width;
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-paddin-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Component } from '@angular/core';
|
|||
selector: 'ngx-one-column-layout',
|
||||
styleUrls: ['./one-column.layout.scss'],
|
||||
template: `
|
||||
<nb-layout center>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
|
|
|||
|
|
@ -3,123 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
::ng-deep .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .main-container {
|
||||
width: $sidebar-width;
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
::ng-deep .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(border-radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(border-radius));
|
||||
}
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
font-weight: bold;
|
||||
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
::ng-deep .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-paddin-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,15 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-three-columns-layout',
|
||||
styleUrls: ['./three-columns.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
|
||||
<a href="#" class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</a>
|
||||
</nb-sidebar-header>
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -36,21 +29,4 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class ThreeColumnsLayoutComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
constructor(protected themeService: NbThemeService) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
export class ThreeColumnsLayoutComponent {}
|
||||
|
|
|
|||
|
|
@ -3,123 +3,7 @@
|
|||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
@include nb-install-component() {
|
||||
nb-layout-column.small {
|
||||
flex: 0.15 !important;
|
||||
}
|
||||
|
||||
nb-sidebar.settings-sidebar {
|
||||
$sidebar-width: 7.5rem;
|
||||
|
||||
transition: width 0.3s ease;
|
||||
width: $sidebar-width;
|
||||
overflow: hidden;
|
||||
|
||||
&.collapsed {
|
||||
width: 0;
|
||||
|
||||
::ng-deep .main-container {
|
||||
width: 0;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .main-container {
|
||||
width: $sidebar-width;
|
||||
transition: width 0.3s ease;
|
||||
overflow: hidden;
|
||||
|
||||
.scrollable {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
::ng-deep .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, nb-theme(border-radius));
|
||||
@include nb-rtl(border-top-left-radius, nb-theme(border-radius));
|
||||
}
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
background: transparent;
|
||||
|
||||
.main-btn {
|
||||
padding: 0.75rem 2.5rem;
|
||||
margin-top: -2rem;
|
||||
font-weight: bold;
|
||||
transition: padding 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.48);
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
span {
|
||||
@include nb-ltr(padding-left, 0.25rem);
|
||||
@include nb-rtl(padding-right, 0.25rem);
|
||||
}
|
||||
|
||||
i, span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.compacted {
|
||||
|
||||
::ng-deep nb-sidebar-header {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
width: 46px;
|
||||
height: 44px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 5px;
|
||||
transition: none;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.main-content {
|
||||
padding: 0.75rem !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
|
||||
nb-sidebar.menu-sidebar {
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
::ng-deep .main-container {
|
||||
height: calc(#{nb-theme(sidebar-height)} - #{nb-theme(header-height)}) !important;
|
||||
@include nb-ltr(border-top-right-radius, 0);
|
||||
@include nb-rtl(border-top-left-radius, 0);
|
||||
|
||||
.scrollable {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-btn {
|
||||
display: none;
|
||||
}
|
||||
.menu-sidebar ::ng-deep .scrollable {
|
||||
padding-top: nb-theme(layout-paddin-top);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,15 @@
|
|||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { NbThemeService } from '@nebular/theme';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
// TODO: move layouts into the framework
|
||||
@Component({
|
||||
selector: 'ngx-two-columns-layout',
|
||||
styleUrls: ['./two-columns.layout.scss'],
|
||||
template: `
|
||||
<nb-layout>
|
||||
<nb-layout windowMode>
|
||||
<nb-layout-header fixed>
|
||||
<ngx-header></ngx-header>
|
||||
</nb-layout-header>
|
||||
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive >
|
||||
<nb-sidebar-header *ngIf="currentTheme !== 'corporate'">
|
||||
<a href="#" class="btn btn-hero-success main-btn">
|
||||
<i class="ion ion-social-github"></i> <span>Support Us</span>
|
||||
</a>
|
||||
</nb-sidebar-header>
|
||||
<nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive>
|
||||
<ng-content select="nb-menu"></ng-content>
|
||||
</nb-sidebar>
|
||||
|
||||
|
|
@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators';
|
|||
</nb-layout>
|
||||
`,
|
||||
})
|
||||
export class TwoColumnsLayoutComponent implements OnDestroy {
|
||||
|
||||
private alive = true;
|
||||
|
||||
currentTheme: string;
|
||||
|
||||
constructor(protected themeService: NbThemeService) {
|
||||
this.themeService.getJsTheme()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe(theme => {
|
||||
this.currentTheme = theme.name;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
}
|
||||
export class TwoColumnsLayoutComponent {}
|
||||
|
|
|
|||
50
src/app/@theme/styles/_overrides.scss
Normal file
50
src/app/@theme/styles/_overrides.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
@import './themes';
|
||||
|
||||
@mixin nb-overrides() {
|
||||
// overrides bootstrap svg style
|
||||
nb-icon svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
nb-auth-block .links nb-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
nb-select.size-medium button {
|
||||
padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
|
||||
|
||||
nb-icon {
|
||||
right: 0.41rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
nb-layout .layout .layout-container nb-sidebar {
|
||||
&,
|
||||
.main-container-fixed {
|
||||
top: nb-theme(header-height);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 20px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top) / 4);
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 150px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top) / 2);
|
||||
}
|
||||
|
||||
@media screen and (min-width: nb-theme(layout-window-mode-max-width) + 300px) {
|
||||
@include f-window-mode(nb-theme(layout-window-mode-padding-top));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin f-window-mode ($padding-top) {
|
||||
nb-layout.window-mode nb-layout-header.fixed {
|
||||
top: $padding-top;
|
||||
}
|
||||
|
||||
nb-sidebar .main-container-fixed {
|
||||
height: calc(100vh - #{nb-theme(header-height)} - #{$padding-top}) !important;
|
||||
top: calc(#{nb-theme(header-height)} + #{$padding-top}) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -12,6 +12,8 @@
|
|||
// loading progress bar theme
|
||||
@import './pace.theme';
|
||||
|
||||
@import './overrides';
|
||||
|
||||
// install the framework and custom global styles
|
||||
@include nb-install() {
|
||||
|
||||
|
|
@ -22,21 +24,6 @@
|
|||
|
||||
// loading progress bar
|
||||
@include ngx-pace-theme();
|
||||
|
||||
@include nb-overrides();
|
||||
};
|
||||
|
||||
// overrides bootstrap svg style
|
||||
nb-icon svg {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
nb-auth-block .links nb-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
nb-select.size-medium button {
|
||||
padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
|
||||
|
||||
nb-icon {
|
||||
right: 0.41rem !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-content-width: 87.5rem,
|
||||
layout-paddin-top: 2.25rem,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ $nb-themes: nb-register-theme((
|
|||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-content-width: 87.5rem,
|
||||
layout-paddin-top: 2.25rem,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ $nb-themes: nb-register-theme((
|
|||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-content-width: 87.5rem,
|
||||
layout-paddin-top: 2.25rem,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
@ -71,7 +71,7 @@ $nb-themes: nb-register-theme((
|
|||
|
||||
$nb-themes: nb-register-theme((
|
||||
font-family-secondary: font-family-primary,
|
||||
layout-content-width: 87.5rem,
|
||||
layout-paddin-top: 2.25rem,
|
||||
|
||||
menu-item-icon-margin: 0 0.5rem 0 0,
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue