diff --git a/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html b/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html
index a69e1d6a..9364858d 100644
--- a/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html
+++ b/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html
@@ -2,8 +2,8 @@
ngx-admin
The most popular admin dashboard based on Angular 9+ and
- Nebular with
- Eva Design System support.
+ Nebular with
+ Eva Design System support.
Free and Open Source for personal and commercial purposes.
diff --git a/docs/app/pages/home/main-info-section/main-info-section.component.html b/docs/app/pages/home/main-info-section/main-info-section.component.html
index 1ad0c887..d3e487c0 100644
--- a/docs/app/pages/home/main-info-section/main-info-section.component.html
+++ b/docs/app/pages/home/main-info-section/main-info-section.component.html
@@ -35,7 +35,7 @@
Installation Docs
Demo
diff --git a/docs/app/pages/home/our-projects-section/our-projects-section.component.html b/docs/app/pages/home/our-projects-section/our-projects-section.component.html
index 8e45596a..8012e061 100644
--- a/docs/app/pages/home/our-projects-section/our-projects-section.component.html
+++ b/docs/app/pages/home/our-projects-section/our-projects-section.component.html
@@ -15,7 +15,7 @@
Nebular is a great toolkit if you build Rich UI web applications based on Angular. Complete with a set of native Angular components, themeable components, authentication and security layers that are easily configurable to your API. Nebular offers a world of possibilities
- Learn more
+ Learn more
@@ -30,7 +30,7 @@
Eva Icons is a pack of more than 480 beautifully crafted Open Source icons. Download for desktop and use them in your creations for Web, iOS, and Android. The icons are available in several formats: PNG, SVG, font, Sketch
- Learn more
+ Learn more
diff --git a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html
index 488e1269..4dc0dd6c 100644
--- a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html
+++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html
@@ -2,6 +2,8 @@
diff --git a/docs/app/pages/home/social-section/social-section.component.html b/docs/app/pages/home/social-section/social-section.component.html
index 29565cb4..e3d961e8 100644
--- a/docs/app/pages/home/social-section/social-section.component.html
+++ b/docs/app/pages/home/social-section/social-section.component.html
@@ -35,7 +35,7 @@
diff --git a/docs/app/pages/home/theme-section/theme-section.component.html b/docs/app/pages/home/theme-section/theme-section.component.html
index ceafb6d8..3f654c14 100644
--- a/docs/app/pages/home/theme-section/theme-section.component.html
+++ b/docs/app/pages/home/theme-section/theme-section.component.html
@@ -81,5 +81,5 @@
View demo
diff --git a/package-lock.json b/package-lock.json
index 717aabf5..0c896696 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16530,6 +16530,11 @@
"integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
"dev": true
},
+ "ng-inline-svg": {
+ "version": "11.0.0",
+ "resolved": "https://registry.npmjs.org/ng-inline-svg/-/ng-inline-svg-11.0.0.tgz",
+ "integrity": "sha512-D4dXt379cveaYJobu7JnYixZzw/+AqRkMGDqOrNhGDEiBgDaxb8DZ57mSg8V9ekTl3fK+H98p9SevhLSakzRkA=="
+ },
"ng-lazyload-image": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/ng-lazyload-image/-/ng-lazyload-image-7.1.0.tgz",
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 dc020830..718fad0e 100644
--- a/src/app/pages/backend-integration/backend-integration.component.scss
+++ b/src/app/pages/backend-integration/backend-integration.component.scss
@@ -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;
+ }
}
}
diff --git a/src/app/pages/backend-integration/backend-integration.module.ts b/src/app/pages/backend-integration/backend-integration.module.ts
index 783185a8..db7c9094 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/descriptions/dot-net-core-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts
index 1159df65..db5a3cc5 100644
--- a/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts
@@ -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[] = [
diff --git a/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts
index e04a974c..2063822e 100644
--- a/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts
@@ -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[] = [
diff --git a/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts
index e16a710d..0b1fbaac 100644
--- a/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts
@@ -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[] = [
diff --git a/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts
index a5534773..02f502eb 100644
--- a/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts
@@ -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[] = [
diff --git a/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts
index 66bd1f21..00f86939 100644
--- a/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts
@@ -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[] = [
diff --git a/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts
index b4a3cd10..d4622973 100644
--- a/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts
@@ -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[] = [
diff --git a/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts
index 3259d777..6e8d8ab9 100644
--- a/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts
@@ -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[] = [
diff --git a/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts
index 010388c5..eee9b390 100644
--- a/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts
+++ b/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts
@@ -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[] = [
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 1e5fd39e..21b8dd5b 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 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
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 28a285d7..a17d8d7e 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
@@ -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);
}
}
}
diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts
index 83249f5d..d7e181f7 100644
--- a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts
+++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts
@@ -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 {}
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 271ba5ea..f6b2733e 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
@@ -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;
}
}
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 d22f06cc..517d64bf 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
@@ -1,20 +1,20 @@
import {Component, Input} from '@angular/core';
@Component({
- selector: 'ngx-integration-description[features][url][buttonText]',
+ 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
+
+
- - {{ feature }}
+ {{ feature }}
{{buttonText}}
@@ -26,7 +26,5 @@ export class IntegrationDescriptionComponent {
@Input() features: string[];
@Input() url: string;
@Input() buttonText: string;
-
- constructor() { }
-
+
}
diff --git a/src/assets/images/backend-integration-diagram.svg b/src/assets/images/backend-integration-diagram.svg
new file mode 100644
index 00000000..0114e0cd
--- /dev/null
+++ b/src/assets/images/backend-integration-diagram.svg
@@ -0,0 +1 @@
+