ui make-up

open-template-hub · Aug 31, 2021 · 09f4b75 · 09f4b75
1 parent 9350f3f
commit 09f4b75
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 44 deletions.
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.html b/src/app/component/common/dropdown-menu/dropdown-menu.component.html
@@ -8,15 +8,20 @@
     <i *ngIf="menuType === 'bottom'" (click)="toggleDropdown()" aria-hidden="true" class="fas fa-times fa-lg fa-fw"></i>
 
     <div class="section-column" *ngFor="let column of options">
-      <span *ngIf="column.sectionTitle" class="section-header" [style.color]="column.sectionColor ? column.sectionColor : ''">
-        {{ column.sectionTitle }}
-      </span>
+      <div *ngIf="column.sectionTitle" class="section-header">
+        <h4 [style.color]="column.sectionColor ? column.sectionColor : ''">
+          {{ column.sectionTitle }}
+        </h4>
+        <p>
+          {{ column.sectionDescription }}
+        </p>
+      </div>
 
       <a *ngFor="let option of column.menus; last as isLast; first as isFirst" class="dropdown-item"
          (mouseover)="option.hover = true" (mouseleave)="option.hover = false"
-         [ngStyle]="option?.hover && { 'background-color': option.backgroundColor }"
-         [style.margin-bottom]="!isLast ? '10px' : '0'"
-         [style.margin-top]="isFirst ? '20px' : '10px'"
+         [ngStyle]="option?.hover && { 'background-color': option.backgroundColor? option.backgroundColor : 'var(--hover)' }"
+         [style.margin-bottom]="!isLast ? '15px' : '0'"
+         [style.margin-top]="isFirst ? '5px' : '10px'"
          [href]="option.link">
 
         <img [src]="option.brand.brandLogo" alt="logo" class="dropdown-item-logo" height="50"/>

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.scss b/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
@@ -8,7 +8,7 @@
   background-color: var(--card);
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  padding: 12px 16px;
+  padding: 12px 0 0;
   z-index: 10;
   top: 61px;
 }
@@ -33,7 +33,7 @@
 .dropdown-item {
   display: flex;
   width: 300px;
-  padding: 10px;
+  padding: 15px;
   cursor: pointer;
 }
 
