Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 16:00:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(bundles): fixes and adjustments

Browse source
This commit is contained in:
Dmitry Nehaychik 2019-02-05 21:03:35 +03:00
parent 631a856200
commit 841d57d0ec
11 changed files with 99 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

5
docs/app/@core/data/service/header-menu.service.ts
View file

@ -11,11 +11,6 @@ export class HeaderMenuService {
title: 'Home',
link: '/',
},
{
title: 'Backend Bundles',
link: '/',
fragment: 'backend-bundles',
},
{
title: 'Docs',
link: '/docs',

4
docs/app/@theme/components/header/header.component.html
View file

@ -9,6 +9,10 @@
</div>
<div class="section middle">
<nb-menu [items]="headerMenu"></nb-menu>
<a routerLink="/" fragment="backend-bundles" class="backend-bundles eva-parent-hover">
<i [innerHTML]="'gift-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"></i>
<span>Backend Bundles</span>
</a>
</div>
<div class="section right">

35
docs/app/@theme/components/header/header.component.scss
View file

@ -55,6 +55,16 @@
}
}
.backend-bundles {
display: flex;
align-items: center;
padding-right: 2rem;
i {
margin-right: 0.5rem;
}
}
/deep/ nb-menu {
flex: 1;
@ -87,6 +97,7 @@
.section.right {
color: $contacts-fg;
display: none;
a {
font-family: nb-theme(font-main), sans-serif;
@ -141,6 +152,9 @@
display: list-item;
}
}
.section.right {
display: block;
}
}
@include media-breakpoint-up(xl) {
@ -156,12 +170,6 @@
justify-content: flex-end;
}
}
.section {
&.right {
display: none;
}
}
}
@include media-breakpoint-down(is) {
@ -189,6 +197,11 @@
}
&.docs-page {
.backend-bundles {
display: none;
}
.section {
&.left {
align-items: center;
@ -237,15 +250,14 @@
justify-content: space-between;
}
.section.right {
display: block;
}
.stars {
width: 7.5rem;
height: 1.25rem;
margin-left: auto;
}
.backend-bundles {
display: flex;
}
}
@include media-breakpoint-up(lg) {
@ -259,6 +271,9 @@
display: list-item;
}
}
.section.right {
display: block;
}
}
@include media-breakpoint-up(xl) {

2
docs/app/@theme/styles/themes.scss
View file

@ -56,7 +56,7 @@ $nb-themes: nb-register-theme((
layout-medium-padding: 0,
layout-small-padding: 0,
header-bg: color-bg,
header-bg: #fafafa,
header-padding: 0 0,
header-height: 4.25rem,
header-fg: color-fg,

2
docs/app/app-routing.module.ts
View file

@ -15,6 +15,8 @@ const routes: Routes = [
const config: ExtraOptions = {
useHash: false,
anchorScrolling: 'enabled',
onSameUrlNavigation: 'reload',
scrollPositionRestoration: 'enabled',
};
@NgModule({

66
docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
View file

@ -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>

13
docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss
View file

@ -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;

50
docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
View file

@ -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` +

2
docs/app/pages/home/description-section/description-section.component.scss
View file

@ -15,7 +15,7 @@
display: flex;
margin: 0 auto;
position: relative;
top: -3.25rem;
margin-bottom: 5rem;
.descriptions {
flex: 1;

2
docs/app/pages/home/landing-home.component.html
View file

@ -1,5 +1,5 @@
<nb-layout>
<nb-layout-header>
<nb-layout-header fixed>
<ngx-landing-header></ngx-landing-header>
</nb-layout-header>

2
docs/app/pages/home/landing-home.component.scss
View file

@ -32,7 +32,7 @@
/deep/ nb-layout-header {
box-shadow: nb-theme(shadow-default);
background: nb-theme(header-bg);
nav {
max-width: calc(#{$content-width} - 8.125rem * 2);
margin: 0 auto;