diff --git a/README.md b/README.md index ca4c8f7..0aa1c40 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,9 @@ The idea here is to provide ready to use Angular templates with typical [Materia ### Option 1: Copy layout code to an existing Angular app -#### Step 1: Add MDC-Web +#### Step 1: Add MDC-Web (optional) + +This step is optional. You only need to do it if target layout uses any MDC-Web component. See layout description for a list of used components. 1. Run `yarn add material-components-web` or `npm install material-components-web`. The package includes all MDC components/APIs. Don't worry, only necessary parts will be bundled into your application. @@ -46,11 +48,12 @@ only necessary parts will be bundled into your application. 1. Clone the repo, or download the latest version from [Releases](https://github.com/kekscs/angular-material-layout-kit/releases). 2. Copy the necessary layout component files to your app. Layouts can be found in [/src/app/layouts](https://github.com/kekscs/angular-material-layout-kit/tree/master/src/app/layouts) folder. -3. Import layout into your _src/app/app-routing.module.ts_ file: +3. Add layout component to target module declarations. Usually you need to import layout component into your `app.module.ts` and add it to `declarations` array. +4. Use layout in you routing. Usually you need to import layout into your `src/app/app-routing.module.ts` file: ```ts import { Layout101Component } from './layouts/layout101/layout101.component' ``` -4. Configure layout for a route like this: +5. Set the layout for a route like this: ```ts { path: 'home', @@ -60,6 +63,7 @@ import { Layout101Component } from './layouts/layout101/layout101.component' ] } ``` +6. Don't forget to import modules of Angular Material components, used in the layout. ### Option 2: Use **angular-material-layout-kit** as a starter template diff --git a/package.json b/package.json index 24d622c..278981a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-material-layout-kit", - "version": "0.1.0-alpha.1", + "version": "0.1.0-alpha.2", "scripts": { "ng": "ng", "start": "ng serve", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 047d6e3..08efd4a 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,11 +4,13 @@ import { RouterModule, Routes } from '@angular/router'; // Layouts import { AppLayoutComponent } from './layouts/app-layout/app-layout.component'; import { Layout101Component } from './layouts/layout101/layout101.component'; +import { Layout202Component } from "./layouts/layout202/layout202.component"; import { Layout203Component } from './layouts/layout203/layout203.component'; // Pages import { HomePage } from './pages/home/home.page'; import { Layout101Page } from './pages/layout101/layout101.page'; +import { Layout202Page } from "./pages/layout202/layout202.page"; import { Layout203Page } from './pages/layout203/layout203.page'; @@ -28,6 +30,13 @@ const routes: Routes = [ { path: '', component: Layout101Page } ] }, + { + path: 'layout202', + component: Layout202Component, + children: [ + { path: '', component: Layout202Page } + ] + }, { path: 'layout203', component: Layout203Component, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 9455643..dd21c8b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { HomePage } from './pages/home/home.page'; import { DummyPageContentComponent } from './components/dummy-page-content/dummy-page-content.component'; import { Layout101Page } from './pages/layout101/layout101.page'; import { Layout203Page } from './pages/layout203/layout203.page'; +import { Layout202Page } from './pages/layout202/layout202.page'; @NgModule({ @@ -24,6 +25,7 @@ import { Layout203Page } from './pages/layout203/layout203.page'; DummyPageContentComponent, Layout101Page, Layout203Page, + Layout202Page, ], imports: [ BrowserModule, diff --git a/src/app/layouts/app-layout/app-layout.component.ts b/src/app/layouts/app-layout/app-layout.component.ts index 0111797..8766a49 100644 --- a/src/app/layouts/app-layout/app-layout.component.ts +++ b/src/app/layouts/app-layout/app-layout.component.ts @@ -12,7 +12,6 @@ const GITHUB_ICON = ` @Component({ - selector: 'app-layout', templateUrl: './app-layout.component.html', styleUrls: ['./app-layout.component.scss'] }) diff --git a/src/app/layouts/layout101/layout101.component.ts b/src/app/layouts/layout101/layout101.component.ts index 082537b..284f362 100644 --- a/src/app/layouts/layout101/layout101.component.ts +++ b/src/app/layouts/layout101/layout101.component.ts @@ -3,7 +3,6 @@ import { MDCTopAppBar } from '@material/top-app-bar'; @Component({ - selector: 'app-layout101', templateUrl: './layout101.component.html', styleUrls: ['./layout101.component.scss'] }) diff --git a/src/app/layouts/layout202/layout202.component.html b/src/app/layouts/layout202/layout202.component.html new file mode 100644 index 0000000..d7a3309 --- /dev/null +++ b/src/app/layouts/layout202/layout202.component.html @@ -0,0 +1,49 @@ + + +
+
+
+
+
+
+ + + +
+ + + +
+
+
+
+ + + + + + My Application + + + + + home + Home + + + + + + diff --git a/src/app/layouts/layout202/layout202.component.scss b/src/app/layouts/layout202/layout202.component.scss new file mode 100644 index 0000000..d69ad9c --- /dev/null +++ b/src/app/layouts/layout202/layout202.component.scss @@ -0,0 +1,42 @@ +.layout-container { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + //background: #eee; +} + +.toolbar-spacer { + flex: 1 1 auto; +} + +.sidenav-content-container { + width: 256px; // Size is taken from Navigation drawer specs - https://material.io/components/navigation-drawer#specs + padding: 32px 16px; + box-sizing: border-box; // Fix. https://stackoverflow.com/a/67907083/8468354 + + ::ng-deep .mat-divider-horizontal { + position: relative ; + left: -16px; + width: calc(100% + 32px); + margin-bottom: 24px; + } +} + +.sidenav-container--modal-drawer { + z-index: unset; + + ::ng-deep .mat-drawer-backdrop { + z-index: 5; + } + + ::ng-deep .mat-sidenav-fixed { + z-index: 6; + } +} + +.sidenav-item { + display: block; + margin-bottom: 24px; +} diff --git a/src/app/layouts/layout202/layout202.component.ts b/src/app/layouts/layout202/layout202.component.ts new file mode 100644 index 0000000..a03461c --- /dev/null +++ b/src/app/layouts/layout202/layout202.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core'; +import { MediaMatcher } from '@angular/cdk/layout'; + + +@Component({ + templateUrl: './layout202.component.html', + styleUrls: ['./layout202.component.scss'] +}) +export class Layout202Component implements OnInit, OnDestroy { + + mobileQuery: MediaQueryList; + private _mobileQueryListener: () => void; + + fillerNav = Array.from({length: 3}, (_, i) => `Nav Item ${i + 1}`); + + constructor( + changeDetectorRef: ChangeDetectorRef, + media: MediaMatcher + ) { + this.mobileQuery = media.matchMedia('(max-width: 840px)'); + this._mobileQueryListener = () => changeDetectorRef.detectChanges(); + this.mobileQuery.addListener(this._mobileQueryListener); + } + + ngOnInit(): void { + } + + ngOnDestroy() { + this.mobileQuery.removeListener(this._mobileQueryListener); + } +} diff --git a/src/app/layouts/layout203/layout203.component.scss b/src/app/layouts/layout203/layout203.component.scss index bcdff96..bf04004 100644 --- a/src/app/layouts/layout203/layout203.component.scss +++ b/src/app/layouts/layout203/layout203.component.scss @@ -23,6 +23,7 @@ .sidenav-content-container { width: 256px; // Size is taken from Navigation drawer specs - https://material.io/components/navigation-drawer#specs padding: 32px 16px; + box-sizing: border-box; // Fix. https://stackoverflow.com/a/67907083/8468354 ::ng-deep .mat-divider-horizontal { position: relative ; diff --git a/src/app/layouts/layout203/layout203.component.ts b/src/app/layouts/layout203/layout203.component.ts index 2ac63fa..8e57678 100644 --- a/src/app/layouts/layout203/layout203.component.ts +++ b/src/app/layouts/layout203/layout203.component.ts @@ -4,7 +4,6 @@ import { MediaMatcher } from '@angular/cdk/layout'; import { MatSidenavContent } from '@angular/material/sidenav'; @Component({ - selector: 'app-layout203', templateUrl: './layout203.component.html', styleUrls: ['./layout203.component.scss'] }) diff --git a/src/app/layouts/layouts.module.ts b/src/app/layouts/layouts.module.ts index 311a5c7..6831b1d 100644 --- a/src/app/layouts/layouts.module.ts +++ b/src/app/layouts/layouts.module.ts @@ -7,18 +7,20 @@ import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; import { MatSidenavModule } from '@angular/material/sidenav'; import { MatDividerModule } from '@angular/material/divider'; +import { MatToolbarModule } from '@angular/material/toolbar'; // *** Layouts *** import { AppLayoutComponent } from './app-layout/app-layout.component'; import { Layout101Component } from './layout101/layout101.component'; +import { Layout202Component } from './layout202/layout202.component'; import { Layout203Component } from './layout203/layout203.component'; - @NgModule({ declarations: [ AppLayoutComponent, Layout101Component, + Layout202Component, Layout203Component ], imports: [ @@ -28,7 +30,8 @@ import { Layout203Component } from './layout203/layout203.component'; MatIconModule, MatMenuModule, MatSidenavModule, - MatDividerModule + MatDividerModule, + MatToolbarModule ] }) export class LayoutsModule { } diff --git a/src/app/pages/home/home.page.html b/src/app/pages/home/home.page.html index 8e3d7db..4afbaba 100644 --- a/src/app/pages/home/home.page.html +++ b/src/app/pages/home/home.page.html @@ -8,6 +8,14 @@ +
+ + + Layout #202 + + +
+
diff --git a/src/app/pages/layout202/layout202.page.html b/src/app/pages/layout202/layout202.page.html new file mode 100644 index 0000000..b31169f --- /dev/null +++ b/src/app/pages/layout202/layout202.page.html @@ -0,0 +1,43 @@ +
+ +
+ + +

Layout #202

+
+
    +
  • + Key Components:  Toolbar, + Sidenav. This version of layout #202 doesn't + use MDC Web's @material/top-app-bar. + Therefore scrolling downward doesn't reveal the top app bar. I plan to create another version of this layout + using @material/top-app-bar. +
    • +
  • + Behavior: In desktop mode, drawer (or sidenav) is always visible. Top app bar gets scrolled together with content.
    + + In tablet/phone modes, drawer is hidden to maximize space available for content. It can be revealed by clicking the menu icon in top app bar. +
      +
    • Properly handled scrolling of main content when modal drawer is opened. In tablet/phone modes, when modal drawer is opened, + main content behind doesn't scroll.
      • +
    +
    • +
+
+ + +
+ desktop_windows + tablet_android + smartphone +
+
+ Check it out on desktop, tablet and phone. +
+ + +
+ + + +
diff --git a/src/app/pages/layout202/layout202.page.scss b/src/app/pages/layout202/layout202.page.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/layout202/layout202.page.ts b/src/app/pages/layout202/layout202.page.ts new file mode 100644 index 0000000..6356942 --- /dev/null +++ b/src/app/pages/layout202/layout202.page.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + templateUrl: './layout202.page.html', + styleUrls: ['./layout202.page.scss'] +}) +export class Layout202Page implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/layout203/layout203.page.html b/src/app/pages/layout203/layout203.page.html index cccf7bb..be7f036 100644 --- a/src/app/pages/layout203/layout203.page.html +++ b/src/app/pages/layout203/layout203.page.html @@ -8,7 +8,7 @@

Layout #203

diff --git a/src/styles/themes/default/material-angular/_theme.scss b/src/styles/themes/default/material-angular/_theme.scss index 147cbca..8e9b030 100644 --- a/src/styles/themes/default/material-angular/_theme.scss +++ b/src/styles/themes/default/material-angular/_theme.scss @@ -69,8 +69,3 @@ } } - - - - -