@@ -61,8 +61,21 @@
 }
 
 .section-column .section-header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.section-column .section-header h4 {
+  color: var(--brand-color);
+  font-weight: 500;
+}
+
+.section-column .section-header p {
   color: var(--lighter-contrast);
-  margin-left: 69px;
+  padding: 0 10px;
+  height: 32px;
 }
 
 .dropdown-content.bottom .section-column {

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.ts b/src/app/component/common/dropdown-menu/dropdown-menu.component.ts
@@ -4,12 +4,13 @@ import { ThemeService } from '../../../service/theme/theme.service';
 
 export interface DropdownColumnOption {
   sectionTitle?: string,
+  sectionDescription?: string,
   sectionColor?: string
   menus: DropdownMenuOption[]
 }
 
 export interface DropdownMenuOption {
-  backgroundColor: string,
+  backgroundColor?: string,
   brand: { brandLogo: string },
   header: string,
   description: string,

diff --git a/src/app/page/raw-landing-layout/home/home.component.html b/src/app/page/raw-landing-layout/home/home.component.html
@@ -61,23 +61,28 @@ <h6 class="testimonial-description">What our customers are saying...</h6>
   <app-swiper-wrapper></app-swiper-wrapper>
   <div class="features-wrapper">
     <div *ngFor="let productLine of PRODUCT_LINES;" class="features">
-      <h4 *ngIf="productLine.sectionTitle" [style.color]="productLine.sectionColor ? productLine.sectionColor : ''">
-        {{ productLine.sectionTitle }}
-      </h4>
+      <div class="product-line-header">
+        <h4 *ngIf="productLine.sectionTitle" [style.color]="productLine.sectionColor ? productLine.sectionColor : ''">
+          {{ productLine.sectionTitle }}
+        </h4>
+        <h5 *ngIf="productLine.sectionDescription">
+          {{ productLine.sectionDescription }}
+        </h5>
+      </div>
 
       <div *ngFor="let product of productLine.menus; let i = index; last as isLast" class="feature-wrapper"
            [class.feature-left]="i % 2 === 1" [class.feature-right]="i % 2 === 0">
         <div *ngIf="i % 2 === 0" class="layers">
           <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-            <path d="M 0,150 1000,0 v 150 z" [style]="'fill: ' + product.backgroundColor + ';'"></path>
+            <path d="M 0,150 1000,0 v 150 z" [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
           </svg>
         </div>
         <div *ngIf="i % 2 === 1" class="layers">
           <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-            <path d="M 1000,0 0,0 v 150 z" [style]="'fill: ' + product.backgroundColor + ';'"></path>
+            <path d="M 1000,0 0,0 v 150 z" [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
           </svg>
         </div>
-        <div class="feature" [style.background-color]="i % 2 == 0 ? product.backgroundColor : ''">
+        <div class="feature" [style.background-color]="i % 2 == 0 ? (product.backgroundColor ? product.backgroundColor : 'var(--hover)') : ';'">
           <a class="feature-img-wrapper" [href]="product.link">
             <img class="server-logo"
                  [src]="product.brand.brandLogo"
@@ -95,7 +100,7 @@ <h6>
 
         <div *ngIf="i % 2 === 0 && isLast" class="layers">
           <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-            <path d="M 1000,0 0,0 v 150 z" [style]="'fill: ' + product.backgroundColor + ';'"></path>
+            <path d="M 1000,0 0,0 v 150 z" [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
           </svg>
         </div>
       </div>

diff --git a/src/app/page/raw-landing-layout/home/home.component.scss b/src/app/page/raw-landing-layout/home/home.component.scss
@@ -29,20 +29,14 @@
   padding-right: 2vw;
 }
 
-.features h4, .features .feature {
+.product-line-header, .features .feature {
   padding-left: 7vw;
   padding-right: 7vw;
 }
 
-.features h4 {
-  color: var(--brand-color);
-  font-weight: normal;
-}
-
-.features h5 {
-  padding-top: 10px;
-  padding-bottom: 10px;
+.product-line-header h4 {
   font-weight: normal;
+  color: var(--brand-color);
 }
 
 .feature img {
@@ -182,7 +176,7 @@ app-swiper-wrapper {
     padding-bottom: 6vh;
   }
 
-  .features h4 {
+  .product-line-header {
     padding-bottom: 20px;
     text-align: center;
   }
@@ -201,7 +195,7 @@ app-swiper-wrapper {
     max-width: 20%;
   }
 
-  .features h4 {
+  .product-line-header {
     padding-bottom: 40px;
   }
 

diff --git a/src/app/util/constant.ts b/src/app/util/constant.ts
@@ -106,37 +106,33 @@ export const RIBBONS = {
 export const PRODUCT_LINES: DropdownColumnOption[] = [
   {
     sectionTitle: 'Servers',
+    sectionDescription: 'Micro servers for your needs',
     menus: [
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/auth-server-logo.png?raw=true' },
         header: 'Auth Server',
         description: 'Authentication Server Template supporting both regular signup and login processes and login with social networks that support OAuth and OAuth2.0',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/payment-server-logo.png?raw=true' },
         header: 'Payment Server',
         description: 'Payment Server template integrated with Stripe and Coinbase Commerce payment systems',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/file-storage-server-logo.png?raw=true' },
         header: 'File Storage Server',
         description: 'File Storage Server Template that supports uploading and downloading files from AWS S3',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/analytics-server-logo.png?raw=true' },
         header: 'Analytics Server',
         description: 'Analytics Server Template for generic usage in Node.js',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/basic-info-server-logo.png?raw=true' },
         header: 'Basic Info Server',
         description: 'Basic Info Server Template for generic usage in Node.js',
@@ -146,23 +142,21 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
   },
   {
     sectionTitle: 'User Interfaces',
+    sectionDescription: 'Front-ends for your needs',
     menus: [
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Company Profile UI',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Web UI',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Mobile UI',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
@@ -172,10 +166,11 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
   },
   {
     sectionTitle: 'Premium',
+    sectionDescription: 'Get more things done with our premium solutions',
     sectionColor: 'var(--brand-color-yellow-theme)',
     menus: [
       {
-        backgroundColor: 'var(--brand-color-yellow-theme-lighter-5)',
+        backgroundColor: 'var(--hover-yellow-theme)',
         brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/orchestration-server-logo.png?raw=true' },
         header: 'Orchestration Server',
         description: 'Orchestration Server Template for generic usage in Node.js',
@@ -187,23 +182,22 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
 
 export const SERVICES: DropdownColumnOption[ ] = [
   {
+    sectionTitle: 'Services',
+    sectionDescription: 'Services that we provide',
     menus: [
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Software Consultancy',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Cloud Integration',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',
         link: URLS.maintenance
       },
       {
-        backgroundColor: 'var(--brand-color-lighter-5)',
         brand: { brandLogo: './assets/production/brand-logo.png' },
         header: 'Quality Insurance',
         description: 'Open Template Hub is an organization that develops open source micro servers as templates including authentication server, payment server and more..',

diff --git a/src/styles/brand/brand-blue.scss b/src/styles/brand/brand-blue.scss
@@ -26,7 +26,7 @@
   --overlay-blue-theme-darker: rgba(27, 67, 88, 0.6);
 
   --brand-blue-theme-background: #1e7aab;
-  --hover-blue-theme: rgba(89, 129, 150, 0.2);
+  --hover-blue-theme: rgba(64, 152, 214, 0.3);
 
   --color-alpha-blue-theme-0-5: rgba(26, 89, 108, 0.5);
   --color-alpha-blue-theme-0-13: rgba(26, 89, 108, 0.13);

diff --git a/src/styles/brand/brand-green.scss b/src/styles/brand/brand-green.scss
@@ -25,7 +25,7 @@
   --overlay-green-theme-darker: rgba(28, 76, 28, 0.6);
 
   --brand-green-theme-background: #5cb05c;
-  --hover-green-theme: rgba(98, 150, 89, 0.2);
+  --hover-green-theme: rgba(67, 176, 67, 0.3);
 
   --color-alpha-green-theme-0-5: rgba(31, 108, 26, 0.5);
   --color-alpha-green-theme-0-13: rgba(38, 108, 26, 0.13);

diff --git a/src/styles/brand/brand-red.scss b/src/styles/brand/brand-red.scss
@@ -25,7 +25,7 @@
   --overlay-red-theme-darker: rgba(105, 74, 74, 0.7);
 
   --brand-red-theme-background: #b74d4d;
-  --hover-red-theme: rgba(150, 89, 89, 0.2);
+  --hover-red-theme: rgba(213, 102, 102, 0.3);
 
   --color-alpha-red-theme-0-5: rgba(108, 26, 26, 0.5);
   --color-alpha-red-theme-0-13: rgba(108, 26, 26, 0.13);

diff --git a/src/styles/brand/brand-yellow.scss b/src/styles/brand/brand-yellow.scss
@@ -25,7 +25,7 @@
   --overlay-yellow-theme-darker: rgba(88, 73, 27, 0.6);
 
   --brand-yellow-theme-background: #ab881e;
-  --hover-yellow-theme: rgba(150, 130, 89, 0.2);
+  --hover-yellow-theme: rgba(214, 177, 64, 0.3);
 
   --color-alpha-yellow-theme-0-5: rgba(108, 88, 26, 0.5);
   --color-alpha-yellow-theme-0-13: rgba(108, 85, 26, 0.13);