mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 15:40:11 +01:00
feat(demo): cleared code
This commit is contained in:
Sergey Filinsky
parent
6f0093f61b
commit
3d13bcb509
6 changed files with 78 additions and 90 deletions
|
|
@ -1,4 +1,5 @@
|
|||
@import '../../@theme/styles/themes';
|
||||
@import '~@nebular/theme/styles/global/breakpoints';
|
||||
|
||||
:host {
|
||||
display: flex !important;
|
||||
|
|
@ -24,39 +25,40 @@
|
|||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
::ng-deep & > *:last-child {
|
||||
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;
|
||||
align-items: center;
|
||||
height: fit-content;
|
||||
|
||||
.diagram-container, .description-container {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
height: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
::ng-deep ngx-integration-description .subheader {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.diagram-container {
|
||||
padding-bottom: 1.5rem;
|
||||
min-width: 0;
|
||||
::ng-deep ngx-backend-integration-diagram {
|
||||
font-size: 2vw;
|
||||
height: fit-content;
|
||||
padding-top: 0;
|
||||
|
||||
& > * {
|
||||
height: fit-content;
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,73 @@
|
|||
<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 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 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 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 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 class="item flex-grow-1">
|
||||
<div class="header"> Security</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='item mb-3'>
|
||||
<div class='header'> Angular</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 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>
|
||||
<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 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 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 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 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 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 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 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>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
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);
|
||||
|
|
@ -40,6 +39,12 @@
|
|||
|
||||
.json-container {
|
||||
font-weight: bold;
|
||||
|
||||
nb-icon {
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0 1em;
|
||||
}
|
||||
|
|
@ -64,15 +69,6 @@
|
|||
width: 40%;
|
||||
}
|
||||
|
||||
.json-container {
|
||||
width: fit-content;
|
||||
|
||||
nb-icon {
|
||||
width: 0.75em;
|
||||
height: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.backend-container {
|
||||
width: 40%;
|
||||
}
|
||||
|
|
@ -82,7 +78,7 @@
|
|||
}
|
||||
|
||||
.pad1 {
|
||||
background-color: transparentize(nb-theme(background-basic-color-2), 0.5);
|
||||
background-color: nb-theme(color-basic-transparent-100);
|
||||
padding: 1em;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,7 +8,6 @@
|
|||
padding: 1rem 2rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.header, .header2 {
|
||||
font-weight: bold;
|
||||
|
|
@ -23,7 +22,7 @@
|
|||
}
|
||||
|
||||
.features-list {
|
||||
list-style-type: none;
|
||||
list-style-type: '-';
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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="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"
|
||||
>
|
||||
- {{ feature }}
|
||||
{{ feature }}
|
||||
</li>
|
||||
</ul>
|
||||
<a nbButton
|
||||
[href]='url'
|
||||
[href]="url"
|
||||
status="primary"
|
||||
target="_blank"
|
||||
> {{buttonText}} </a>
|
||||
|
|
@ -27,6 +27,4 @@ export class IntegrationDescriptionComponent {
|
|||
@Input() url: string;
|
||||
@Input() buttonText: string;
|
||||
|
||||
constructor() { }
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue