From c2890a46d214dae9a6eee481e9035b50320de672 Mon Sep 17 00:00:00 2001 From: Sergey Andrievskiy Date: Mon, 24 Jun 2019 16:28:21 +0300 Subject: [PATCH] refactor(layout): enable window mode --- .../layouts/one-column/one-column.layout.scss | 35 +---- .../layouts/one-column/one-column.layout.ts | 2 +- .../three-columns/three-columns.layout.scss | 120 +----------------- .../three-columns/three-columns.layout.ts | 32 +---- .../two-columns/two-columns.layout.scss | 120 +----------------- .../layouts/two-columns/two-columns.layout.ts | 33 +---- src/app/@theme/styles/_overrides.scss | 50 ++++++++ src/app/@theme/styles/styles.scss | 21 +-- src/app/@theme/styles/themes.scss | 8 +- 9 files changed, 73 insertions(+), 348 deletions(-) create mode 100644 src/app/@theme/styles/_overrides.scss diff --git a/src/app/@theme/layouts/one-column/one-column.layout.scss b/src/app/@theme/layouts/one-column/one-column.layout.scss index 1798c92e..7eb88719 100644 --- a/src/app/@theme/layouts/one-column/one-column.layout.scss +++ b/src/app/@theme/layouts/one-column/one-column.layout.scss @@ -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); } } diff --git a/src/app/@theme/layouts/one-column/one-column.layout.ts b/src/app/@theme/layouts/one-column/one-column.layout.ts index b8143d05..3397032a 100644 --- a/src/app/@theme/layouts/one-column/one-column.layout.ts +++ b/src/app/@theme/layouts/one-column/one-column.layout.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; selector: 'ngx-one-column-layout', styleUrls: ['./one-column.layout.scss'], template: ` - + diff --git a/src/app/@theme/layouts/three-columns/three-columns.layout.scss b/src/app/@theme/layouts/three-columns/three-columns.layout.scss index e15f30d7..7eb88719 100644 --- a/src/app/@theme/layouts/three-columns/three-columns.layout.scss +++ b/src/app/@theme/layouts/three-columns/three-columns.layout.scss @@ -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); } } diff --git a/src/app/@theme/layouts/three-columns/three-columns.layout.ts b/src/app/@theme/layouts/three-columns/three-columns.layout.ts index 269a873b..0c7528d7 100644 --- a/src/app/@theme/layouts/three-columns/three-columns.layout.ts +++ b/src/app/@theme/layouts/three-columns/three-columns.layout.ts @@ -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: ` - + - - - - Support Us - - + @@ -36,21 +29,4 @@ import { takeWhile } from 'rxjs/operators'; `, }) -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 {} diff --git a/src/app/@theme/layouts/two-columns/two-columns.layout.scss b/src/app/@theme/layouts/two-columns/two-columns.layout.scss index e15f30d7..7eb88719 100644 --- a/src/app/@theme/layouts/two-columns/two-columns.layout.scss +++ b/src/app/@theme/layouts/two-columns/two-columns.layout.scss @@ -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); } } diff --git a/src/app/@theme/layouts/two-columns/two-columns.layout.ts b/src/app/@theme/layouts/two-columns/two-columns.layout.ts index 4fc2cf51..724feade 100644 --- a/src/app/@theme/layouts/two-columns/two-columns.layout.ts +++ b/src/app/@theme/layouts/two-columns/two-columns.layout.ts @@ -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: ` - + - - - - Support Us - - + @@ -35,21 +27,4 @@ import { takeWhile } from 'rxjs/operators'; `, }) -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 {} diff --git a/src/app/@theme/styles/_overrides.scss b/src/app/@theme/styles/_overrides.scss new file mode 100644 index 00000000..c8e1dd55 --- /dev/null +++ b/src/app/@theme/styles/_overrides.scss @@ -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; + } +} diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss index aec24514..14612c59 100644 --- a/src/app/@theme/styles/styles.scss +++ b/src/app/@theme/styles/styles.scss @@ -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; - } -} diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss index b7a97951..3a758f62 100644 --- a/src/app/@theme/styles/themes.scss +++ b/src/app/@theme/styles/themes.scss @@ -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,