From 74b71f61c967bb697ade5a614dc1b46a5c497bce Mon Sep 17 00:00:00 2001 From: ElonH Date: Tue, 2 Jun 2020 19:27:14 +0800 Subject: [PATCH] fix: adapt to mobie view --- package-lock.json | 5 +++ package.json | 1 + src/app/app.module.ts | 2 ++ .../pages/dashboard/dashboard.component.ts | 2 +- src/app/pages/dashboard/dashboard.module.ts | 2 ++ src/app/pages/pages.component.ts | 35 +++++++++++++++---- src/app/pages/pages.module.ts | 2 ++ 7 files changed, 41 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 20afb0b..d6d52b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11043,6 +11043,11 @@ "resolved": "https://registry.npmjs.org/ngx-pagination/-/ngx-pagination-5.0.0.tgz", "integrity": "sha512-Ur0pTWRe2ZXoJ8impEzo0IZKxY5aEcQfSmL5uBqW1rHI2J6nfzgZAHsSLagKHFGchXq0PkRlDVVMcIaNxYJwvQ==" }, + "ngx-responsive": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/ngx-responsive/-/ngx-responsive-9.0.3.tgz", + "integrity": "sha512-zUzlf53NegOf7fWx4KC0Onkq3BH6IQlzeolFjtQK5m6t/NoY3NlERBbPHftxRRPrHgjGLm2b/Ut11kvmpevhQw==" + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", diff --git a/package.json b/package.json index a7502ec..5050a27 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "nebular-icons": "^1.1.0", "ng2-charts": "^2.3.2", "ngx-easy-table": "^12.0.0", + "ngx-responsive": "^9.0.3", "popper.js": "^1.16.1", "rxjs": "~6.5.4", "tslib": "^1.13.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 09be75c..55af8a9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,7 @@ import { NbThemeModule, NbToastrModule, } from '@nebular/theme'; +import { ResponsiveModule } from 'ngx-responsive'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -18,6 +19,7 @@ import { AppComponent } from './app.component'; BrowserModule, AppRoutingModule, BrowserAnimationsModule, + ResponsiveModule.forRoot(), NbThemeModule.forRoot({ name: 'default' }), NbMenuModule.forRoot(), NbDialogModule.forRoot({ autoFocus: true, closeOnEsc: true }), diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index c199066..f691719 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/src/app/pages/dashboard/dashboard.component.ts @@ -8,7 +8,7 @@ import { ConnectionService } from '../connection.service'; @Component({ selector: 'app-dashboard', template: ` -
+
tutorial diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts index 9e71995..4b4f16b 100644 --- a/src/app/pages/dashboard/dashboard.module.ts +++ b/src/app/pages/dashboard/dashboard.module.ts @@ -9,6 +9,7 @@ import { NbTabsetModule, } from '@nebular/theme'; import { ChartsModule } from 'ng2-charts'; +import { ResponsiveModule } from 'ngx-responsive'; import { RngModule } from '../../components/rng.module'; import { DashboardRoutingModule } from './dashboard-routing.module'; import { DashboardComponent } from './dashboard.component'; @@ -17,6 +18,7 @@ import { DashboardComponent } from './dashboard.component'; declarations: [DashboardComponent], imports: [ CommonModule, + ResponsiveModule, DashboardRoutingModule, NbCardModule, NbButtonModule, diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 5193dda..91bc0c8 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,20 +1,27 @@ import { Component, OnInit } from '@angular/core'; import { NbMenuItem, NbSidebarService } from '@nebular/theme'; +import { ResponsiveSizeInfoRx } from 'ngx-responsive'; import { CurrentUserService } from './current-user.service'; import { MENU_ITEMS } from './pages-menu'; @Component({ selector: 'app-rng-pages', template: ` - + - + - + + + @@ -30,16 +37,30 @@ import { MENU_ITEMS } from './pages-menu'; ], }) export class PagesComponent implements OnInit { - menu = MENU_ITEMS; constructor( private sidebarService: NbSidebarService, - private currUserService: CurrentUserService - ) {} + private currUserService: CurrentUserService, + private resp: ResponsiveSizeInfoRx + ) { + resp.connect(); + } + menu = MENU_ITEMS; + + respSize = 'lg'; + mainSideBarFixed = false; toggleNav() { - this.sidebarService.toggle(true, 'nav'); + this.sidebarService.toggle(false, 'nav'); } + ngOnInit(): void { + this.resp.getResponsiveSize.subscribe(data => { + this.respSize = data; + + this.mainSideBarFixed = data === 'xs' || data === 'sm' || data === 'md'; + if (!this.mainSideBarFixed) this.sidebarService.expand('nav'); + else this.sidebarService.collapse('nav'); + }); this.currUserService.currentUserFlow$.getSupersetOutput().subscribe(node => { if (node[1].length !== 0) return; const userGroup = this.menu[0]; diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 35ad9a5..003f9fe 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -3,6 +3,7 @@ import { NgModule } from '@angular/core'; import { NbEvaIconsModule } from '@nebular/eva-icons'; import { NbActionsModule, NbLayoutModule, NbMenuModule, NbSidebarModule } from '@nebular/theme'; +import { ResponsiveModule } from 'ngx-responsive'; import { PagesRoutingModule } from './pages-routing.module'; import { PagesComponent } from './pages.component'; @@ -10,6 +11,7 @@ import { PagesComponent } from './pages.component'; declarations: [PagesComponent], imports: [ CommonModule, + ResponsiveModule, PagesRoutingModule, NbLayoutModule, NbActionsModule,