diff --git a/docs/app/pages/home/landing-home-routing.module.ts b/docs/app/pages/home/landing-home-routing.module.ts index 5a0693d0..7d1c5330 100644 --- a/docs/app/pages/home/landing-home-routing.module.ts +++ b/docs/app/pages/home/landing-home-routing.module.ts @@ -19,6 +19,10 @@ export const routes: Routes = [ path: 'material', component: MaterialLandingComponent, }, + // { + // path: 'overview', + // component: OverviewComponent, + // }, ]; @NgModule({ diff --git a/docs/app/pages/home/landing-home.module.ts b/docs/app/pages/home/landing-home.module.ts index 7a4d6235..3596496d 100644 --- a/docs/app/pages/home/landing-home.module.ts +++ b/docs/app/pages/home/landing-home.module.ts @@ -28,6 +28,9 @@ import { LicensePipe } from './backend-bundles-section/license.pipe'; import { BackgroundImagePipe } from './backend-bundles-section/background-image.pipe'; import { MaterialLandingComponent } from './material-landing/material-landing.component'; import { LandingSharedModule } from '../../shared/landing-shared.module'; +import {MaterialFeaturesSectionComponent} from './material-features/material-features.component'; +import {DefaultAdminInfoComponent} from './main-info-section/default-admin-main-info/default-info.component'; +import {MaterialAdminInfoComponent} from './main-info-section/material-admin-main-info/material-info.component'; // components const PIPES = [LicensePipe, BackgroundImagePipe]; @@ -37,6 +40,8 @@ const COMPONENTS = [ MaterialLandingComponent, NgxLandingSectionsContainerComponent, MainInfoSectionComponent, + DefaultAdminInfoComponent, + MaterialAdminInfoComponent, DescriptionSectionComponent, ReasonSectionComponent, ThemeSectionComponent, @@ -45,6 +50,7 @@ const COMPONENTS = [ SocialSectionComponent, ContactSectionComponent, BackendBundlesSectionComponent, + MaterialFeaturesSectionComponent, ]; @NgModule({ diff --git a/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html b/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html new file mode 100644 index 00000000..b7862d49 --- /dev/null +++ b/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html @@ -0,0 +1,16 @@ +
+

ngx-admin

+

+ The most popular admin dashboard based on Angular 8+, Bootstrap 4+ and + Nebular with + Eva Design System support. + Free and Open Source for personal and commercial purposes. +
+ + Never start from scratch again. + + Integrate ready-made solution: ngx-admin with backend. + + +

+
diff --git a/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.ts b/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.ts new file mode 100644 index 00000000..4842c1fe --- /dev/null +++ b/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-default-admin-info', + templateUrl: './default-info.component.html', + styleUrls: ['./../main-info-section.component.scss'], +}) +export class DefaultAdminInfoComponent { +} 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 ee1a36d4..a5cd5c9c 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 @@ -9,20 +9,28 @@
-

ngx-admin

-

- The most popular admin dashboard based on Angular 8+, Bootstrap 4+ and - Nebular with - Eva Design System support. - Free and Open Source for personal and commercial purposes. -
- - Never start from scratch again. - - Integrate ready-made solution: ngx-admin with backend. - - -

