mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-18 00:10:14 +01:00
feat(bundles): fixes and adjustments
This commit is contained in:
Dmitry Nehaychik
parent
631a856200
commit
841d57d0ec
11 changed files with 99 additions and 84 deletions
|
|
@ -4,7 +4,9 @@
|
|||
|
||||
<div class="section-container">
|
||||
|
||||
<p class="features__description">Akveo new product created after a number of community and clients requests. We did all backend integration in ngx-admin for you! Now you can buy a complete UI + backend solution based on the backend framework of choice to use it as a template for your solution implementation.
|
||||
<p class="features__description">
|
||||
Looking for a way to integrate Angular ngx-admin with .NET, Ruby, Python or PHP? We are here to save your time on painful setup, configuration and routing tasks.
|
||||
Choose starter kit bundle based on a technology of your choice below.
|
||||
</p>
|
||||
|
||||
<div class="package-switcher">
|
||||
|
|
@ -25,9 +27,6 @@
|
|||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net"></div>
|
||||
<h4 class="package-card__title">{{ ecomName }}</h4>
|
||||
<h4 class="package-card__title">{{ netName }}</h4>
|
||||
|
|
@ -39,10 +38,8 @@
|
|||
<span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
|
||||
</div>
|
||||
<a [href]="firstBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
nbButton>
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
|
|
@ -52,12 +49,10 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="firstBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
nbButton>
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
|
|
@ -70,9 +65,6 @@
|
|||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net"></div>
|
||||
<h4 class="package-card__title">{{ iotName }}</h4>
|
||||
<h4 class="package-card__title">{{ netName }}</h4>
|
||||
|
|
@ -84,7 +76,6 @@
|
|||
<span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
|
||||
</div>
|
||||
<a [href]="secondBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
|
|
@ -97,12 +88,9 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="secondBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
nbButton>
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
|
|
@ -115,9 +103,6 @@
|
|||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link package-card__demo-link--secondary">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net-core"></div>
|
||||
<h4 class="package-card__title">{{ ecomName }}</h4>
|
||||
<h4 class="package-card__title">{{ netCoreName }}</h4>
|
||||
|
|
@ -129,10 +114,8 @@
|
|||
<span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
|
||||
</div>
|
||||
<a [href]="thirdBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
nbButton>
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
|
|
@ -142,7 +125,6 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="thirdBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
|
|
@ -160,9 +142,6 @@
|
|||
<nb-card-front class="package-card package-card--front">
|
||||
<nb-card>
|
||||
<nb-card-body>
|
||||
<div class="package-card__header">
|
||||
<span class="package-card__demo-link package-card__demo-link--secondary">Coming soon</span>
|
||||
</div>
|
||||
<div class="package-card__image package-card__image--dot-net-core"></div>
|
||||
<h4 class="package-card__title">{{ iotName }}</h4>
|
||||
<h4 class="package-card__title">{{ netCoreName }}</h4>
|
||||
|
|
@ -174,10 +153,8 @@
|
|||
<span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
|
||||
</div>
|
||||
<a [href]="fourthBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
nbButton>
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
|
|
@ -187,12 +164,9 @@
|
|||
<nb-card>
|
||||
<nb-card-body>
|
||||
<h4 class="package-card__type">{{ selectedLicenseType }}</h4>
|
||||
<ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
|
||||
<a [href]="fourthBundleMail"
|
||||
target="_blank"
|
||||
class="package-card__buy-link btn btn-demo"
|
||||
nbButton
|
||||
(click)="stopPropagation($event)">
|
||||
nbButton>
|
||||
Buy now
|
||||
</a>
|
||||
</nb-card-body>
|
||||
|
|
@ -209,7 +183,7 @@
|
|||
<th>COMMERCIAL</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">NGX Admin template with 100+ UI components integrated with Backend</td>
|
||||
<td class="left">ngx-admin template with 100+ UI components integrated with Backend Services</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
|
|
@ -222,7 +196,7 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left">.NET backend Services and Repository layers with data access</td>
|
||||
<td class="left">Backend Services and Repository layers with data access</td>
|
||||
<td>
|
||||
<ul class="included">
|
||||
<li class="included__item"></li>
|
||||
|
|
@ -288,19 +262,31 @@
|
|||
</tr>
|
||||
</table>
|
||||
|
||||
<ngx-landing-description-section *ngIf="descriptions" [descriptions]="descriptions" ></ngx-landing-description-section>
|
||||
<div class="request-code-section">
|
||||
<a href="mailto:support@akveo.com?subject=Bundle code sample request" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
REQUEST CODE SAMPLE
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<ngx-landing-description-section *ngIf="descriptions" [descriptions]="descriptions" ></ngx-landing-description-section>
|
||||
|
||||
<ngx-landing-section-title>
|
||||
Architecture Design
|
||||
</ngx-landing-section-title>
|
||||
|
||||
<p class="features__description">The schema describes the idea of how backend part of the .NET solution is organized.
|
||||
</p>
|
||||
<p class="features__description">The schema describes high-level solution architecture.</p>
|
||||
|
||||
<picture class="bundle-scheme">
|
||||
<source type="image/webp" srcset="/assets/img/bundle-scheme@1x.webp 1x, /assets/img/bundle-scheme@2x.webp 2x">
|
||||
<img class="bundle-scheme__image" src="/assets/img/bundle-scheme@1x.png" srcset="/assets/img/bundle-scheme@2x.png 2x" alt="Backend bundles">
|
||||
</picture>
|
||||
|
||||
<p class="features__description">Need more details or have a question?</p>
|
||||
|
||||
<div class="request-code-section">
|
||||
<a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn btn-demo" nbButton>
|
||||
CONTACT US
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
display: none;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 2.5rem auto;
|
||||
margin: 2.5rem auto 5rem;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
|
|
@ -184,7 +184,6 @@
|
|||
justify-content: flex-start;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
cursor: pointer;
|
||||
|
||||
&--front {
|
||||
text-align: center;
|
||||
|
|
@ -310,7 +309,6 @@
|
|||
border: solid #00db92;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
// ff3d71
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -353,6 +351,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
.request-code-section {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xl) {
|
||||
.section-container {
|
||||
padding-left: 1rem;
|
||||
|
|
@ -404,11 +406,6 @@
|
|||
padding: 1rem;
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: lighter;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
td ul {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*/
|
||||
|
||||
import { Component, OnDestroy } from '@angular/core';
|
||||
import { AfterViewInit, Component, ElementRef, Inject, OnDestroy } from '@angular/core';
|
||||
import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
|
||||
import { takeWhile } from 'rxjs/operators';
|
||||
import { delay, filter, take, takeWhile } from 'rxjs/operators';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { NB_WINDOW } from '@nebular/theme';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-backend-bundles-section',
|
||||
|
|
@ -14,15 +16,11 @@ import { takeWhile } from 'rxjs/operators';
|
|||
styleUrls: ['./backend-bundles-section.component.scss'],
|
||||
})
|
||||
|
||||
export class BackendBundlesSectionComponent implements OnDestroy {
|
||||
export class BackendBundlesSectionComponent implements OnDestroy, AfterViewInit {
|
||||
|
||||
private alive = true;
|
||||
descriptions: Descriptions[];
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
|
||||
selectedLicenseType = 'Personal';
|
||||
personalLicense = 'Personal';
|
||||
commercialLicense = 'Commercial';
|
||||
|
|
@ -30,15 +28,8 @@ export class BackendBundlesSectionComponent implements OnDestroy {
|
|||
ecomName = 'E-Commerce:';
|
||||
iotName = 'IoT:';
|
||||
|
||||
netName = '.NET + NGX Admin';
|
||||
netCoreName = '.NET Core + NGX Admin';
|
||||
|
||||
|
||||
constructor(private descriptionsService: DescriptionsService) {
|
||||
this.descriptionsService.getBundleDescriptions()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((descriptions) => this.descriptions = descriptions);
|
||||
}
|
||||
netName = '.NET + ngx-admin';
|
||||
netCoreName = '.NET Core + ngx-admin';
|
||||
|
||||
get firstBundleMail(): string {
|
||||
return this.getMailToText('.NET E-commerce');
|
||||
|
|
@ -61,14 +52,39 @@ export class BackendBundlesSectionComponent implements OnDestroy {
|
|||
thirdCardFlipped: boolean = false;
|
||||
fourthCardFlipped: boolean = false;
|
||||
|
||||
constructor(private descriptionsService: DescriptionsService,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private el: ElementRef<HTMLElement>,
|
||||
@Inject(NB_WINDOW) private window) {
|
||||
this.descriptionsService.getBundleDescriptions()
|
||||
.pipe(takeWhile(() => this.alive))
|
||||
.subscribe((descriptions) => this.descriptions = descriptions);
|
||||
}
|
||||
|
||||
stopPropagation(e) {
|
||||
e.stopPropagation();
|
||||
// e.stopPropagation();
|
||||
}
|
||||
|
||||
isCommercial() {
|
||||
return this.selectedLicenseType === 'Commercial';
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.activatedRoute.fragment
|
||||
.pipe(
|
||||
filter(fragment => fragment === 'backend-bundles'),
|
||||
delay(500),
|
||||
take(1),
|
||||
)
|
||||
.subscribe((fragment: string) => {
|
||||
this.window.scrollTo(0, this.el.nativeElement.offsetTop);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.alive = false;
|
||||
}
|
||||
|
||||
private getMailToText(bundleName: string) {
|
||||
return 'mailto:support@akveo.com' +
|
||||
`?subject=${this.selectedLicenseType} ${bundleName} Bundle` +
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue