services added to footer

open-template-hub · Sep 18, 2021 · c09e2a4 · c09e2a4
1 parent 0902170
commit c09e2a4
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 64 deletions.
diff --git a/src/app/component/nav/common/footer/footer.component.html b/src/app/component/nav/common/footer/footer.component.html
@@ -1,76 +1,89 @@
 <div [class.footer-hide-shadow]="hideShadow" [class.footer-popup-padding]="popupPadding" class="footer">
   <div class="footer-links">
-    <div class="footer-link-group">
+    <div class="footer-link-column">
       <p>Products</p>
-      <div *ngFor="let productLine of PRODUCT_LINES" class="footer-link-sub-group">
+      <div *ngFor="let productLine of PRODUCT_LINES" class="footer-link-group">
         <p *ngIf="productLine.name"
            [class]="productLine.color ? productLine.color + '-theme' : ''">{{ productLine.name }}</p>
-        <a *ngFor="let product of productLine.products; last as isLast; first as isFirst" [class]="productLine.color ? productLine.color + '-theme' : ''"
+        <a *ngFor="let product of productLine.products; last as isLast; first as isFirst"
+           [class]="productLine.color ? productLine.color + '-theme' : ''"
            [queryParams]="{productLineName: productLine.key, productName: product.key}" [routerLink]="URLS.product"
            class="footer-link-item">
           {{ product.name }}
         </a>
       </div>
     </div>
-    <div class="footer-link-group">
-      <div class="footer-link-sub-group">
-        <p>Developers</p>
-        <app-ext-link [href]="environmentCommon.website.github.url + '/' + environmentCommon.oth.social.github"
-                      [linkClass]="'link'">
+    <div class="footer-link-column double">
+      <div class="footer-link-inner-column">
+        <div *ngFor="let productLine of SERVICES" class="footer-link-group">
+          <p *ngIf="productLine.name"
+             [class]="productLine.color ? productLine.color + '-theme' : ''">{{ productLine.name }}</p>
+          <a *ngFor="let product of productLine.products; last as isLast; first as isFirst"
+             [class]="productLine.color ? productLine.color + '-theme' : ''"
+             [queryParams]="{productLineName: productLine.key, productName: product.key}" [routerLink]="URLS.product"
+             class="footer-link-item">
+            {{ product.name }}
+          </a>
+        </div>
+        <div class="footer-link-group">
+          <p>Company</p>
+          <a [routerLink]="URLS.about" class="footer-link-item">
+            About
+          </a>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Customers
+          </a>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Enterprise
+          </a>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Partners
+          </a>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Jobs
+          </a>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Blog
+          </a>
+        </div>
+      </div>
+      <div class="footer-link-inner-column">
+        <div class="footer-link-group">
+          <p>Developers</p>
+          <app-ext-link [href]="environmentCommon.website.github.url + '/' + environmentCommon.oth.social.github"
+                        [linkClass]="'link'">
           <span body>
             Open Source
           </span>
-        </app-ext-link>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Docs
-        </a>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          API
-        </a>
-        <a [routerLink]="URLS.status" class="footer-link-item">
-          Status
-        </a>
-      </div>
-      <div class="footer-link-sub-group">
-        <p>Company</p>
-        <a [routerLink]="URLS.about" class="footer-link-item">
-          About
-        </a>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Customers
-        </a>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Enterprise
-        </a>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Partners
-        </a>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Jobs
-        </a>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Blog
-        </a>
-      </div>
-    </div>
-    <div class="footer-link-group">
-      <div class="footer-link-sub-group">
-        <p>Resources</p>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Support
-        </a>
-        <a [routerLink]="URLS.contactUs" class="footer-link-item">
-          Contact
-        </a>
-        <a [routerLink]="URLS.terms" class="footer-link-item">
-          Terms & Policies
-        </a>
-        <a [routerLink]="URLS.cookiePolicy" class="footer-link-item">
-          Cookies
-        </a>
-        <a [routerLink]="URLS.maintenance" class="footer-link-item">
-          Sitemap
-        </a>
+          </app-ext-link>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Docs
+          </a>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            API
+          </a>
+          <a [routerLink]="URLS.status" class="footer-link-item">
+            Status
+          </a>
+        </div>
+        <div class="footer-link-group">
+          <p>Resources</p>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Support
+          </a>
+          <a [routerLink]="URLS.contactUs" class="footer-link-item">
+            Contact
+          </a>
+          <a [routerLink]="URLS.terms" class="footer-link-item">
+            Terms & Policies
+          </a>
+          <a [routerLink]="URLS.cookiePolicy" class="footer-link-item">
+            Cookies
+          </a>
+          <a [routerLink]="URLS.maintenance" class="footer-link-item">
+            Sitemap
+          </a>
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/app/component/nav/common/footer/footer.component.scss b/src/app/component/nav/common/footer/footer.component.scss
@@ -19,6 +19,10 @@
   flex-wrap: wrap;
 }
 
+.footer-link-inner-column {
+  width: 50%;
+}
+
 .footer-brand-row {
   display: flex;
   align-items: center;
@@ -47,13 +51,13 @@
   border: 1px solid var(--theme-color-lighter-5);
 }
 
-.footer-link-group {
+.footer-link-column {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
 
-  & .footer-link-sub-group {
+  & .footer-link-group {
     width: 100%;
     display: flex;
     justify-content: center;
@@ -114,7 +118,10 @@
     font-size: 14px;
   }
 
-  .footer-link-group {
+  .footer-links {
+  }
+
+  .footer-link-column {
     max-width: 50%;
     width: 50%;
 
@@ -164,12 +171,19 @@
     font-size: 16px;
   }
 
-  .footer-link-group {
+  .footer-link-column {
     width: 33%;
 
     & p, & a, & app-ext-link {
       width: 200px;
     }
+
+    &.double {
+      width: 66%;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: row;
+    }
   }
 
   .footer-social {

diff --git a/src/app/component/nav/common/footer/footer.component.ts b/src/app/component/nav/common/footer/footer.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
-import { PRODUCT_LINES } from 'src/app/data/product/product.data';
+import { PRODUCT_LINES, SERVICES } from 'src/app/data/product/product.data';
 import { environment } from 'src/environments/environment';
 import { environmentCommon } from 'src/environments/environment-common';
 import { URLS } from '../../../../data/constant';
@@ -20,6 +20,7 @@ export class FooterComponent {
   popupPadding = false;
 
   PRODUCT_LINES: ProductLine[] = PRODUCT_LINES;
+  SERVICES: ProductLine[] = SERVICES;
 
   brand = {
     brandLogo: '',