mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
Merge branch 'demo' into feat/landing-page-update
# Conflicts: # src/app/pages/backend-integration/backend-integration.component.scss # src/app/pages/backend-integration/backend-integration.module.ts # src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts # src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts # src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts # src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts # src/app/pages/backend-integration/descriptions/java-integration-description.component.ts # src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts # src/app/pages/backend-integration/descriptions/php-integration-description.component.ts # src/app/pages/backend-integration/descriptions/python-integration-description.component.ts # src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html # src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss # src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts # src/app/pages/backend-integration/integration-description/integration-description.component.scss # src/app/pages/backend-integration/integration-description/integration-description.component.ts
This commit is contained in:
Sergey Filinsky
commit
90d8b9b249
39 changed files with 324 additions and 413 deletions
105
docs/app/@theme/styles/_hs-forms.scss
Normal file
105
docs/app/@theme/styles/_hs-forms.scss
Normal file
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -10,7 +10,10 @@
|
||||||
@import '~@nebular/theme/styles/globals';
|
@import '~@nebular/theme/styles/globals';
|
||||||
@import '~@nebular/bootstrap/styles/globals';
|
@import '~@nebular/bootstrap/styles/globals';
|
||||||
|
|
||||||
|
@import 'hs-forms';
|
||||||
|
|
||||||
@include nb-install() {
|
@include nb-install() {
|
||||||
@include nb-theme-global();
|
@include nb-theme-global();
|
||||||
@include nb-bootstrap-global();
|
@include nb-bootstrap-global();
|
||||||
|
@include hs-custom-form();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@
|
||||||
<h1>ngx-admin</h1>
|
<h1>ngx-admin</h1>
|
||||||
<p class="description">
|
<p class="description">
|
||||||
The most popular admin dashboard based on <strong>Angular 9+</strong> and
|
The most popular admin dashboard based on <strong>Angular 9+</strong> and
|
||||||
<a href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info" target="_blank">Nebular</a> with
|
<a href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_content=landing_main_info&utm_medium=referral&utm_source=ngx_admin" target="_blank">Nebular</a> with
|
||||||
<a href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">Eva Design System</a> support.
|
<a href="https://eva.design/?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">Eva Design System</a> support.
|
||||||
Free and Open Source for personal and commercial purposes.
|
Free and Open Source for personal and commercial purposes.
|
||||||
<br>
|
<br>
|
||||||
<span class="bundles">
|
<span class="bundles">
|
||||||
|
|
|
||||||
|
|
@ -35,12 +35,17 @@
|
||||||
Installation Docs
|
Installation Docs
|
||||||
</a>
|
</a>
|
||||||
<a class="btn btn-demo"
|
<a class="btn btn-demo"
|
||||||
href="https://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section"
|
href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
Demo
|
Demo
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ngx-download-admin></ngx-download-admin>
|
<button (click)="openDownloadDialog()" class="btn btn-download">
|
||||||
|
Download
|
||||||
|
</button>
|
||||||
|
<button (click)="openDownloadPremiumDialog()" class="btn btn-download-premium">
|
||||||
|
Get ngx-admin PREMIUM for 89$
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
$color-active: nb-theme(color-active-fg);
|
$color-active: nb-theme(color-active-fg);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 3.375rem 0 0;
|
padding: 3.375rem 0;
|
||||||
max-width: 120rem;
|
max-width: 120rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
||||||
|
|
@ -133,8 +133,9 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
||||||
&.btn-demo {
|
&.btn-demo,
|
||||||
margin-left: 1em;
|
&.btn-download,
|
||||||
|
&.btn-download-premium {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: nb-theme(color-active-fg);
|
background-color: nb-theme(color-active-fg);
|
||||||
box-shadow: nb-theme(shadow-btn);
|
box-shadow: nb-theme(shadow-btn);
|
||||||
|
|
@ -155,6 +156,16 @@
|
||||||
&:active {
|
&:active {
|
||||||
box-shadow: nb-theme(shadow-active-btn);
|
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) {
|
@include media-breakpoint-down(xxl) {
|
||||||
|
|
|
||||||
|
|
@ -5,9 +5,12 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, OnDestroy, Input } from '@angular/core';
|
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 { 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({
|
@Component({
|
||||||
selector: 'ngx-landing-main-info',
|
selector: 'ngx-landing-main-info',
|
||||||
templateUrl: './main-info-section.component.html',
|
templateUrl: './main-info-section.component.html',
|
||||||
|
|
@ -15,7 +18,8 @@ import { takeWhile } from 'rxjs/operators';
|
||||||
})
|
})
|
||||||
export class MainInfoSectionComponent implements OnDestroy {
|
export class MainInfoSectionComponent implements OnDestroy {
|
||||||
constructor(themeService: NbThemeService,
|
constructor(themeService: NbThemeService,
|
||||||
breakpointService: NbMediaBreakpointsService) {
|
breakpointService: NbMediaBreakpointsService,
|
||||||
|
private dialogService: NbDialogService) {
|
||||||
this.breakpoints = breakpointService.getBreakpointsMap();
|
this.breakpoints = breakpointService.getBreakpointsMap();
|
||||||
themeService.onMediaQueryChange()
|
themeService.onMediaQueryChange()
|
||||||
.pipe(takeWhile(() => this.alive))
|
.pipe(takeWhile(() => this.alive))
|
||||||
|
|
@ -42,4 +46,12 @@ export class MainInfoSectionComponent implements OnDestroy {
|
||||||
public ngOnDestroy() {
|
public ngOnDestroy() {
|
||||||
this.alive = false;
|
this.alive = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
openDownloadDialog() {
|
||||||
|
this.dialogService.open(DownloadFormComponent);
|
||||||
|
}
|
||||||
|
|
||||||
|
openDownloadPremiumDialog() {
|
||||||
|
this.dialogService.open(PremiumFormComponent);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
<div class="description">
|
<div class="description">
|
||||||
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
|
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
|
||||||
</div>
|
</div>
|
||||||
<a class="btn" href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_our_projects_link" target="_blank">Learn more</a>
|
<a class="btn" href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_content=landing_our_projects_link&utm_medium=referral&utm_source=ngx_admin" target="_blank">Learn more</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li class="project">
|
<li class="project">
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
<div class="description">
|
<div class="description">
|
||||||
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
|
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
|
||||||
</div>
|
</div>
|
||||||
<a class="btn" href="https://akveo.github.io/eva-icons?utm_campaign=eva_icons%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=more_from_akveo_link" target="_blank">Learn more</a>
|
<a class="btn" href="https://akveo.github.io/eva-icons/#/" target="_blank">Learn more</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
<ngx-landing-main-info></ngx-landing-main-info>
|
<ngx-landing-main-info></ngx-landing-main-info>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<ngx-backend-bundles-section id="backend-bundles"></ngx-backend-bundles-section>
|
||||||
|
|
||||||
<ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async" ></ngx-landing-description-section>
|
<ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async" ></ngx-landing-description-section>
|
||||||
|
|
||||||
<ngx-landing-theme-section></ngx-landing-theme-section>
|
<ngx-landing-theme-section></ngx-landing-theme-section>
|
||||||
|
|
@ -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">
|
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">
|
||||||
</ngx-free-banner-section>
|
</ngx-free-banner-section>
|
||||||
|
|
||||||
<ngx-backend-bundles-section id="backend-bundles"></ngx-backend-bundles-section>
|
|
||||||
|
|
||||||
<ngx-landing-our-projects-section></ngx-landing-our-projects-section>
|
<ngx-landing-our-projects-section></ngx-landing-our-projects-section>
|
||||||
|
|
||||||
<div class="gray-section">
|
<div class="gray-section">
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="social-button linkedin"
|
<a class="social-button linkedin"
|
||||||
href="https://www.linkedin.com/company/akveo"
|
href="https://www.linkedin.com/company/akveo/"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
<i [innerHTML]="'linkedin' | eva: { width: 42, height: 42, fill: '#0077b5' }"></i>
|
<i [innerHTML]="'linkedin' | eva: { width: 42, height: 42, fill: '#0077b5' }"></i>
|
||||||
<div class="info">
|
<div class="info">
|
||||||
|
|
|
||||||
|
|
@ -81,5 +81,5 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a class="btn btn-demo"
|
<a class="btn btn-demo"
|
||||||
href="http://www.akveo.com/ngx-admin?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_view_demo"
|
href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_view_demo"
|
||||||
target="_blank">View demo</a>
|
target="_blank">View demo</a>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<button matRipple (click)="openDialog()" class="btn btn-download">
|
|
||||||
Download
|
|
||||||
</button>
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,8 +1,11 @@
|
||||||
<nb-card>
|
<nb-card>
|
||||||
<nb-card-body>
|
<nb-card-header>
|
||||||
<div class="close-icon" (click)="closeDialog()">
|
<span>Download</span>
|
||||||
|
<button nbButton status="basic" appearance="ghost" class="close-icon" (click)="closeDialog()">
|
||||||
<i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
|
<i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
|
||||||
</div>
|
</button>
|
||||||
|
</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
<div id="hubspotForm"></div>
|
<div id="hubspotForm"></div>
|
||||||
</nb-card-body>
|
</nb-card-body>
|
||||||
</nb-card>
|
</nb-card>
|
||||||
|
|
|
||||||
|
|
@ -9,85 +9,23 @@
|
||||||
@import '../../../@theme/styles/themes';
|
@import '../../../@theme/styles/themes';
|
||||||
|
|
||||||
@include nb-install-component() {
|
@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 {
|
.close-icon {
|
||||||
cursor: pointer;
|
margin-left: auto;
|
||||||
position: absolute;
|
padding: 0;
|
||||||
right: 0.1rem;
|
|
||||||
top: 0.1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .custom-form {
|
::ng-deep .hs-custom-form .hs-submit-btn {
|
||||||
.modal-header {
|
margin-top: 2rem;
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,9 +22,9 @@ export class DownloadFormComponent implements AfterViewInit {
|
||||||
portalId: '2452262',
|
portalId: '2452262',
|
||||||
formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e',
|
formId: '93007d7b-5f11-4dd8-bcfd-f8b99d31f31e',
|
||||||
target: '#hubspotForm',
|
target: '#hubspotForm',
|
||||||
submitButtonClass: 'btn',
|
submitButtonClass: 'hs-submit-btn btn',
|
||||||
css: '',
|
css: '',
|
||||||
cssClass: 'custom-form',
|
cssClass: 'hs-custom-form',
|
||||||
redirectUrl: 'https://github.com/akveo/ngx-admin',
|
redirectUrl: 'https://github.com/akveo/ngx-admin',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<nb-card>
|
||||||
|
<nb-card-header>
|
||||||
|
<span>Premium</span>
|
||||||
|
<button nbButton status="basic" appearance="ghost" class="close-icon" (click)="closeDialog()">
|
||||||
|
<i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
|
||||||
|
</button>
|
||||||
|
</nb-card-header>
|
||||||
|
<nb-card-body>
|
||||||
|
<div id="hubspotForm"></div>
|
||||||
|
</nb-card-body>
|
||||||
|
</nb-card>
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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<PremiumFormComponent>) {
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
import { NgModule } from '@angular/core';
|
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 { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component';
|
||||||
import { CapitalizePipe } from './pipes/capitalize.pipe';
|
import { CapitalizePipe } from './pipes/capitalize.pipe';
|
||||||
import { EvaIconsPipe } from './pipes/eva-icons.pipe';
|
import { EvaIconsPipe } from './pipes/eva-icons.pipe';
|
||||||
import { RouterModule } from '@angular/router';
|
import { RouterModule } from '@angular/router';
|
||||||
import { DownloadAdminComponent } from './components/download-admin/download-admin.component';
|
|
||||||
import { DownloadFormComponent } from './components/download-form/download-form.component';
|
import { DownloadFormComponent } from './components/download-form/download-form.component';
|
||||||
|
import { PremiumFormComponent } from './components/premium-form/premium-form.component';
|
||||||
|
|
||||||
const component = [
|
const component = [
|
||||||
MaterialThemeLinkComponent,
|
MaterialThemeLinkComponent,
|
||||||
DownloadAdminComponent,
|
|
||||||
DownloadFormComponent,
|
DownloadFormComponent,
|
||||||
|
PremiumFormComponent,
|
||||||
];
|
];
|
||||||
const pipes = [
|
const pipes = [
|
||||||
CapitalizePipe,
|
CapitalizePipe,
|
||||||
|
|
@ -24,14 +24,12 @@ const pipes = [
|
||||||
NbBadgeModule,
|
NbBadgeModule,
|
||||||
NbCardModule,
|
NbCardModule,
|
||||||
NbDialogModule.forChild(),
|
NbDialogModule.forChild(),
|
||||||
|
NbButtonModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
...component,
|
...component,
|
||||||
...pipes,
|
...pipes,
|
||||||
],
|
],
|
||||||
entryComponents: [
|
|
||||||
DownloadFormComponent,
|
|
||||||
],
|
|
||||||
exports: [
|
exports: [
|
||||||
NbPopoverModule,
|
NbPopoverModule,
|
||||||
...component,
|
...component,
|
||||||
|
|
|
||||||
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -16530,6 +16530,11 @@
|
||||||
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
|
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
|
||||||
"dev": true
|
"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": {
|
"ng-lazyload-image": {
|
||||||
"version": "7.1.0",
|
"version": "7.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.1.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -61,8 +61,8 @@
|
||||||
"chart.js": "2.7.1",
|
"chart.js": "2.7.1",
|
||||||
"ckeditor": "4.7.3",
|
"ckeditor": "4.7.3",
|
||||||
"classlist.js": "1.1.20150312",
|
"classlist.js": "1.1.20150312",
|
||||||
"core-js": "2.5.1",
|
|
||||||
"colors.js": "1.2.4",
|
"colors.js": "1.2.4",
|
||||||
|
"core-js": "2.5.1",
|
||||||
"echarts": "^4.0.2",
|
"echarts": "^4.0.2",
|
||||||
"eva-icons": "^1.1.3",
|
"eva-icons": "^1.1.3",
|
||||||
"gulp-bump": "2.7.0",
|
"gulp-bump": "2.7.0",
|
||||||
|
|
@ -72,12 +72,13 @@
|
||||||
"leaflet": "1.2.0",
|
"leaflet": "1.2.0",
|
||||||
"marked": "^0.5.2",
|
"marked": "^0.5.2",
|
||||||
"nebular-icons": "1.1.0",
|
"nebular-icons": "1.1.0",
|
||||||
|
"ng-inline-svg": "^11.0.0",
|
||||||
"ng-lazyload-image": "^7.1.0",
|
"ng-lazyload-image": "^7.1.0",
|
||||||
"ng2-ckeditor": "^1.2.9",
|
"ng2-ckeditor": "^1.2.9",
|
||||||
"ng2-smart-table": "^1.6.0",
|
"ng2-smart-table": "^1.6.0",
|
||||||
"ngx-echarts": "^4.2.2",
|
"ngx-echarts": "^4.2.2",
|
||||||
"node-sass": "^4.12.0",
|
|
||||||
"ngx-swiper-wrapper": "^9.0.1",
|
"ngx-swiper-wrapper": "^9.0.1",
|
||||||
|
"node-sass": "^4.12.0",
|
||||||
"normalize.css": "6.0.0",
|
"normalize.css": "6.0.0",
|
||||||
"pace-js": "1.0.2",
|
"pace-js": "1.0.2",
|
||||||
"roboto-fontface": "0.8.0",
|
"roboto-fontface": "0.8.0",
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ import {
|
||||||
NbToastrModule,
|
NbToastrModule,
|
||||||
NbWindowModule,
|
NbWindowModule,
|
||||||
} from '@nebular/theme';
|
} from '@nebular/theme';
|
||||||
|
import {InlineSVGModule} from 'ng-inline-svg';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [AppComponent],
|
declarations: [AppComponent],
|
||||||
|
|
@ -39,6 +40,7 @@ import {
|
||||||
}),
|
}),
|
||||||
CoreModule.forRoot(),
|
CoreModule.forRoot(),
|
||||||
ThemeModule.forRoot(),
|
ThemeModule.forRoot(),
|
||||||
|
InlineSVGModule.forRoot(),
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent],
|
bootstrap: [AppComponent],
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
@import '../../@theme/styles/themes';
|
@import '../../@theme/styles/themes';
|
||||||
|
@import '~@nebular/theme/styles/global/breakpoints';
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
|
@ -15,39 +16,43 @@
|
||||||
.diagram-container {
|
.diagram-container {
|
||||||
flex: 2 1 auto;
|
flex: 2 1 auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 35rem;
|
min-width: 30rem;
|
||||||
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description-container {
|
.description-container {
|
||||||
flex: 1 1 auto;
|
flex: 1 2 auto;
|
||||||
max-width: 45rem;
|
max-width: 45rem;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
& > *:not(router-outlet) {
|
::ng-deep :last-child {
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width : 991px) {
|
@include media-breakpoint-down(lg) {
|
||||||
:host {
|
:host {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
height: fit-content;
|
align-items: center;
|
||||||
|
|
||||||
.diagram-container {
|
.diagram-container, .description-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
height: fit-content;
|
}
|
||||||
margin: 0 auto;
|
|
||||||
|
|
||||||
ngx-backend-integration-diagram {
|
.description-container {
|
||||||
font-size: 2vw;
|
padding-bottom: 1.5rem;
|
||||||
height: 60vw;
|
|
||||||
padding-top: 0;
|
::ng-deep ngx-integration-description .subheader {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.diagram-container {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ import { JavaIntegrationDescriptionComponent } from './descriptions/java-integra
|
||||||
import { PythonIntegrationDescriptionComponent } from './descriptions/python-integration-description.component';
|
import { PythonIntegrationDescriptionComponent } from './descriptions/python-integration-description.component';
|
||||||
import { EcommerceIntegrationDescriptionComponent } from './descriptions/ecommerce-integration-description.component';
|
import { EcommerceIntegrationDescriptionComponent } from './descriptions/ecommerce-integration-description.component';
|
||||||
import { IotIntegrationDescriptionComponent } from './descriptions/iot-integration-description.component';
|
import { IotIntegrationDescriptionComponent } from './descriptions/iot-integration-description.component';
|
||||||
|
import {InlineSVGModule} from 'ng-inline-svg';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
|
@ -23,6 +24,7 @@ import { IotIntegrationDescriptionComponent } from './descriptions/iot-integrati
|
||||||
BackendIntegrationRoutingModule,
|
BackendIntegrationRoutingModule,
|
||||||
NbIconModule,
|
NbIconModule,
|
||||||
NbButtonModule,
|
NbButtonModule,
|
||||||
|
InlineSVGModule,
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
BackendIntegrationComponent,
|
BackendIntegrationComponent,
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class DotNetCoreIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class DotNetIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class EcommerceIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class IotIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class JavaIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class NodeJsIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class PhpIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class PythonIntegrationDescriptionComponent {
|
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';
|
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[] = [
|
features: string[] = [
|
||||||
|
|
|
||||||
|
|
@ -1,81 +1,2 @@
|
||||||
<div class='flex-column justify-content-center'>
|
<div inlineSVG="assets/images/backend-integration-diagram.svg">
|
||||||
<div class='flex-row justify-content-center header mt-auto mb-1'> What is admin dashboard with backend</div>
|
|
||||||
<div class='flex-row justify-content-center subheader'> You pay for backend connection (UI) + backend</div>
|
|
||||||
<div class='flex-row align-items-start justify-content-around mt-4 mb-auto'>
|
|
||||||
<div class='dashboard-container h-100 flex-column ml-3 mr-3'>
|
|
||||||
<div class='headers-container flex-column'>
|
|
||||||
<div class='header'> NGX-admin dashboard</div>
|
|
||||||
<div class='subheader'> Open source part + backend connection</div>
|
|
||||||
</div>
|
|
||||||
<div class='dashboard-content border-dashed pad1 flex-column justify-content-center'>
|
|
||||||
<div class='item mb-3'>
|
|
||||||
<div class='header'> REST Data Access</div>
|
|
||||||
</div>
|
|
||||||
<div class='flex-column border-dashed mb-3 p-3'>
|
|
||||||
<div class='item mb-3'>
|
|
||||||
<div class='header'> Nebular Components</div>
|
|
||||||
</div>
|
|
||||||
<div class='flex-row w-100'>
|
|
||||||
<div class='item flex-grow-1 mr-2'>
|
|
||||||
<div class='header'> Auth</div>
|
|
||||||
</div>
|
|
||||||
<div class='item flex-grow-1'>
|
|
||||||
<div class='header'> Security</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='item mb-3'>
|
|
||||||
<div class='header'> Angular</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='json-container mt-auto mb-auto header2 align-items-center'>
|
|
||||||
<nb-icon icon='arrow-back-outline'></nb-icon>
|
|
||||||
<div>JSON</div>
|
|
||||||
<nb-icon icon='arrow-forward-outline'></nb-icon>
|
|
||||||
</div>
|
|
||||||
<div class='backend-container h-100 flex-column ml-3 mr-3'>
|
|
||||||
<div class='headers-container flex-column'>
|
|
||||||
<div class='header justify-content-center'> Backend</div>
|
|
||||||
</div>
|
|
||||||
<div class='backend-content border-dashed pad1 flex-column justify-content-center'>
|
|
||||||
<div class='flex-column border-dashed mb-3 p-3'>
|
|
||||||
<div class='item mb-3'>
|
|
||||||
<div class='header'> Web API</div>
|
|
||||||
<div class='subheader'> Backend Interface</div>
|
|
||||||
</div>
|
|
||||||
<div class='item mb-3'>
|
|
||||||
<div class='header'> Service</div>
|
|
||||||
<div class='subheader'> Data organization Business logic</div>
|
|
||||||
</div>
|
|
||||||
<div class='item'>
|
|
||||||
<div class='header'> Security</div>
|
|
||||||
<div class='subheader'> Authentication, Authorization</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='flex-row w-100'>
|
|
||||||
<div class='flex-column flex-grow-1 mr-3'>
|
|
||||||
<div class='item mb-3'>
|
|
||||||
<div class='header'> Repository</div>
|
|
||||||
<div class='subheader'> Data access</div>
|
|
||||||
</div>
|
|
||||||
<div class='item'>
|
|
||||||
<div class='header'> Entity Framework</div>
|
|
||||||
<div class='subheader'> Data transformation</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class='item h-100 flex-grow-1 mr-3'>
|
|
||||||
<div class='item'>
|
|
||||||
<div class='header'> Data Base</div>
|
|
||||||
<div class='subheader'>
|
|
||||||
<div>Data of product</div>
|
|
||||||
<div>+</div>
|
|
||||||
<div>Backend data (examples)</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,107 +2,28 @@
|
||||||
|
|
||||||
@include nb-install-component() {
|
@include nb-install-component() {
|
||||||
width: 100%;
|
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);
|
::ng-deep svg {
|
||||||
|
path.card-header, path.subcard-header, path.diagram-header {
|
||||||
.header, .subheader {
|
fill: nb-theme(text-basic-color);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& > .subheader {
|
path.card-subheader, path.subcard-subheader, path.diagram-subheader {
|
||||||
font-size: 0.9em;
|
fill: nb-theme(text-hint-color);
|
||||||
color: $subheader-color;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
rect.card-background {
|
||||||
display: flex;
|
fill: nb-theme(background-basic-color-2);
|
||||||
text-align: center;
|
stroke: nb-theme(border-basic-color-5);
|
||||||
}
|
|
||||||
|
|
||||||
.json-container {
|
|
||||||
font-weight: bold;
|
|
||||||
div {
|
|
||||||
margin: 0 1em;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.headers-container {
|
rect.subcard-background {
|
||||||
height: 2.5rem;
|
fill: nb-theme(background-basic-color-1);
|
||||||
|
|
||||||
& > .header {
|
|
||||||
font-size: 0.9em;
|
|
||||||
height: 0.9rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
& > .subheader {
|
|
||||||
font-size: 0.7em;
|
|
||||||
height: 0.7rem;
|
|
||||||
color: $subheader-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dashboard-container {
|
path.subcard-border {
|
||||||
width: 40%;
|
fill: nb-theme(background-basic-color-2);
|
||||||
}
|
stroke: nb-theme(border-basic-color-5);
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,8 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-backend-integration-diagram',
|
selector: 'ngx-backend-integration-diagram',
|
||||||
templateUrl: './backend-integration-diagram.component.html',
|
templateUrl: './backend-integration-diagram.component.html',
|
||||||
styleUrls: ['./backend-integration-diagram.component.scss'],
|
styleUrls: ['./backend-integration-diagram.component.scss'],
|
||||||
})
|
})
|
||||||
export class BackendIntegrationDiagramComponent implements OnInit {
|
export class BackendIntegrationDiagramComponent {}
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -8,27 +8,23 @@
|
||||||
padding: 1rem 2rem;
|
padding: 1rem 2rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.header, .header2 {
|
.h6 {
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subheader {
|
.subtitle {
|
||||||
font-size: 1rem;
|
margin-bottom: 3rem;
|
||||||
line-height: 1.5rem;
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.features-list {
|
.features-list {
|
||||||
list-style-type: none;
|
list-style-type: '- ';
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
width: fit-content;
|
width: auto;
|
||||||
|
align-self: flex-start;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,20 @@
|
||||||
import {Component, Input} from '@angular/core';
|
import {Component, Input} from '@angular/core';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'ngx-integration-description[features][url][buttonText]',
|
selector: 'ngx-integration-description',
|
||||||
template: `
|
template: `
|
||||||
<div class='header'> For why do you need a backend admin dashboard?</div>
|
<div class="h6"> For why do you need a backend admin dashboard?</div>
|
||||||
<div class='subheader'> To save up to 300 hours on development. To use backend as ready to use examples. </div>
|
<div class="subtitle"> To save up to 300 hours on development. To use backend as ready to use examples. </div>
|
||||||
<div class='header2'> Features </div>
|
<div class="h6"> Features </div>
|
||||||
<ul class='features-list'>
|
<ul class="features-list">
|
||||||
<li *ngFor='let feature of features'
|
<li *ngFor="let feature of features"
|
||||||
class='feature'
|
class="feature"
|
||||||
>
|
>
|
||||||
- {{ feature }}
|
{{ feature }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<a nbButton
|
<a nbButton
|
||||||
[href]='url'
|
[href]="url"
|
||||||
status="primary"
|
status="primary"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
> {{buttonText}} </a>
|
> {{buttonText}} </a>
|
||||||
|
|
@ -27,6 +27,4 @@ export class IntegrationDescriptionComponent {
|
||||||
@Input() url: string;
|
@Input() url: string;
|
||||||
@Input() buttonText: string;
|
@Input() buttonText: string;
|
||||||
|
|
||||||
constructor() { }
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
1
src/assets/images/backend-integration-diagram.svg
Normal file
1
src/assets/images/backend-integration-diagram.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 87 KiB |
Loading…
Add table
Add a link
Reference in a new issue