diff --git a/docs/app/@theme/styles/_hs-forms.scss b/docs/app/@theme/styles/_hs-forms.scss new file mode 100644 index 00000000..b02931e4 --- /dev/null +++ b/docs/app/@theme/styles/_hs-forms.scss @@ -0,0 +1,105 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@mixin hs-custom-form() { + .hs-custom-form { + .modal-header { + display: none; + } + + .modal-body { + padding-bottom: 0; + } + + .actions { + display: flex; + justify-content: flex-end; + } + + input.hs-input { + width: 100%; + color: nb-theme(input-basic-text-color); + font-size: nb-theme(input-medium-text-font-size); + font-weight: nb-theme(input-medium-text-font-weight); + line-height: nb-theme(input-medium-text-line-height); + padding: nb-theme(input-medium-padding) !important; + border: nb-theme(input-border-width) nb-theme(input-border-style) nb-theme(input-basic-border-color); + border-radius: nb-theme(input-rectangle-border-radius); + background-color: nb-theme(input-basic-background-color); + + &.hover { + background-color: nb-theme(input-basic-hover-background-color); + border-color: nb-theme(input-basic-hover-border-color); + } + + &.invalid { + box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6); + } + + &::placeholder { + color: nb-theme(input-basic-placeholder-text-color); + font-size: nb-theme(input-medium-placeholder-text-font-size); + font-weight: nb-theme(input-medium-placeholder-text-font-weight); + line-height: nb-theme(input-medium-placeholder-text-line-height); + } + + &:focus { + outline: none; + background-color: nb-theme(input-basic-focus-background-color); + border-color: nb-theme(input-basic-focus-border-color); + } + } + + .hs-richtext .modal-body { + padding: 0; + margin-bottom: 1rem; + + p { + margin-bottom: 0; + text-align: left !important; + height: auto; + } + } + + .hs-recaptcha { + margin-top: 1rem; + } + + .hs-error-msgs { + list-style-type: none; + padding: 0; + } + + .hs-form-required, .hs-error-msg { + margin-top: 0.5rem; + color: nb-theme(text-danger-color); + } + + .hs_error_rollup { + display: none; + } + + .hs-submit-btn { + font-family: nb-theme(font-main); + border-radius: 3px; + border: none; + background-color: nb-theme(color-active-fg); + color: #ffffff; + padding: 1rem 2rem; + box-shadow: nb-theme(shadow-btn); + cursor: pointer; + text-transform: uppercase; + + &:hover { + box-shadow: nb-theme(shadow-hover-green-btn); + } + + &:active { + box-shadow: nb-theme(shadow-active-green-btn); + } + } + } +} diff --git a/docs/app/@theme/styles/styles.scss b/docs/app/@theme/styles/styles.scss index f81dc20f..35f5b850 100644 --- a/docs/app/@theme/styles/styles.scss +++ b/docs/app/@theme/styles/styles.scss @@ -10,7 +10,10 @@ @import '~@nebular/theme/styles/globals'; @import '~@nebular/bootstrap/styles/globals'; +@import 'hs-forms'; + @include nb-install() { @include nb-theme-global(); @include nb-bootstrap-global(); + @include hs-custom-form(); }; 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 index a69e1d6a..9364858d 100644 --- 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 @@ -2,8 +2,8 @@

ngx-admin

The most popular admin dashboard based on Angular 9+ and - Nebular with - Eva Design System support. + Nebular with + Eva Design System support. Free and Open Source for personal and commercial purposes.
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 426e0573..a5b7a206 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 @@ -35,12 +35,17 @@ Installation Docs 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 b428337a..e81c17a9 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 @@ -11,7 +11,7 @@ $color-active: nb-theme(color-active-fg); display: flex; - padding: 3.375rem 0 0; + padding: 3.375rem 0; max-width: 120rem; margin: 0 auto; @@ -133,8 +133,9 @@ cursor: pointer; text-transform: uppercase; - &.btn-demo { - margin-left: 1em; + &.btn-demo, + &.btn-download, + &.btn-download-premium { color: #ffffff; background-color: nb-theme(color-active-fg); box-shadow: nb-theme(shadow-btn); @@ -155,6 +156,16 @@ &:active { box-shadow: nb-theme(shadow-active-btn); } + + &.btn-demo { + margin-left: 1em; + } + } + + .btn-download, + .btn-download-premium { + margin-top: 1rem; + width: 100%; } @include media-breakpoint-down(xxl) { 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 b2e611e6..9066f8b9 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 @@ -5,9 +5,12 @@ */ import { Component, OnDestroy, Input } from '@angular/core'; -import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme'; +import { NbDialogService, NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme'; import { takeWhile } from 'rxjs/operators'; +import { DownloadFormComponent } from '../../../shared/components/download-form/download-form.component'; +import { PremiumFormComponent } from '../../../shared/components/premium-form/premium-form.component'; + @Component({ selector: 'ngx-landing-main-info', templateUrl: './main-info-section.component.html', @@ -15,7 +18,8 @@ import { takeWhile } from 'rxjs/operators'; }) export class MainInfoSectionComponent implements OnDestroy { constructor(themeService: NbThemeService, - breakpointService: NbMediaBreakpointsService) { + breakpointService: NbMediaBreakpointsService, + private dialogService: NbDialogService) { this.breakpoints = breakpointService.getBreakpointsMap(); themeService.onMediaQueryChange() .pipe(takeWhile(() => this.alive)) @@ -42,4 +46,12 @@ export class MainInfoSectionComponent implements OnDestroy { public ngOnDestroy() { this.alive = false; } + + openDownloadDialog() { + this.dialogService.open(DownloadFormComponent); + } + + openDownloadPremiumDialog() { + this.dialogService.open(PremiumFormComponent); + } } diff --git a/docs/app/pages/home/our-projects-section/our-projects-section.component.html b/docs/app/pages/home/our-projects-section/our-projects-section.component.html index 8e45596a..8012e061 100644 --- a/docs/app/pages/home/our-projects-section/our-projects-section.component.html +++ b/docs/app/pages/home/our-projects-section/our-projects-section.component.html @@ -15,7 +15,7 @@

Nebular is a great toolkit if you build Rich UI web applications based on Angular. Complete with a set of native Angular components, themeable components, authentication and security layers that are easily configurable to your API. Nebular offers a world of possibilities
- Learn more + Learn more
  • @@ -30,7 +30,7 @@
    Eva Icons is a pack of more than 480 beautifully crafted Open Source icons. Download for desktop and use them in your creations for Web, iOS, and Android. The icons are available in several formats: PNG, SVG, font, Sketch
    - Learn more + Learn more
    • diff --git a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html index 488e1269..4dc0dd6c 100644 --- a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html +++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html @@ -2,6 +2,8 @@ + + @@ -16,8 +18,6 @@ bundleUrl="https://store.akveo.com/products/net-ngx-admin-angular-starter-bundle?utm_campaign=akveo_store%20-%20specific%20bundle%20-%20ngx_admin%20landing&utm_source=ngx_admin&utm_medium=referral&utm_content=.net_free_dashboard_banner"> - -
    diff --git a/docs/app/pages/home/social-section/social-section.component.html b/docs/app/pages/home/social-section/social-section.component.html index 29565cb4..e3d961e8 100644 --- a/docs/app/pages/home/social-section/social-section.component.html +++ b/docs/app/pages/home/social-section/social-section.component.html @@ -35,7 +35,7 @@
    diff --git a/docs/app/pages/home/theme-section/theme-section.component.html b/docs/app/pages/home/theme-section/theme-section.component.html index ceafb6d8..3f654c14 100644 --- a/docs/app/pages/home/theme-section/theme-section.component.html +++ b/docs/app/pages/home/theme-section/theme-section.component.html @@ -81,5 +81,5 @@
    View demo diff --git a/docs/app/shared/components/download-admin/download-admin.component.html b/docs/app/shared/components/download-admin/download-admin.component.html deleted file mode 100644 index 48e03664..00000000 --- a/docs/app/shared/components/download-admin/download-admin.component.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/docs/app/shared/components/download-admin/download-admin.component.scss b/docs/app/shared/components/download-admin/download-admin.component.scss deleted file mode 100644 index 75c0a5de..00000000 --- a/docs/app/shared/components/download-admin/download-admin.component.scss +++ /dev/null @@ -1,59 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -@import '../../../@theme/styles/themes'; -@import '~@nebular/theme/styles/global/breakpoints'; - -@include nb-install-component() { - .btn { - font-family: nb-theme(font-main), sans-serif; - border-radius: 3px; - border: none; - background: #ffffff; - color: #000000; - padding: 1.125rem 0; - box-shadow: nb-theme(shadow-default); - cursor: pointer; - text-transform: uppercase; - - &.btn-download { - margin-left: 1em; - color: #ffffff; - background-color: nb-theme(color-active-fg); - box-shadow: nb-theme(shadow-btn); - - &:hover { - box-shadow: nb-theme(shadow-hover-green-btn); - } - - &:active { - box-shadow: nb-theme(shadow-active-green-btn); - } - } - - &.btn-download { - margin-left: 0; - margin-top: 1rem; - width: 100%; - } - - &:hover { - box-shadow: nb-theme(shadow-hover-btn); - } - - &:active { - box-shadow: nb-theme(shadow-active-btn); - } - } - - @include media-breakpoint-down(md) { - .btn { - font-size: 0.7rem; - padding-bottom: 1rem; - padding-top: 1rem; - } - } -} diff --git a/docs/app/shared/components/download-admin/download-admin.component.ts b/docs/app/shared/components/download-admin/download-admin.component.ts deleted file mode 100644 index 62e4fc05..00000000 --- a/docs/app/shared/components/download-admin/download-admin.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright Akveo. All Rights Reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - */ - -import { Component } from '@angular/core'; -import { NbDialogService } from '@nebular/theme'; -import { DownloadFormComponent } from '../download-form/download-form.component'; - -@Component({ - selector: 'ngx-download-admin', - templateUrl: './download-admin.component.html', - styleUrls: ['./download-admin.component.scss'], -}) -export class DownloadAdminComponent { - - constructor(private dialogService: NbDialogService) { - } - - openDialog() { - this.dialogService.open(DownloadFormComponent); - } -} diff --git a/docs/app/shared/components/download-form/download-form.component.html b/docs/app/shared/components/download-form/download-form.component.html index 363b74c9..a10636fe 100644 --- a/docs/app/shared/components/download-form/download-form.component.html +++ b/docs/app/shared/components/download-form/download-form.component.html @@ -1,8 +1,11 @@ - -
    + + Download +
    + + +
    diff --git a/docs/app/shared/components/download-form/download-form.component.scss b/docs/app/shared/components/download-form/download-form.component.scss index 418c07a6..7eac4976 100644 --- a/docs/app/shared/components/download-form/download-form.component.scss +++ b/docs/app/shared/components/download-form/download-form.component.scss @@ -9,85 +9,23 @@ @import '../../../@theme/styles/themes'; @include nb-install-component() { - nb-card-body { - position: relative; + + nb-card { + width: 30rem; + } + + nb-card-header { + display: flex; + align-items: center; + justify-content: flex-end; } .close-icon { - cursor: pointer; - position: absolute; - right: 0.1rem; - top: 0.1rem; + margin-left: auto; + padding: 0; } - ::ng-deep .custom-form { - .modal-header { - display: none; - } - - .modal-body { - padding-bottom: 0; - } - - .actions { - display: flex; - justify-content: flex-end; - } - - input.hs-input { - width: 100%; - font-size: nb-theme(font-size-sm); - padding: 0.75rem 1rem !important; - border: 1px solid #e4e9f2; - box-shadow: nb-theme(shadow-default); - border-radius: 0.25rem; - - &.invalid { - box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6); - } - - &::placeholder { - color: #434a59; - opacity: 0.24; - } - - &:focus { - outline: none; - } - } - - .hs-error-msgs { - list-style-type: none; - padding: 0; - } - - .hs-form-required, .hs-error-msg { - color: #f2545b; - } - - .hs_error_rollup { - display: none; - } - - .btn { - margin-top: 2rem; - font-family: nb-theme(font-main), sans-serif; - border-radius: 3px; - border: none; - background-color: nb-theme(color-active-fg); - color: #ffffff; - padding: 1rem 2rem; - box-shadow: nb-theme(shadow-btn); - cursor: pointer; - text-transform: uppercase; - - &:hover { - box-shadow: nb-theme(shadow-hover-green-btn); - } - - &:active { - box-shadow: nb-theme(shadow-active-green-btn); - } - } + ::ng-deep .hs-custom-form .hs-submit-btn { + margin-top: 2rem; } } diff --git a/docs/app/shared/components/download-form/download-form.component.ts b/docs/app/shared/components/download-form/download-form.component.ts index f22cacc6..28b540f4 100644 --- a/docs/app/shared/components/download-form/download-form.component.ts +++ b/docs/app/shared/components/download-form/download-form.component.ts @@ -22,9 +22,9 @@ export class DownloadFormComponent implements AfterViewInit { portalId: '2452262', formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e', target: '#hubspotForm', - submitButtonClass: 'btn', + submitButtonClass: 'hs-submit-btn btn', css: '', - cssClass: 'custom-form', + cssClass: 'hs-custom-form', redirectUrl: 'https://github.com/akveo/ngx-admin', }); } diff --git a/docs/app/shared/components/premium-form/premium-form.component.html b/docs/app/shared/components/premium-form/premium-form.component.html new file mode 100644 index 00000000..45436c7b --- /dev/null +++ b/docs/app/shared/components/premium-form/premium-form.component.html @@ -0,0 +1,11 @@ + + + Premium + + + +
    +     +     diff --git a/docs/app/shared/components/premium-form/premium-form.component.scss b/docs/app/shared/components/premium-form/premium-form.component.scss new file mode 100644 index 00000000..a1a8c31c --- /dev/null +++ b/docs/app/shared/components/premium-form/premium-form.component.scss @@ -0,0 +1,31 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +@import '~@nebular/theme/styles/global/breakpoints'; + +@import '../../../@theme/styles/themes'; + +@include nb-install-component() { + + nb-card { + width: 30rem; + } + + nb-card-header { + display: flex; + align-items: center; + justify-content: flex-end; + } + + .close-icon { + margin-left: auto; + padding: 0; + } + + ::ng-deep .hs-custom-form .hs-submit-btn { + margin-top: 1rem; + } +} diff --git a/docs/app/shared/components/premium-form/premium-form.component.ts b/docs/app/shared/components/premium-form/premium-form.component.ts new file mode 100644 index 00000000..c3d75abe --- /dev/null +++ b/docs/app/shared/components/premium-form/premium-form.component.ts @@ -0,0 +1,35 @@ +/** + * @license + * Copyright Akveo. All Rights Reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + */ + +import { AfterViewInit, Component } from '@angular/core'; +import { NbDialogRef } from '@nebular/theme'; + +@Component({ + selector: 'ngx-premium-form', + templateUrl: './premium-form.component.html', + styleUrls: ['./premium-form.component.scss'], +}) +export class PremiumFormComponent implements AfterViewInit { + + + constructor(protected ref: NbDialogRef) { + } + + ngAfterViewInit() { + hbspt.forms.create({ + portalId: '2452262', + formId: 'b066428e-c41a-4dce-bbc2-5690cf084a8f', + target: '#hubspotForm', + submitButtonClass: 'hs-submit-btn btn', + css: '', + cssClass: 'hs-custom-form', + }); + } + + closeDialog() { + this.ref.close(); + } +} diff --git a/docs/app/shared/landing-shared.module.ts b/docs/app/shared/landing-shared.module.ts index d43b794b..df1c34a2 100644 --- a/docs/app/shared/landing-shared.module.ts +++ b/docs/app/shared/landing-shared.module.ts @@ -1,16 +1,16 @@ import { NgModule } from '@angular/core'; -import { NbBadgeModule, NbCardModule, NbDialogModule, NbPopoverModule } from '@nebular/theme'; +import {NbBadgeModule, NbButtonModule, NbCardModule, NbDialogModule, NbPopoverModule} from '@nebular/theme'; import { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component'; import { CapitalizePipe } from './pipes/capitalize.pipe'; import { EvaIconsPipe } from './pipes/eva-icons.pipe'; import { RouterModule } from '@angular/router'; -import { DownloadAdminComponent } from './components/download-admin/download-admin.component'; import { DownloadFormComponent } from './components/download-form/download-form.component'; +import { PremiumFormComponent } from './components/premium-form/premium-form.component'; const component = [ MaterialThemeLinkComponent, - DownloadAdminComponent, DownloadFormComponent, + PremiumFormComponent, ]; const pipes = [ CapitalizePipe, @@ -24,14 +24,12 @@ const pipes = [ NbBadgeModule, NbCardModule, NbDialogModule.forChild(), + NbButtonModule, ], declarations: [ ...component, ...pipes, ], - entryComponents: [ - DownloadFormComponent, - ], exports: [ NbPopoverModule, ...component, diff --git a/package-lock.json b/package-lock.json index 717aabf5..0c896696 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16530,6 +16530,11 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "ng-inline-svg": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/ng-inline-svg/-/ng-inline-svg-11.0.0.tgz", + "integrity": "sha512-D4dXt379cveaYJobu7JnYixZzw/+AqRkMGDqOrNhGDEiBgDaxb8DZ57mSg8V9ekTl3fK+H98p9SevhLSakzRkA==" + }, "ng-lazyload-image": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.1.0.tgz", diff --git a/package.json b/package.json index 436a8b78..bc2dfc22 100644 --- a/package.json +++ b/package.json @@ -61,8 +61,8 @@ "chart.js": "2.7.1", "ckeditor": "4.7.3", "classlist.js": "1.1.20150312", - "core-js": "2.5.1", "colors.js": "1.2.4", + "core-js": "2.5.1", "echarts": "^4.0.2", "eva-icons": "^1.1.3", "gulp-bump": "2.7.0", @@ -72,12 +72,13 @@ "leaflet": "1.2.0", "marked": "^0.5.2", "nebular-icons": "1.1.0", + "ng-inline-svg": "^11.0.0", "ng-lazyload-image": "^7.1.0", "ng2-ckeditor": "^1.2.9", "ng2-smart-table": "^1.6.0", "ngx-echarts": "^4.2.2", - "node-sass": "^4.12.0", "ngx-swiper-wrapper": "^9.0.1", + "node-sass": "^4.12.0", "normalize.css": "6.0.0", "pace-js": "1.0.2", "roboto-fontface": "0.8.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d55f48ee..dabd611e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -20,6 +20,7 @@ import { NbToastrModule, NbWindowModule, } from '@nebular/theme'; +import {InlineSVGModule} from 'ng-inline-svg'; @NgModule({ declarations: [AppComponent], @@ -39,6 +40,7 @@ import { }), CoreModule.forRoot(), ThemeModule.forRoot(), + InlineSVGModule.forRoot(), ], bootstrap: [AppComponent], }) diff --git a/src/app/pages/backend-integration/backend-integration.component.scss b/src/app/pages/backend-integration/backend-integration.component.scss index dc020830..718fad0e 100644 --- a/src/app/pages/backend-integration/backend-integration.component.scss +++ b/src/app/pages/backend-integration/backend-integration.component.scss @@ -1,4 +1,5 @@ @import '../../@theme/styles/themes'; +@import '~@nebular/theme/styles/global/breakpoints'; :host { display: flex !important; @@ -15,39 +16,43 @@ .diagram-container { flex: 2 1 auto; align-items: center; - min-width: 35rem; + min-width: 30rem; + width: 70%; } .description-container { - flex: 1 1 auto; + flex: 1 2 auto; max-width: 45rem; align-items: stretch; height: 100%; - - & > *:not(router-outlet) { - height: 100%; + + ::ng-deep :last-child { width: 100%; } } -@media (max-width : 991px) { +@include media-breakpoint-down(lg) { :host { flex-direction: column; justify-content: flex-start; - height: fit-content; + align-items: center; - .diagram-container { + .diagram-container, .description-container { width: 100%; max-width: none; - height: fit-content; - margin: 0 auto; + } - ngx-backend-integration-diagram { - font-size: 2vw; - height: 60vw; - padding-top: 0; + .description-container { + padding-bottom: 1.5rem; + + ::ng-deep ngx-integration-description .subheader { + margin-bottom: 1.5rem; } } + + .diagram-container { + min-width: 0; + } } } diff --git a/src/app/pages/backend-integration/backend-integration.module.ts b/src/app/pages/backend-integration/backend-integration.module.ts index 783185a8..db7c9094 100644 --- a/src/app/pages/backend-integration/backend-integration.module.ts +++ b/src/app/pages/backend-integration/backend-integration.module.ts @@ -14,6 +14,7 @@ import { JavaIntegrationDescriptionComponent } from './descriptions/java-integra import { PythonIntegrationDescriptionComponent } from './descriptions/python-integration-description.component'; import { EcommerceIntegrationDescriptionComponent } from './descriptions/ecommerce-integration-description.component'; import { IotIntegrationDescriptionComponent } from './descriptions/iot-integration-description.component'; +import {InlineSVGModule} from 'ng-inline-svg'; @NgModule({ imports: [ @@ -23,6 +24,7 @@ import { IotIntegrationDescriptionComponent } from './descriptions/iot-integrati BackendIntegrationRoutingModule, NbIconModule, NbButtonModule, + InlineSVGModule, ], declarations: [ BackendIntegrationComponent, diff --git a/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts index 1159df65..db5a3cc5 100644 --- a/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class DotNetCoreIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/collections/net-core-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnetcore'; features: string[] = [ diff --git a/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts index e04a974c..2063822e 100644 --- a/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class DotNetIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/collections/net-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnet'; features: string[] = [ diff --git a/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts index e16a710d..0b1fbaac 100644 --- a/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class EcommerceIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/collections/e-commerce-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_e-commerce'; features: string[] = [ diff --git a/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts index a5534773..02f502eb 100644 --- a/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class IotIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/collections/iot-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_iot'; features: string[] = [ diff --git a/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts index 66bd1f21..00f86939 100644 --- a/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class JavaIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/collections/java-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_java'; features: string[] = [ diff --git a/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts index b4a3cd10..d4622973 100644 --- a/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class NodeJsIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/collections/nodejs-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_nodejs'; features: string[] = [ diff --git a/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts index 3259d777..6e8d8ab9 100644 --- a/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class PhpIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/products/material-php-starter-bundle?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin%20&utm_medium=referral%20&utm_content=sidebar_link_php'; features: string[] = [ diff --git a/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts index 010388c5..eee9b390 100644 --- a/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts +++ b/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts @@ -11,7 +11,7 @@ import { Component } from '@angular/core'; }) export class PythonIntegrationDescriptionComponent { - buttonText: string = 'Get Backend From 49$'; + buttonText = 'Get Backend From 49$'; url = 'https://store.akveo.com/collections/python-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_python'; features: string[] = [ diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html index 1e5fd39e..21b8dd5b 100644 --- a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html +++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html @@ -1,81 +1,2 @@ -
    -
    What is admin dashboard with backend
    -
    You pay for backend connection (UI) + backend
    -
    -
    -
    -
    NGX-admin dashboard
    -
    Open source part + backend connection
    -
    -
    -
    -
    REST Data Access
    -
    -
    -
    -
    Nebular Components
    -
    -
    -
    -
    Auth
    -
    -
    -
    Security
    -
    -
    -
    -
    -
    Angular
    -
    -
    -
    -
    - -
    JSON
    - -
    -
    -
    -
    Backend
    -
    -
    -
    -
    -
    Web API
    -
    Backend Interface
    -
    -
    -
    Service
    -
    Data organization Business logic
    -
    -
    -
    Security
    -
    Authentication, Authorization
    -
    -
    -
    -
    -
    -
    Repository
    -
    Data access
    -
    -
    -
    Entity Framework
    -
    Data transformation
    -
    -
    -
    -
    -
    Data Base
    -
    -
    Data of product
    -
    +
    -
    Backend data (examples)
    -
    -
    -
    -
    -
    -
    -
    +
    diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss index 28a285d7..a17d8d7e 100644 --- a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss +++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss @@ -2,107 +2,28 @@ @include nb-install-component() { width: 100%; - height: 0; - position: relative; - padding-top: 80%; /* Aspect Ratio */ - //background-color: transparentize(red, 0.8); - font-size: 0.9vw; - $subheader-color: nb-theme(text-hint-color); - - .header, .subheader { - justify-content: center; - } - - & > div { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin-bottom: 0; - - & > .header { - font-size: 1.25em; - font-weight: bold; + ::ng-deep svg { + path.card-header, path.subcard-header, path.diagram-header { + fill: nb-theme(text-basic-color); } - & > .subheader { - font-size: 0.9em; - color: $subheader-color; + path.card-subheader, path.subcard-subheader, path.diagram-subheader { + fill: nb-theme(text-hint-color); } - } - div { - display: flex; - text-align: center; - } - - .json-container { - font-weight: bold; - div { - margin: 0 1em; + rect.card-background { + fill: nb-theme(background-basic-color-2); + stroke: nb-theme(border-basic-color-5); } - } - .headers-container { - height: 2.5rem; - - & > .header { - font-size: 0.9em; - height: 0.9rem; - font-weight: bold; + rect.subcard-background { + fill: nb-theme(background-basic-color-1); } - & > .subheader { - font-size: 0.7em; - height: 0.7rem; - color: $subheader-color; - } - } - .dashboard-container { - width: 40%; - } - - .json-container { - width: fit-content; - - nb-icon { - width: 0.75em; - height: 0.75em; - } - } - - .backend-container { - width: 40%; - } - - .border-dashed { - border: 2px dashed nb-theme(border-basic-color-4); - } - - .pad1 { - background-color: transparentize(nb-theme(background-basic-color-2), 0.5); - padding: 1em; - height: 100%; - } - - .item { - background-color: nb-theme(background-basic-color-1); - justify-content: center; - padding: 0.5em 0; - flex-direction: column; - & > .header { - font-size: 0.7em; - font-weight: bold; - line-height: 1.1em; - } - & > .subheader { - font-size: 0.6em; - color: $subheader-color; - line-height: 1em; - flex-direction: column; - align-items: center; + path.subcard-border { + fill: nb-theme(background-basic-color-2); + stroke: nb-theme(border-basic-color-5); } } } diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts index 83249f5d..d7e181f7 100644 --- a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts +++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts @@ -1,15 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'ngx-backend-integration-diagram', templateUrl: './backend-integration-diagram.component.html', styleUrls: ['./backend-integration-diagram.component.scss'], }) -export class BackendIntegrationDiagramComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} +export class BackendIntegrationDiagramComponent {} diff --git a/src/app/pages/backend-integration/integration-description/integration-description.component.scss b/src/app/pages/backend-integration/integration-description/integration-description.component.scss index 271ba5ea..f6b2733e 100644 --- a/src/app/pages/backend-integration/integration-description/integration-description.component.scss +++ b/src/app/pages/backend-integration/integration-description/integration-description.component.scss @@ -8,27 +8,23 @@ padding: 1rem 2rem; width: 100%; height: 100%; - box-sizing: border-box; - .header, .header2 { - font-weight: bold; - font-size: 1.25rem; + .h6 { margin-bottom: 1rem; } - .subheader { - font-size: 1rem; - line-height: 1.5rem; - margin-bottom: 5rem; + .subtitle { + margin-bottom: 3rem; } .features-list { - list-style-type: none; + list-style-type: '- '; padding-left: 0; } a { - width: fit-content; + width: auto; + align-self: flex-start; margin-top: 2rem; } } diff --git a/src/app/pages/backend-integration/integration-description/integration-description.component.ts b/src/app/pages/backend-integration/integration-description/integration-description.component.ts index d22f06cc..ccfadccf 100644 --- a/src/app/pages/backend-integration/integration-description/integration-description.component.ts +++ b/src/app/pages/backend-integration/integration-description/integration-description.component.ts @@ -1,20 +1,20 @@ import {Component, Input} from '@angular/core'; @Component({ - selector: 'ngx-integration-description[features][url][buttonText]', + selector: 'ngx-integration-description', template: ` -
    For why do you need a backend admin dashboard?
    -
    To save up to 300 hours on development. To use backend as ready to use examples.
    -
    Features
    -
    +
    To save up to 300 hours on development. To use backend as ready to use examples.
    +
    Features
    + {{buttonText}} @@ -27,6 +27,4 @@ export class IntegrationDescriptionComponent { @Input() url: string; @Input() buttonText: string; - constructor() { } - } diff --git a/src/assets/images/backend-integration-diagram.svg b/src/assets/images/backend-integration-diagram.svg new file mode 100644 index 00000000..0114e0cd --- /dev/null +++ b/src/assets/images/backend-integration-diagram.svg @@ -0,0 +1 @@ +