mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(demo): changed diagram to image
feat(demo): improved styles
This commit is contained in:
Sergey Filinsky
parent
cdd42c9d7c
commit
268e5cfb1b
9 changed files with 40 additions and 178 deletions
|
|
@ -61,8 +61,8 @@
|
|||
"chart.js": "2.7.1",
|
||||
"ckeditor": "4.7.3",
|
||||
"classlist.js": "1.1.20150312",
|
||||
"core-js": "2.5.1",
|
||||
"colors.js": "1.2.4",
|
||||
"core-js": "2.5.1",
|
||||
"echarts": "^4.0.2",
|
||||
"eva-icons": "^1.1.3",
|
||||
"gulp-bump": "2.7.0",
|
||||
|
|
@ -72,12 +72,13 @@
|
|||
"leaflet": "1.2.0",
|
||||
"marked": "^0.5.2",
|
||||
"nebular-icons": "1.1.0",
|
||||
"ng-inline-svg": "^11.0.0",
|
||||
"ng-lazyload-image": "^7.1.0",
|
||||
"ng2-ckeditor": "^1.2.9",
|
||||
"ng2-smart-table": "^1.6.0",
|
||||
"ngx-echarts": "^4.2.2",
|
||||
"node-sass": "^4.12.0",
|
||||
"ngx-swiper-wrapper": "^9.0.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"normalize.css": "6.0.0",
|
||||
"pace-js": "1.0.2",
|
||||
"roboto-fontface": "0.8.0",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import {
|
|||
NbToastrModule,
|
||||
NbWindowModule,
|
||||
} from '@nebular/theme';
|
||||
import {InlineSVGModule} from 'ng-inline-svg';
|
||||
|
||||
@NgModule({
|
||||
declarations: [AppComponent],
|
||||
|
|
@ -39,6 +40,7 @@ import {
|
|||
}),
|
||||
CoreModule.forRoot(),
|
||||
ThemeModule.forRoot(),
|
||||
InlineSVGModule.forRoot(),
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
.diagram-container {
|
||||
flex: 2 1 auto;
|
||||
align-items: center;
|
||||
min-width: 35rem;
|
||||
min-width: 30rem;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
flex: 1 1 auto;
|
||||
flex: 1 2 auto;
|
||||
max-width: 45rem;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
|
@ -35,7 +35,6 @@
|
|||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: fit-content;
|
||||
|
||||
.diagram-container, .description-container {
|
||||
width: 100%;
|
||||
|
|
@ -51,10 +50,8 @@
|
|||
}
|
||||
|
||||
.diagram-container {
|
||||
padding-bottom: 1.5rem;
|
||||
min-width: 0;
|
||||
::ng-deep ngx-backend-integration-diagram {
|
||||
font-size: 2vw;
|
||||
height: fit-content;
|
||||
padding-top: 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,
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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 class="image" [inlineSVG]="'assets/images/backend-integration-diagram.svg'">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,6 @@
|
|||
height: 0;
|
||||
position: relative;
|
||||
padding-top: 80%; /* Aspect Ratio */
|
||||
font-size: 0.9vw;
|
||||
|
||||
$subheader-color: nb-theme(text-hint-color);
|
||||
|
||||
.header, .subheader {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
& > div {
|
||||
position: absolute;
|
||||
|
|
@ -20,85 +13,34 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& > .header {
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& > .subheader {
|
||||
font-size: 0.9em;
|
||||
color: $subheader-color;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.json-container {
|
||||
font-weight: bold;
|
||||
|
||||
nb-icon {
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.headers-container {
|
||||
height: 2.5rem;
|
||||
|
||||
& > .header {
|
||||
font-size: 0.9em;
|
||||
height: 0.9rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
& > .subheader {
|
||||
font-size: 0.7em;
|
||||
height: 0.7rem;
|
||||
color: $subheader-color;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.backend-container {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.border-dashed {
|
||||
border: 2px dashed nb-theme(border-basic-color-4);
|
||||
}
|
||||
|
||||
.pad1 {
|
||||
background-color: nb-theme(color-basic-transparent-100);
|
||||
padding: 1em;
|
||||
.canvas {
|
||||
width: 100%;
|
||||
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;
|
||||
::ng-deep svg {
|
||||
path.card-header, path.subcard-header, path.diagram-header {
|
||||
fill: nb-theme(text-basic-color);
|
||||
}
|
||||
& > .subheader {
|
||||
font-size: 0.6em;
|
||||
color: $subheader-color;
|
||||
line-height: 1em;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
path.card-subheader, path.subcard-subheader, path.diagram-subheader {
|
||||
fill: nb-theme(text-hint-color);
|
||||
}
|
||||
|
||||
rect.card-background {
|
||||
fill: nb-theme(background-basic-color-2);
|
||||
stroke: nb-theme(border-basic-color-5);
|
||||
}
|
||||
|
||||
rect.subcard-background {
|
||||
fill: nb-theme(background-basic-color-1);
|
||||
}
|
||||
|
||||
path.subcard-border {
|
||||
fill: nb-theme(background-basic-color-2);
|
||||
stroke: nb-theme(border-basic-color-5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,20 +9,16 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.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: '-';
|
||||
list-style-type: '- ';
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import {Component, Input} from '@angular/core';
|
|||
@Component({
|
||||
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>
|
||||
<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"
|
||||
|
|
|
|||
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: 144 KiB |
Loading…
Add table
Add a link
Reference in a new issue