+ + + + + + + + + + + + + + + + + + + + + +
Light theme Dashboard
@@ -42,3 +50,4 @@ target="_blank">Demo
+ 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 64aa8430..04d43216 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 @@ -70,6 +70,11 @@ margin: 4.625rem 9% 0 6%; } + ngx-default-admin-info, + ngx-material-admin-info { + padding: 0; + } + h1 { font-family: 'Helvetica Neue Bold', sans-serif; font-size: 4rem; diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.ts b/docs/app/pages/home/main-info-section/main-info-section.component.ts index fc491df2..57f325f6 100644 --- a/docs/app/pages/home/main-info-section/main-info-section.component.ts +++ b/docs/app/pages/home/main-info-section/main-info-section.component.ts @@ -30,7 +30,7 @@ export class MainInfoSectionComponent implements OnDestroy { public breakpoint: NbMediaBreakpoint; @Input() public set material(value: any) { - this.forMaterialTheme = coerceBooleanProperty(value); + this.forMaterialTheme = (value); } public get imageUrl(): string { diff --git a/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.html b/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.html new file mode 100644 index 00000000..42fb10f4 --- /dev/null +++ b/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.html @@ -0,0 +1,18 @@ +
+

material ngx-admin

+

+ Material admin theme based on the most popular Angular dashboard template - ngx-admin. + Included: Angular 9+, + Nebular and + Eva Design System. + Free for personal and commercial usage. +
+ + Get material ngx-admin integrated with backend technology of your choice. + + Check out our store. + + +

+
diff --git a/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts b/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts new file mode 100644 index 00000000..08ad5fdc --- /dev/null +++ b/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'ngx-material-admin-info', + templateUrl: './material-info.component.html', + styleUrls: ['./../main-info-section.component.scss'], +}) +export class MaterialAdminInfoComponent { +} diff --git a/docs/app/pages/home/material-features/material-features.component.html b/docs/app/pages/home/material-features/material-features.component.html new file mode 100644 index 00000000..c9f9acce --- /dev/null +++ b/docs/app/pages/home/material-features/material-features.component.html @@ -0,0 +1,31 @@ + + Features and benefits + + + + diff --git a/docs/app/pages/home/material-features/material-features.component.scss b/docs/app/pages/home/material-features/material-features.component.scss new file mode 100644 index 00000000..05d0f1cc --- /dev/null +++ b/docs/app/pages/home/material-features/material-features.component.scss @@ -0,0 +1,104 @@ +@import '../../../@theme/styles/themes'; +@import '~@nebular/theme/styles/global/breakpoints'; + +@include nb-install-component() { + $features-section-offset: 10.625rem; + + display: block; + padding: 5.25rem 0; + + .features { + width: calc(100% - #{$features-section-offset} * 2); + margin: -1.375rem auto 0; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + padding: 0; + + .feature { + display: flex; + width: 50%; + list-style: none; + padding-right: 3.75rem; + padding-left: 0.25rem; + margin-top: 7.875rem; + + &:nth-child(2n) { + padding-right: 0; + padding-left: 3.75rem; + } + } + + .number { + font-family: 'Helvetica Neue Bold', sans-serif; + font-size: 8.75rem; + color: #ffffff; + text-shadow: 0 0.5rem 1rem #dae0eb; + line-height: 0.3; + } + + .description { + &::before { + content: ''; + display: block; + height: 0.25rem; + width: 3.5rem; + margin-bottom: 0.375rem; + background-color: nb-theme(color-active-bg); + } + + font-family: nb-theme(font-secondary), sans-serif; + font-size: nb-theme(font-size-lg); + line-height: 1.5; + margin-left: 1.75rem; + } + + .highlight { + font-family: nb-theme(font-main), sans-serif; + } + + .active { + text-decoration: none; + font-family: nb-theme(font-main), sans-serif; + color: nb-theme(color-active-fg); + + } + } + + @include media-breakpoint-down(xl) { + .features { + width: 100%; + padding: 0 1rem; + margin: 0; + + .number { + font-size: 6rem; + } + } + } + + @include media-breakpoint-down(sm) { + padding-top: 2.625rem; + padding-bottom: 0; + + .features { + flex-direction: column; + + .feature { + width: 100%; + margin: 1.625rem 0 0.375rem; + padding: 0; + + &:nth-child(2n) { + padding: 0; + + } + } + + .number { + font-size: 5rem; + line-height: 1.3; + } + } + } +} diff --git a/docs/app/pages/home/material-features/material-features.component.ts b/docs/app/pages/home/material-features/material-features.component.ts new file mode 100644 index 00000000..259c042d --- /dev/null +++ b/docs/app/pages/home/material-features/material-features.component.ts @@ -0,0 +1,13 @@ +import {Component} from '@angular/core'; + +@Component({ + selector: 'ngx-material-features', + templateUrl: './material-features.component.html', + styleUrls: ['./material-features.component.scss'], +}) +export class MaterialFeaturesSectionComponent { + constructor() { + + } + +} diff --git a/docs/app/pages/home/material-landing/material-landing.component.html b/docs/app/pages/home/material-landing/material-landing.component.html index 4a3ad435..c79fa05a 100644 --- a/docs/app/pages/home/material-landing/material-landing.component.html +++ b/docs/app/pages/home/material-landing/material-landing.component.html @@ -3,8 +3,9 @@ - + + diff --git a/docs/app/pages/home/material-landing/material-landing.component.scss b/docs/app/pages/home/material-landing/material-landing.component.scss index 023c729b..f5f2cbbb 100644 --- a/docs/app/pages/home/material-landing/material-landing.component.scss +++ b/docs/app/pages/home/material-landing/material-landing.component.scss @@ -1,6 +1,9 @@ @import '../../../@theme/styles/themes'; @include nb-install-component() { + + $content-width: nb-theme(content-width); + ::ng-deep { .version { color: nb-theme(color-basic-500) !important; @@ -12,4 +15,20 @@ } } } -} \ No newline at end of file + + .main-section { + background-color: nb-theme(gray-section-bg); + } + + ngx-material-features { + max-width: $content-width; + margin: 0 auto; + } + + @include media-breakpoint-down(is) { + ngx-material-features { + max-width: 100%; + } + + } +} diff --git a/docs/app/pages/home/material-landing/material-landing.component.ts b/docs/app/pages/home/material-landing/material-landing.component.ts index 2bd15e1e..fc0980bf 100644 --- a/docs/app/pages/home/material-landing/material-landing.component.ts +++ b/docs/app/pages/home/material-landing/material-landing.component.ts @@ -6,11 +6,11 @@ import { NbThemeService } from '@nebular/theme'; templateUrl: './material-landing.component.html', styleUrls: [ './material-landing.component.scss', - '../landing-home.component.scss' - ] + '../landing-home.component.scss', + ], }) export class MaterialLandingComponent { constructor(private themeService: NbThemeService) { this.themeService.changeTheme('ngx-landing-material'); } -} \ No newline at end of file +}