diff --git a/package.json b/package.json index 436a8b78..bc2dfc22 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d55f48ee..dabd611e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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], }) diff --git a/src/app/pages/backend-integration/backend-integration.component.scss b/src/app/pages/backend-integration/backend-integration.component.scss index 6278f9bb..a567b7fc 100644 --- a/src/app/pages/backend-integration/backend-integration.component.scss +++ b/src/app/pages/backend-integration/backend-integration.component.scss @@ -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; diff --git a/src/app/pages/backend-integration/backend-integration.module.ts b/src/app/pages/backend-integration/backend-integration.module.ts index 783185a8..a40a1e06 100644 --- a/src/app/pages/backend-integration/backend-integration.module.ts +++ b/src/app/pages/backend-integration/backend-integration.module.ts @@ -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, diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html index 5e461abb..aa10677b 100644 --- a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html +++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html @@ -1,81 +1,2 @@ -
-
What is admin dashboard with backend
-
You pay for backend connection (UI) + backend
-
-
-
-
NGX-admin dashboard
-
Open source part + backend connection
-
-
-
-
REST Data Access
-
-
-
-
Nebular Components
-
-
-
-
Auth
-
-
-
Security
-
-
-
-
-
Angular
-
-
-
-
- -
JSON
- -
-
-
-
Backend
-
-
-
-
-
Web API
-
Backend Interface
-
-
-
Service
-
Data organization Business logic
-
-
-
Security
-
Authentication, Authorization
-
-
-
-
-
-
Repository
-
Data access
-
-
-
Entity Framework
-
Data transformation
-
-
-
-
-
Data Base
-
-
Data of product
-
+
-
Backend data (examples)
-
-
-
-
-
-
-
+
diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss index 46f43021..00dad174 100644 --- a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss +++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss @@ -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); } } } diff --git a/src/app/pages/backend-integration/integration-description/integration-description.component.scss b/src/app/pages/backend-integration/integration-description/integration-description.component.scss index 4e39664e..1f2b435f 100644 --- a/src/app/pages/backend-integration/integration-description/integration-description.component.scss +++ b/src/app/pages/backend-integration/integration-description/integration-description.component.scss @@ -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; } diff --git a/src/app/pages/backend-integration/integration-description/integration-description.component.ts b/src/app/pages/backend-integration/integration-description/integration-description.component.ts index 2382a426..ccfadccf 100644 --- a/src/app/pages/backend-integration/integration-description/integration-description.component.ts +++ b/src/app/pages/backend-integration/integration-description/integration-description.component.ts @@ -3,9 +3,9 @@ import {Component, Input} from '@angular/core'; @Component({ selector: 'ngx-integration-description', template: ` -
For why do you need a backend admin dashboard?
-
To save up to 300 hours on development. To use backend as ready to use examples.
-
Features
+
For why do you need a backend admin dashboard?
+
To save up to 300 hours on development. To use backend as ready to use examples.
+
Features