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

feat(demo): cleared code

Browse source
This commit is contained in:
Sergey Filinsky 2020-09-21 16:16:55 +03:00
parent 6f0093f61b
commit 3d13bcb509
6 changed files with 78 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/app/pages/backend-integration/backend-integration.component.scss
View file

@ -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;
@ -24,39 +25,40 @@
align-items: stretch; align-items: stretch;
height: 100%; height: 100%;
::ng-deep & > *:last-child { ::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;
align-items: center;
height: fit-content; height: fit-content;
.diagram-container, .description-container { .diagram-container, .description-container {
width: 100%; width: 100%;
max-width: none; max-width: none;
min-width: 0;
height: fit-content;
margin: 0 auto;
} }
.description-container { .description-container {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
::ng-deep ngx-integration-description .subheader {
margin-bottom: 1.5rem;
}
} }
.diagram-container { .diagram-container {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
min-width: 0;
::ng-deep ngx-backend-integration-diagram { ::ng-deep ngx-backend-integration-diagram {
font-size: 2vw; font-size: 2vw;
height: fit-content; height: fit-content;
padding-top: 0; padding-top: 0;
& > * { & > * {
height: fit-content;
position: static !important; position: static !important;
} }
} }

100
src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html
View file

@ -1,73 +1,73 @@
<div class='flex-column justify-content-center'> <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 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 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="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="dashboard-container h-100 flex-column ml-3 mr-3">
<div class='headers-container flex-column'> <div class="headers-container flex-column">
<div class='header'> NGX-admin dashboard</div> <div class="header"> NGX-admin dashboard</div>
<div class='subheader'> Open source part + backend connection</div> <div class="subheader"> Open source part + backend connection</div>
</div> </div>
<div class='dashboard-content border-dashed pad1 flex-column justify-content-center'> <div class="dashboard-content border-dashed pad1 flex-column justify-content-center">
<div class='item mb-3'> <div class="item mb-3">
<div class='header'> REST Data Access</div> <div class="header"> REST Data Access</div>
</div> </div>
<div class='flex-column border-dashed mb-3 p-3'> <div class="flex-column border-dashed mb-3 p-3">
<div class='item mb-3'> <div class="item mb-3">
<div class='header'> Nebular Components</div> <div class="header"> Nebular Components</div>
</div> </div>
<div class='flex-row w-100'> <div class="flex-row w-100">
<div class='item flex-grow-1 mr-2'> <div class="item flex-grow-1 mr-2">
<div class='header'> Auth</div> <div class="header"> Auth</div>
</div> </div>
<div class='item flex-grow-1'> <div class="item flex-grow-1">
<div class='header'> Security</div> <div class="header"> Security</div>
</div> </div>
</div> </div>
</div> </div>
<div class='item mb-3'> <div class="item mb-3">
<div class='header'> Angular</div> <div class="header"> Angular</div>
</div> </div>
</div> </div>
</div> </div>
<div class='json-container mt-auto mb-auto header2 align-items-center'> <div class="json-container mt-auto mb-auto header2 align-items-center">
<nb-icon icon='arrow-back-outline'></nb-icon> <nb-icon icon="arrow-back-outline"></nb-icon>
<div>JSON</div> <div>JSON</div>
<nb-icon icon='arrow-forward-outline'></nb-icon> <nb-icon icon="arrow-forward-outline"></nb-icon>
</div> </div>
<div class='backend-container h-100 flex-column ml-3 mr-3'> <div class="backend-container h-100 flex-column ml-3 mr-3">
<div class='headers-container flex-column'> <div class="headers-container flex-column">
<div class='header justify-content-center'> Backend</div> <div class="header justify-content-center"> Backend</div>
</div> </div>
<div class='backend-content border-dashed pad1 flex-column justify-content-center'> <div class="backend-content border-dashed pad1 flex-column justify-content-center">
<div class='flex-column border-dashed mb-3 p-3'> <div class="flex-column border-dashed mb-3 p-3">
<div class='item mb-3'> <div class="item mb-3">
<div class='header'> Web API</div> <div class="header"> Web API</div>
<div class='subheader'> Backend Interface</div> <div class="subheader"> Backend Interface</div>
</div> </div>
<div class='item mb-3'> <div class="item mb-3">
<div class='header'> Service</div> <div class="header"> Service</div>
<div class='subheader'> Data organization Business logic</div> <div class="subheader"> Data organization Business logic</div>
</div> </div>
<div class='item'> <div class="item">
<div class='header'> Security</div> <div class="header"> Security</div>
<div class='subheader'> Authentication, Authorization</div> <div class="subheader"> Authentication, Authorization</div>
</div> </div>
</div> </div>
<div class='flex-row w-100'> <div class="flex-row w-100">
<div class='flex-column flex-grow-1 mr-3'> <div class="flex-column flex-grow-1 mr-3">
<div class='item mb-3'> <div class="item mb-3">
<div class='header'> Repository</div> <div class="header"> Repository</div>
<div class='subheader'> Data access</div> <div class="subheader"> Data access</div>
</div> </div>
<div class='item'> <div class="item">
<div class='header'> Entity Framework</div> <div class="header"> Entity Framework</div>
<div class='subheader'> Data transformation</div> <div class="subheader"> Data transformation</div>
</div> </div>
</div> </div>
<div class='item h-100 flex-grow-1 mr-3'> <div class="item h-100 flex-grow-1">
<div class='item'> <div class="item">
<div class='header'> Data Base</div> <div class="header"> Data Base</div>
<div class='subheader'> <div class="subheader">
<div>Data of product</div> <div>Data of product</div>
<div>+</div> <div>+</div>
<div>Backend data (examples)</div> <div>Backend data (examples)</div>

18
src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss
View file

@ -5,7 +5,6 @@
height: 0; height: 0;
position: relative; position: relative;
padding-top: 80%; /* Aspect Ratio */ padding-top: 80%; /* Aspect Ratio */
//background-color: transparentize(red, 0.8);
font-size: 0.9vw; font-size: 0.9vw;
$subheader-color: nb-theme(text-hint-color); $subheader-color: nb-theme(text-hint-color);
@ -40,6 +39,12 @@
.json-container { .json-container {
font-weight: bold; font-weight: bold;
nb-icon {
width: 0.75em;
height: 0.75em;
}
div { div {
margin: 0 1em; margin: 0 1em;
} }
@ -64,15 +69,6 @@
width: 40%; width: 40%;
} }
.json-container {
width: fit-content;
nb-icon {
width: 0.75em;
height: 0.75em;
}
}
.backend-container { .backend-container {
width: 40%; width: 40%;
} }
@ -82,7 +78,7 @@
} }
.pad1 { .pad1 {
background-color: transparentize(nb-theme(background-basic-color-2), 0.5); background-color: nb-theme(color-basic-transparent-100);
padding: 1em; padding: 1em;
height: 100%; height: 100%;
} }

11
src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts
View file

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

3
src/app/pages/backend-integration/integration-description/integration-description.component.scss
View file

@ -8,7 +8,6 @@
padding: 1rem 2rem; padding: 1rem 2rem;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
.header, .header2 { .header, .header2 {
font-weight: bold; font-weight: bold;
@ -23,7 +22,7 @@
} }
.features-list { .features-list {
list-style-type: none; list-style-type: '-';
padding-left: 0; padding-left: 0;
} }

20
src/app/pages/backend-integration/integration-description/integration-description.component.ts
View file

@ -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="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="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="header2"> 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() { }
} }