From f1cc84e5ea4a8d1f16257c2fc0f6335ada4b34bb Mon Sep 17 00:00:00 2001
From: "u.ahmetvaliyev" <ahmetvaliev.vladislav@gmail.com>
Date: Wed, 23 Jan 2019 15:40:42 +0300
Subject: [PATCH] fix(landing): fix IE/Firefox bugs, switcher, mailto

---
 .../backend-bundles-section.component.html    | 17 +++---
 .../backend-bundles-section.component.scss    | 45 ++++++++++++---
 .../backend-bundles-section.component.ts      | 57 +++++++++----------
 .../description-section.component.scss        |  1 +
 4 files changed, 72 insertions(+), 48 deletions(-)

diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
index a6003b82..d8001541 100644
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
@@ -6,7 +6,7 @@
   <ul class="features">
     <li class="features__item">
       <h3 class="features__title title">Convenient</h3>
-      <p class="features__description">Complete pack of well known Angular based NGX Admin template, integrated with Backend Solution. Finally, you can get fully backend integrated solution out of the box. Flexibility of Ngx Admin, the variety of Nebular features and convenience of integrated Backend in one pack.
+      <p class="features__description">Complete pack of well known Angular based ngx-admin template, integrated with Backend Solution. Finally, you can get fully backend integrated solution out of the box. Flexibility of Ngx Admin, the variety of Nebular features and convenience of integrated Backend in one pack.
       </p>
     </li>
     <li class="features__item">
@@ -25,13 +25,12 @@
 
   <div class="package-switcher">
     <div [(ngModel)]="licenseType" ngbRadioGroup
-         #selectedLicense="ngModel"
          class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
       <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
-        <input ngbButton type="radio" value="personal" name="1"> Personal
+        <input ngbButton type="radio" value="Personal"> Personal
       </label>
       <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
-        <input ngbButton type="radio" value="commercial" name="2"> Commercial
+        <input ngbButton type="radio" value="Commercial"> Commercial
       </label>
     </div>
   </div>
@@ -50,7 +49,7 @@
                 <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span>
                 <span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span>
               </div>
-              <h4 class="package-card__title">{{ firstBundleName }} + NGX Admin</h4>
+              <h4 class="package-card__title">{{ firstBundleName }}</h4>
               <p class="package-card__description">
                 E-commerce Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
               </p>
@@ -94,7 +93,7 @@
                 <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span>
                 <span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span>
               </div>
-              <h4 class="package-card__title">{{ secondBundleName }} + NGX Admin</h4>
+              <h4 class="package-card__title">{{ secondBundleName }}</h4>
               <p class="package-card__description">
                 IoT Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
               </p>
@@ -138,7 +137,7 @@
                 <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span>
                 <span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span>
               </div>
-              <h4 class="package-card__title">{{ thirdBundleName }} + NGX Admin</h4>
+              <h4 class="package-card__title">{{ thirdBundleName }}</h4>
               <p class="package-card__description">
                 E-commerce Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
               </p>
@@ -182,7 +181,7 @@
                 <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span>
                 <span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span>
               </div>
-              <h4 class="package-card__title">{{ fourthBundleName }} + NGX Admin</h4>
+              <h4 class="package-card__title">{{ fourthBundleName }}</h4>
               <p class="package-card__description">
                 IoT Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
               </p>
@@ -218,7 +217,7 @@
 <ng-template #bundleFeaturesList>
   <ul class="included">
     <li class="included__item">
-      <p class="included__text">NGX Admin admin template with 100+ UI components integrated with Backend</p>
+      <p class="included__text">ngx-admin template with 100+ UI components integrated with Backend</p>
     </li>
     <li class="included__item">
       <p class="included__text">.NET backend Services and Repository layers with data access</p>
diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss
index ab2b17bd..19734c76 100644
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss
@@ -28,14 +28,17 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    padding: 0;
+    padding: 0 11px;
     margin-top: 5rem;
     margin-left: -11px;
     margin-right: -11px;
+    width: 100%;
+    width: calc(100% + 22px);
 
     &__item {
       flex: 0 0 25%;
       width: 25%;
+      max-width: 25%;
       display: flex;
       flex-direction: column;
       text-align: center;
@@ -68,6 +71,15 @@
 
     &__btn-group {
       box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5);
+      border-radius: 1.5rem;
+      &:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):first-child {
+        border-top-left-radius: 1.5rem;
+        border-bottom-left-radius: 1.5rem;
+      }
+      &:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):last-child {
+        border-top-right-radius: 1.5rem;
+        border-bottom-right-radius: 1.5rem;
+      }
     }
 
     &__btn {
@@ -76,6 +88,7 @@
       border-color: #e6e8eb;
       text-transform: none;
       cursor: pointer;
+
       &:active {
         color: #ffffff;
       }
@@ -94,15 +107,19 @@
     margin-left: -11px;
     margin-right: -11px;
     margin-bottom: 4rem;
+    width: 100%;
+    width: calc(100% + 22px);
 
     &__item {
       flex: 0 0 25%;
       width: 25%;
+      max-width: 25%;
       display: flex;
       flex-direction: column;
       list-style: none;
       padding-left: 11px;
       padding-right: 11px;
+      margin-bottom: 22px;
     }
   }
 
