feat(demo): changed diagram to image

feat(demo): improved styles

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",

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],
 })

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;
 

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,

src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html

@@ -1,81 +1,2 @@
-<div class="flex-column justify-content-center">
+<div class="image" [inlineSVG]="'assets/images/backend-integration-diagram.svg'">
-  <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>

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 {
+  .canvas {
-      font-size: 0.9em;
+    width: 100%;
-      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;
     height: 100%;
   }
 
-  .item {
+  ::ng-deep svg {
-    background-color: nb-theme(background-basic-color-1);
+    path.card-header, path.subcard-header, path.diagram-header {
-    justify-content: center;
+      fill: nb-theme(text-basic-color);
-    padding: 0.5em 0;
-    flex-direction: column;
-    & > .header {
-      font-size: 0.7em;
-      font-weight: bold;
-      line-height: 1.1em;
     }
-    & > .subheader {
+
-      font-size: 0.6em;
+    path.card-subheader, path.subcard-subheader, path.diagram-subheader {
-      color: $subheader-color;
+      fill: nb-theme(text-hint-color);
-      line-height: 1em;
+    }
-      flex-direction: column;
+
-      align-items: center;
+    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);
     }
   }
 }

src/app/pages/backend-integration/integration-description/integration-description.component.scss

@@ -9,16 +9,12 @@
   width: 100%;
   height: 100%;
 
-  .header, .header2 {
+  .h6 {
-    font-weight: bold;
-    font-size: 1.25rem;
     margin-bottom: 1rem;
   }
 
-  .subheader {
+  .subtitle {
-    font-size: 1rem;
+    margin-bottom: 3rem;
-    line-height: 1.5rem;
-    margin-bottom: 5rem;
   }
 
   .features-list {

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: `
-    <div class="header"> For why do you need a backend admin dashboard?</div>
+    <div class="h6"> 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="subtitle"> 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"> Features </div>
     <ul class="features-list">
       <li *ngFor="let feature of features"
            class="feature"