From 3d13bcb5099e53476c3cfa9841093c6c8cd951f4 Mon Sep 17 00:00:00 2001
From: Sergey Filinsky <s.filinsky@akveo.com>
Date: Mon, 21 Sep 2020 16:16:55 +0300
Subject: [PATCH] feat(demo): cleared code

---
 .../backend-integration.component.scss        |  16 +--
 ...backend-integration-diagram.component.html | 100 +++++++++---------
 ...backend-integration-diagram.component.scss |  18 ++--
 .../backend-integration-diagram.component.ts  |  11 +-
 .../integration-description.component.scss    |   3 +-
 .../integration-description.component.ts      |  20 ++--
 6 files changed, 78 insertions(+), 90 deletions(-)

diff --git a/src/app/pages/backend-integration/backend-integration.component.scss b/src/app/pages/backend-integration/backend-integration.component.scss
index e30822b7..6278f9bb 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;
@@ -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;
         }
       }
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..5e461abb 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,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>
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..46f43021 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,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%;
   }
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..4e39664e 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,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;
   }
 
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..2382a426 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: `
-    <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() { }
-
 }