mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-03-09 07:02:35 +01:00
Merge branch 'demo' into feat/ngx-premium-modal
This commit is contained in:
SFilinsky
GitHub
commit
c4be59be11
25 changed files with 81 additions and 236 deletions
|
|
@ -1,4 +1,5 @@
|
|||
@import '../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
:host {
|
||||
display: flex !important;
|
||||
|
|
@ -15,39 +16,43 @@
|
|||
.diagram-container {
|
||||
flex: 2 1 auto;
|
||||
align-items: center;
|
||||
min-width: 35rem;
|
||||
min-width: 30rem;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 2 auto;
|
||||
max-width: 45rem;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
& > *:not(router-outlet) {
|
||||
height: 100%;
|
||||
|
||||
::ng-deep :last-child {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 991px) {
|
||||
@include media-breakpoint-down(lg) {
|
||||
:host {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
height: fit-content;
|
||||
align-items: center;
|
||||
|
||||
.diagram-container {
|
||||
.diagram-container, .description-container {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
ngx-backend-integration-diagram {
|
||||
font-size: 2vw;
|
||||
height: 60vw;
|
||||
padding-top: 0;
|
||||
.description-container {
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
::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 { EcommerceIntegrationDescriptionComponent } from './descriptions/ecommerce-integration-description.component';
|
||||
import { IotIntegrationDescriptionComponent } from './descriptions/iot-integration-description.component';
|
||||
import {InlineSVGModule} from 'ng-inline-svg';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -23,6 +24,7 @@ import { IotIntegrationDescriptionComponent } from './descriptions/iot-integrati
|
|||
BackendIntegrationRoutingModule,
|
||||
NbIconModule,
|
||||
NbButtonModule,
|
||||
InlineSVGModule,
|
||||
],
|
||||
declarations: [
|
||||
BackendIntegrationComponent,
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
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';
|
||||
|
||||
features: string[] = [
|
||||
|
|
|
|||
|
|
@ -1,81 +1,2 @@
|
|||
<div class='flex-column justify-content-center'>
|
||||
<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 inlineSVG="assets/images/backend-integration-diagram.svg">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,107 +2,28 @@
|
|||
|
||||
@include nb-install-component() {
|
||||
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);
|
||||
|
||||
.header, .subheader {
|
||||
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;
|
||||
::ng-deep svg {
|
||||
path.card-header, path.subcard-header, path.diagram-header {
|
||||
fill: nb-theme(text-basic-color);
|
||||
}
|
||||
|
||||
& > .subheader {
|
||||
font-size: 0.9em;
|
||||
color: $subheader-color;
|
||||
path.card-subheader, path.subcard-subheader, path.diagram-subheader {
|
||||
fill: nb-theme(text-hint-color);
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.json-container {
|
||||
font-weight: bold;
|
||||
div {
|
||||
margin: 0 1em;
|
||||
rect.card-background {
|
||||
fill: nb-theme(background-basic-color-2);
|
||||
stroke: nb-theme(border-basic-color-5);
|
||||
}
|
||||
}
|
||||
|
||||
.headers-container {
|
||||
height: 2.5rem;
|
||||
|
||||
& > .header {
|
||||
font-size: 0.9em;
|
||||
height: 0.9rem;
|
||||
font-weight: bold;
|
||||
rect.subcard-background {
|
||||
fill: nb-theme(background-basic-color-1);
|
||||
}
|
||||
& > .subheader {
|
||||
font-size: 0.7em;
|
||||
height: 0.7rem;
|
||||
color: $subheader-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.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;
|
||||
path.subcard-border {
|
||||
fill: nb-theme(background-basic-color-2);
|
||||
stroke: nb-theme(border-basic-color-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,8 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-backend-integration-diagram',
|
||||
templateUrl: './backend-integration-diagram.component.html',
|
||||
styleUrls: ['./backend-integration-diagram.component.scss'],
|
||||
})
|
||||
export class BackendIntegrationDiagramComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
export class BackendIntegrationDiagramComponent {}
|
||||
|
|
|
|||
|
|
@ -8,27 +8,23 @@
|
|||
padding: 1rem 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header, .header2 {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
.h6 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.subheader {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
margin-bottom: 5rem;
|
||||
.subtitle {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.features-list {
|
||||
list-style-type: none;
|
||||
list-style-type: '- ';
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
width: fit-content;
|
||||
width: auto;
|
||||
align-self: flex-start;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'ngx-integration-description[features][url][buttonText]',
|
||||
selector: 'ngx-integration-description',
|
||||
template: `
|
||||
<div class='header'> 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='header2'> Features </div>
|
||||
<ul class='features-list'>
|
||||
<li *ngFor='let feature of features'
|
||||
class='feature'
|
||||
<div class="h6"> For why do you need a backend admin dashboard?</div>
|
||||
<div class="subtitle"> To save up to 300 hours on development. To use backend as ready to use examples. </div>
|
||||
<div class="h6"> Features </div>
|
||||
<ul class="features-list">
|
||||
<li *ngFor="let feature of features"
|
||||
class="feature"
|
||||
>
|
||||
- {{ feature }}
|
||||
{{ feature }}
|
||||
</li>
|
||||
</ul>
|
||||
<a nbButton
|
||||
[href]='url'
|
||||
[href]="url"
|
||||
status="primary"
|
||||
target="_blank"
|
||||
> {{buttonText}} </a>
|
||||
|
|
@ -26,7 +26,5 @@ export class IntegrationDescriptionComponent {
|
|||
@Input() features: string[];
|
||||
@Input() url: string;
|
||||
@Input() buttonText: string;
|
||||
|
||||
constructor() { }
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue