From b72fb30dd1fae95b20f9b43f1a3c614aa37f4998 Mon Sep 17 00:00:00 2001 From: Sergey Filinsky Date: Wed, 7 Oct 2020 17:38:19 +0300 Subject: [PATCH] feat(docs): added get premium modal in landing fix(docs): fixed styles for get download modal --- .../main-info-section.component.html | 1 + .../main-info-section.component.scss | 2 +- .../download-admin.component.html | 2 +- .../download-admin.component.scss | 1 + .../download-form.component.html | 6 +- .../download-form.component.scss | 27 ++++- .../premium-form/premium-form.component.html | 11 ++ .../premium-form/premium-form.component.scss | 113 ++++++++++++++++++ .../premium-form/premium-form.component.ts | 36 ++++++ .../components/premium/premium.component.html | 3 + .../components/premium/premium.component.scss | 60 ++++++++++ .../components/premium/premium.component.ts | 26 ++++ docs/app/shared/landing-shared.module.ts | 5 + 13 files changed, 287 insertions(+), 6 deletions(-) create mode 100644 docs/app/shared/components/premium-form/premium-form.component.html create mode 100644 docs/app/shared/components/premium-form/premium-form.component.scss create mode 100644 docs/app/shared/components/premium-form/premium-form.component.ts create mode 100644 docs/app/shared/components/premium/premium.component.html create mode 100644 docs/app/shared/components/premium/premium.component.scss create mode 100644 docs/app/shared/components/premium/premium.component.ts 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..1ad0c887 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 @@ -42,5 +42,6 @@ + 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..a17d871a 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; diff --git a/docs/app/shared/components/download-admin/download-admin.component.html b/docs/app/shared/components/download-admin/download-admin.component.html index 48e03664..24fdaed4 100644 --- a/docs/app/shared/components/download-admin/download-admin.component.html +++ b/docs/app/shared/components/download-admin/download-admin.component.html @@ -1,3 +1,3 @@ - diff --git a/docs/app/shared/components/download-admin/download-admin.component.scss b/docs/app/shared/components/download-admin/download-admin.component.scss index 75c0a5de..01d5f42f 100644 --- a/docs/app/shared/components/download-admin/download-admin.component.scss +++ b/docs/app/shared/components/download-admin/download-admin.component.scss @@ -9,6 +9,7 @@ @include nb-install-component() { .btn { + display: block; font-family: nb-theme(font-main), sans-serif; border-radius: 3px; border: none; 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..a14fcd59 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,12 @@ - + + 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..88940b53 100644 --- a/docs/app/shared/components/download-form/download-form.component.scss +++ b/docs/app/shared/components/download-form/download-form.component.scss @@ -9,15 +9,22 @@ @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; } .close-icon { cursor: pointer; - position: absolute; + margin-left: auto; right: 0.1rem; top: 0.1rem; + width: fit-content; } ::ng-deep .custom-form { @@ -56,6 +63,20 @@ } } + .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; 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..f20a9297 --- /dev/null +++ b/docs/app/shared/components/premium-form/premium-form.component.html @@ -0,0 +1,11 @@ + + + Download +
+ +
+ + +
+ + 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..a34404bc --- /dev/null +++ b/docs/app/shared/components/premium-form/premium-form.component.scss @@ -0,0 +1,113 @@ +/** + * @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; + } + + .close-icon { + cursor: pointer; + margin-left: auto; + right: 0.1rem; + top: 0.1rem; + width: fit-content; + } + + ::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-richtext .modal-body { + padding: 0; + margin-bottom: 1rem; + p { + margin-bottom: 0; + text-align: left ! important; + } + } + + .hs-recaptcha { + margin-top: 1rem; + } + + .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); + } + } + } +} 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..d55058fd --- /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: 'btn', + css: '', + cssClass: 'custom-form', + redirectUrl: 'https://github.com/akveo/ngx-admin', + }); + } + + closeDialog() { + this.ref.close(); + } +} diff --git a/docs/app/shared/components/premium/premium.component.html b/docs/app/shared/components/premium/premium.component.html new file mode 100644 index 00000000..3d78bf20 --- /dev/null +++ b/docs/app/shared/components/premium/premium.component.html @@ -0,0 +1,3 @@ + diff --git a/docs/app/shared/components/premium/premium.component.scss b/docs/app/shared/components/premium/premium.component.scss new file mode 100644 index 00000000..01d5f42f --- /dev/null +++ b/docs/app/shared/components/premium/premium.component.scss @@ -0,0 +1,60 @@ +/** + * @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 { + display: block; + 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/premium/premium.component.ts b/docs/app/shared/components/premium/premium.component.ts new file mode 100644 index 00000000..66a6719a --- /dev/null +++ b/docs/app/shared/components/premium/premium.component.ts @@ -0,0 +1,26 @@ +/** + * @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 {PremiumFormComponent} from '../premium-form/premium-form.component'; + +@Component({ + selector: 'ngx-premium', + templateUrl: './premium.component.html', + styleUrls: ['./premium.component.scss'], +}) +export class PremiumComponent { + + + constructor(private dialogService: NbDialogService) { + } + + openDialog() { + this.dialogService.open(PremiumFormComponent); + } + +} diff --git a/docs/app/shared/landing-shared.module.ts b/docs/app/shared/landing-shared.module.ts index d43b794b..fd1bbd91 100644 --- a/docs/app/shared/landing-shared.module.ts +++ b/docs/app/shared/landing-shared.module.ts @@ -6,11 +6,15 @@ 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 { PremiumComponent } from './components/premium/premium.component'; +import { PremiumFormComponent } from './components/premium-form/premium-form.component'; const component = [ MaterialThemeLinkComponent, DownloadAdminComponent, DownloadFormComponent, + PremiumComponent, + PremiumFormComponent, ]; const pipes = [ CapitalizePipe, @@ -31,6 +35,7 @@ const pipes = [ ], entryComponents: [ DownloadFormComponent, + PremiumFormComponent, ], exports: [ NbPopoverModule,