@@ -187,10 +204,10 @@
       background-position: center center;
       background-size: auto 100%;
       &--dot-net {
-        background-image: url('/assets/img/bundle-dot-net.png');
+        background-image: url('assets/img/bundle-dot-net.png');
       }
       &--dot-net-core {
-        background-image: url('/assets/img/bundle-dot-net-core.png');
+        background-image: url('assets/img/bundle-dot-net-core.png');
       }
     }
     &__price-wrapper {
@@ -284,26 +301,31 @@
   }
 
   @include media-breakpoint-down(xl) {
-
-    .features {
-      width: 100%;
+    .section-container {
       padding-left: 1rem;
       padding-right: 1rem;
+    }
+
+    .features {
+      padding-left: 11px;
+      padding-right: 11px;
 
       &__item {
         flex-basis: 50%;
         width: 50%;
+        max-width: 50%;
       }
     }
 
     .packages {
-      width: 100%;
-      padding-left: 1rem;
-      padding-right: 1rem;
+      padding-left: 11px;
+      padding-right: 11px;
 
       &__item {
         flex-basis: 50%;
         width: 50%;
+        max-width: 50%;
+        margin-bottom: 1.625rem;
       }
     }
   }
@@ -313,6 +335,7 @@
     .packages__item {
       flex-basis: 100%;
       width: 100%;
+      max-width: 100%;
     }
   }
 
@@ -321,6 +344,10 @@
     .features__item {
       flex-basis: 100%;
       width: 100%;
+      max-width: 100%;
+    }
+    .package-switcher__btn {
+      min-width: 8rem;
     }
   }
 }
diff --git a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
index 76a0ba4c..7fe7055f 100644
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
@@ -14,40 +14,28 @@ import { Component} from '@angular/core';
 
 export class BackendBundlesSectionComponent {
 
-  licenseType = 'commercial';
+  licenseType = 'Personal';
 
-  firstBundleName = 'E-commerce: .NET';
-  secondBundleName = 'IoT: .NET';
-  thirdBundleName = 'E-commerce: .NET Core';
-  fourthBundleName = 'IoT: .NET Core';
+  firstBundleName = '.NET + ngx-admin E-commerce';
+  secondBundleName = '.NET + ngx-admin IoT';
+  thirdBundleName = '.NET Core + ngx-admin E-commerce';
+  fourthBundleName = '.NET Core + ngx-admin IoT';
 
-  firstBundleMail: string = 'mailto:support@akveo.com' +
-    '?subject=.NET E-commerce Bundle' +
-    '&body=Dear Akveo, %0D%0A%0D%0A' +
-    'I would like to purchase .NET E-commerce Bundle. ' +
-    'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
-    'Thanks and regards';
+  get firstBundleMail(): string {
+    return this.getMailToText('.NET E-commerce');
+  }
 
-  secondBundleMail: string = 'mailto:support@akveo.com' +
-    '?subject=.NET IoT Bundle' +
-    '&body=Dear Akveo, %0D%0A%0D%0A' +
-    'I would like to purchase .NET IoT Bundle. ' +
-    'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
-    'Thanks and regards';
+  get secondBundleMail(): string {
+    return this.getMailToText('.NET IoT');
+  }
 
-  thirdBundleMail: string = 'mailto:support@akveo.com' +
-    '?subject=.NET Core E-commerce Bundle' +
-    '&body=Dear Akveo, %0D%0A%0D%0A' +
-    'I would like to purchase .NET Core E-commerce Bundle. ' +
-    'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
-    'Thanks and regards';
+  get thirdBundleMail(): string {
+    return this.getMailToText('.NET Core E-commerce');
+  }
 
-  fourthBundleMail: string = 'mailto:support@akveo.com' +
-    '?subject=.NET Core IoT Bundle' +
-    '&body=Dear Akveo, %0D%0A%0D%0A' +
-    'I would like to purchase .NET Core IoT Bundle. ' +
-    'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
-    'Thanks and regards';
+  get fourthBundleMail(): string {
+    return this.getMailToText('.NET Core IoT');
+  }
 
   firstCardFlipped: boolean = false;
   secondCardFlipped: boolean = false;
@@ -62,6 +50,15 @@ export class BackendBundlesSectionComponent {
   }
 
   isCommercial() {
-    return this.licenseType === 'commercial';
+    return this.licenseType === 'Commercial';
+  }
+
+  private getMailToText(bundleName: string) {
+    return 'mailto:support@akveo.com' +
+      `?subject=${this.licenseType} ${bundleName} Bundle` +
+      '&body=Dear Akveo, %0D%0A%0D%0A' +
+      `I would like to purchase ${this.licenseType} ${bundleName} Bundle. ` +
+      'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
+      'Thanks and regards';
   }
 }
diff --git a/docs/app/pages/home/description-section/description-section.component.scss b/docs/app/pages/home/description-section/description-section.component.scss
index f0551d1f..3388ecb7 100644
--- a/docs/app/pages/home/description-section/description-section.component.scss
+++ b/docs/app/pages/home/description-section/description-section.component.scss
@@ -48,6 +48,7 @@
   }
 
   .description {
+    width: 100%;
     color: nb-theme(color-fg);
     font-family: nb-theme(font-secondary), sans-serif;
     margin-top: 1.25rem;