diff --git a/docs/app/@core/data/service/header-menu.service.ts b/docs/app/@core/data/service/header-menu.service.ts index 9b7c9121..892f72e4 100644 --- a/docs/app/@core/data/service/header-menu.service.ts +++ b/docs/app/@core/data/service/header-menu.service.ts @@ -15,6 +15,10 @@ export class HeaderMenuService { title: 'Docs', link: '/docs', }, + { + title: 'Demo', + url: 'https://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section', + }, ]; getHeaderMenu(): Observable { diff --git a/docs/app/@theme/components/header/header.component.scss b/docs/app/@theme/components/header/header.component.scss index 4ec75790..e9cad406 100644 --- a/docs/app/@theme/components/header/header.component.scss +++ b/docs/app/@theme/components/header/header.component.scss @@ -16,6 +16,8 @@ $menu-item-fg-active: nb-theme(header-menu-fg-active); $contacts-fg: nb-theme(color-fg-heading-light); $contacts-active-fg: nb-theme(header-menu-fg-active); + $menu-sm-padding: 0.675rem 0.375rem; + $menu-md-padding: 0.675rem 1.375rem; display: flex; flex: 1 0 auto; @@ -39,6 +41,7 @@ &.middle { flex: 1; + justify-content: flex-end; } } @@ -65,6 +68,7 @@ display: none; align-items: center; padding-right: 2rem; + margin-left: auto; i { margin-right: 0.5rem; @@ -75,14 +79,12 @@ .menu-items { display: flex; - justify-content: flex-start; .menu-item { border: none; - width: 5.375rem; a { - padding: 0.675rem 1.375rem; + padding: $menu-sm-padding; color: $menu-item-fg; display: block; @@ -110,10 +112,19 @@ } } + ::ng-deep ngx-material-theme-link a.material-theme-link { + padding: $menu-sm-padding; + } + @include media-breakpoint-up(is) { - .section { + .section.left, + .section.right { padding: 0.875rem 0; } + + .section.middle { + justify-content: flex-start; + } } @include media-breakpoint-up(sm) { @@ -130,8 +141,12 @@ display: inline; } } - .backend-bundles { - display: flex; + + ::ng-deep { + nb-menu .menu-items .menu-item a, + ngx-material-theme-link a.material-theme-link { + padding: $menu-md-padding; + } } } @@ -149,6 +164,10 @@ ::ng-deep nb-menu .menu-items li:nth-child(2) { display: list-item; } + + .backend-bundles { + display: flex; + } } @include media-breakpoint-up(lg) { @@ -248,13 +267,21 @@ flex-basis: auto; } + ::ng-deep ngx-material-theme-link { + display: none; + } + @include media-breakpoint-up(is) { - ::ng-deep nb-menu .menu-items li:first-child { - display: list-item; + ::ng-deep ngx-material-theme-link { + display: flex; } } @include media-breakpoint-up(sm) { + ::ng-deep nb-menu .menu-items li:first-child { + display: list-item; + } + .section.middle { justify-content: space-between; } @@ -264,9 +291,6 @@ height: 1.25rem; margin-left: auto; } - .backend-bundles { - display: flex; - } } @include media-breakpoint-up(lg) { diff --git a/docs/app/@theme/components/header/header.component.ts b/docs/app/@theme/components/header/header.component.ts index f5e09d2f..0099d6bb 100644 --- a/docs/app/@theme/components/header/header.component.ts +++ b/docs/app/@theme/components/header/header.component.ts @@ -4,11 +4,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, HostBinding, Input, OnDestroy } from '@angular/core'; -import { takeWhile } from 'rxjs/operators'; +import { OnInit, Component, HostBinding, Input, OnDestroy } from '@angular/core'; +import { Subject } from 'rxjs'; +import { takeUntil } from 'rxjs/operators'; import { NbSidebarService } from '@nebular/theme'; -/*import { NgxAnalytics } from '../../services/analytics.service';*/ import { NgxVersionService } from '../../services/version.service'; import { HeaderMenuService } from '../../../@core/data/service/header-menu.service'; @@ -17,9 +17,9 @@ import { HeaderMenuService } from '../../../@core/data/service/header-menu.servi styleUrls: ['./header.component.scss'], templateUrl: './header.component.html', }) -export class NgxLandingHeaderComponent implements OnDestroy { +export class NgxLandingHeaderComponent implements OnInit, OnDestroy { - private alive = true; + private destroy$ = new Subject(); @HostBinding('class.docs-page') @Input() isDocs = false; @@ -28,25 +28,25 @@ export class NgxLandingHeaderComponent implements OnDestroy { currentVersion: string; headerMenu = []; - constructor(/*private analytics: NgxAnalytics,*/ - private sidebarService: NbSidebarService, + constructor(private sidebarService: NbSidebarService, private versionService: NgxVersionService, private headerMenuService: HeaderMenuService) { + } + + ngOnInit() { this.currentVersion = this.versionService.getNgxVersion(); this.headerMenuService.getHeaderMenu() - .pipe(takeWhile(() => this.alive )) + .pipe(takeUntil(this.destroy$)) .subscribe((headerMenu) => this.headerMenu = headerMenu); } - trackEmailClick() { - } - toggleSidebar() { this.sidebarService.toggle(false, this.sidebarTag); } ngOnDestroy() { - this.alive = false; + this.destroy$.next(); + this.destroy$.complete(); } } diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.html b/docs/app/pages/home/main-info-section/main-info-section.component.html index a5b7a206..1699315d 100644 --- a/docs/app/pages/home/main-info-section/main-info-section.component.html +++ b/docs/app/pages/home/main-info-section/main-info-section.component.html @@ -30,22 +30,21 @@
- - Installation Docs - Demo +
- - + + ngx-admin Premium +
diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.scss b/docs/app/pages/home/main-info-section/main-info-section.component.scss index e81c17a9..8c0798cb 100644 --- a/docs/app/pages/home/main-info-section/main-info-section.component.scss +++ b/docs/app/pages/home/main-info-section/main-info-section.component.scss @@ -110,6 +110,8 @@ } .buttons { + display: flex; + flex-direction: column; margin-top: 1.875rem; } @@ -133,9 +135,7 @@ cursor: pointer; text-transform: uppercase; - &.btn-demo, - &.btn-download, - &.btn-download-premium { + &.btn-green { color: #ffffff; background-color: nb-theme(color-active-fg); box-shadow: nb-theme(shadow-btn); @@ -157,13 +157,12 @@ box-shadow: nb-theme(shadow-active-btn); } - &.btn-demo { + &.btn-download { margin-left: 1em; } } - .btn-download, - .btn-download-premium { + .btn-premium { margin-top: 1rem; width: 100%; } @@ -284,19 +283,6 @@ .buttons { padding-right: 1rem; padding-left: 1rem; - - a { - display: block; - margin: 0; - - &.btn-demo { - margin-top: 1rem; - } - } - } - - .buttons-links { - display: block; } } } diff --git a/docs/app/shared/components/material-theme-link/material-theme-link.component.html b/docs/app/shared/components/material-theme-link/material-theme-link.component.html index b69caa37..3682f0ac 100644 --- a/docs/app/shared/components/material-theme-link/material-theme-link.component.html +++ b/docs/app/shared/components/material-theme-link/material-theme-link.component.html @@ -1,15 +1,16 @@
- - Material Theme - + + Material Theme +
diff --git a/docs/app/shared/components/material-theme-link/material-theme-link.component.ts b/docs/app/shared/components/material-theme-link/material-theme-link.component.ts index fd530449..a73339ab 100644 --- a/docs/app/shared/components/material-theme-link/material-theme-link.component.ts +++ b/docs/app/shared/components/material-theme-link/material-theme-link.component.ts @@ -4,29 +4,71 @@ * Licensed under the MIT License. See License.txt in the project root for license information. */ -import { Component, ViewChild, AfterViewInit, Input } from '@angular/core'; +import { Component, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; -import { NbPopoverDirective } from '@nebular/theme'; +import { Subject, merge } from 'rxjs'; +import { map, take, takeUntil } from 'rxjs/operators'; +import { NbMediaBreakpointsService, NbMediaBreakpoint, NbPopoverDirective, NbThemeService } from '@nebular/theme'; @Component({ selector: 'ngx-material-theme-link', templateUrl: './material-theme-link.component.html', styleUrls: ['./material-theme-link.component.scss'], }) -export class MaterialThemeLinkComponent implements AfterViewInit { - public showPopover: boolean = false; +export class MaterialThemeLinkComponent implements AfterViewInit, OnDestroy { - @Input() public set withPopover(value: any) { + private destroy$ = new Subject(); + private hidePopover$ = new Subject(); + + showPopover: boolean = false; + + @Input() + set withPopover(value: any) { this.showPopover = coerceBooleanProperty(value); } - @ViewChild(NbPopoverDirective, { static: true }) public popover: NbPopoverDirective; + @ViewChild(NbPopoverDirective) popover: NbPopoverDirective; - public ngAfterViewInit(): void { - this.showPopover && this.popover && this.popover.show(); + constructor( + private breakpointService: NbMediaBreakpointsService, + private themeService: NbThemeService, + ) {} + + ngAfterViewInit(): void { + if (!this.showPopover) { + return; + } + + this.themeService.onMediaQueryChange() + .pipe( + map(([, currentBreakpoint]: NbMediaBreakpoint[]) => this.shouldShowPopover(currentBreakpoint)), + takeUntil(merge(this.destroy$, this.hidePopover$)), + ) + .subscribe((showPopover: boolean) => { + if (showPopover) { + this.popover.show(); + } else { + this.popover.hide(); + } + }); + + this.hidePopover$ + .pipe( + take(1), + takeUntil(this.destroy$), + ) + .subscribe(() => this.popover.hide()); } - public hidePopover(): void { - this.popover && this.popover.hide(); + ngOnDestroy() { + this.destroy$.next(); + } + + hidePopover(): void { + this.hidePopover$.next(); + } + + private shouldShowPopover(breakpoint: NbMediaBreakpoint): boolean { + return breakpoint.width >= this.breakpointService.getByName('is').width; } }