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/main-info-section.component.html b/docs/app/pages/home/main-info-section/main-info-section.component.html
index f615a8d5..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
@@ -41,6 +41,11 @@
-
+
+
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/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..edfc3eb1
--- /dev/null
+++ b/docs/app/shared/components/premium-form/premium-form.component.ts
@@ -0,0 +1,36 @@
+/**
+ * @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',
+ redirectUrl: 'https://github.com/akveo/ngx-admin',
+ });
+ }
+
+ 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/src/app/pages/backend-integration/backend-integration.component.scss b/src/app/pages/backend-integration/backend-integration.component.scss
index 697a35b3..718fad0e 100644
--- a/src/app/pages/backend-integration/backend-integration.component.scss
+++ b/src/app/pages/backend-integration/backend-integration.component.scss
@@ -25,7 +25,7 @@
max-width: 45rem;
align-items: stretch;
height: 100%;
-
+
::ng-deep :last-child {
width: 100%;
}