dropdown ui make-up

open-template-hub · Sep 3, 2021 · a26adee · a26adee
1 parent 6760a9b
commit a26adee
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 26 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
@@ -3,30 +3,32 @@
     <ng-content (click)="toggleDropdown()"></ng-content>
   </div>
 
-  <div *ngIf="isDropdownOpen" #dropdownContent class="dropdown-content" [class.dropdown-opened]="isDropdownOpen && closeDropdownInternalClicked">
+  <div *ngIf="isDropdownOpen" #dropdownContent class="dropdown-content"
+       [class.dropdown-opened]="isDropdownOpen && closeDropdownInternalClicked">
     <i aria-hidden="true" class="dropdown-caret fas fa-caret-up fa-lg fa-fw"></i>
     <div class="dropdown-top-menu" (click)="closeDropDownInternal()">
-      <i aria-hidden="true" class="fas fa-times fa-lg fa-fw" ></i>
+      <i aria-hidden="true" class="fas fa-times fa-lg fa-fw"></i>
     </div>
 
-    <div class="section-column-wrapper" [style]="'min-width: min(calc(100vw - 255px), ' + (330 * minimumColumns) + 'px);'">
+    <div class="section-column-wrapper" [style]="'min-width: ' + (330 * calculatedColumns) + 'px;'">
       <div class="section-column" *ngFor="let column of options; last as isLastColumn"
-           [class.section-column-right-border]="!isLastColumn">
+           [class.section-column-right-border]="true"
+           [class]="column.sectionColor ? column.sectionColor + '-theme' : ''"
+           [style]="'max-height: ' + (80  + (150 * calculatedRows)) + 'px;'">
         <div *ngIf="column.sectionTitle" class="section-header">
-          <h4 [style.color]="column.sectionColor ? column.sectionColor : ''">
+          <h4>
             {{ column.sectionTitle }}
           </h4>
-          <hr [style.border-color]="column.sectionColor ? column.sectionColor : ''"/>
+          <hr [style.border-color]="'var(--brand-color)'"/>
           <p>
             {{ column.sectionDescription }}
           </p>
         </div>
 
         <a *ngFor="let option of column.menus; last as isLast; first as isFirst" class="dropdown-item"
+           [class]="option.itemColor ? option.itemColor + '-theme' : ''"
            (mouseover)="option.hover = true" (mouseleave)="option.hover = false"
-           [ngStyle]="option?.hover && { 'background-color': option.backgroundColor? option.backgroundColor : 'var(--hover)' }"
-           [style.margin-bottom]="!isLast ? '15px' : '0'"
-           [style.margin-top]="isFirst ? '0px' : '10px'"
+           [ngStyle]="option?.hover && { 'background-color': 'var(--hover)' }"
            [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
@@ -35,7 +35,6 @@
 
 .dropdown-item {
   display: flex;
-  padding: 25px 15px;
   cursor: pointer;
 }
 
@@ -97,7 +96,7 @@
 }
 
 .section-column-right-border {
-  border-right: 0.5px dotted var(--contrast);
+  border-right: 0.5px dashed var(--contrast);
 }
 
 @media only screen and (max-width: 999px) {
@@ -131,6 +130,10 @@
     display: none;
   }
 
+  .dropdown-item {
+    padding: 25px 15px;
+  }
+
   .section-column-wrapper {
     overflow-y: auto;
     height: 100%;
@@ -144,6 +147,10 @@
   .section-column:first-child {
     padding-top: 31px;
   }
+
+  .show-more-caret {
+    display: none;
+  }
 }
 
 @media only screen and (min-width: 1000px) {
@@ -180,18 +187,42 @@
     overflow-y: auto;
     flex-wrap: wrap;
     max-width: calc(100vw - 255px);
-    max-height: calc(100vh - 162px);
+    max-height: calc(100vh - 200px);
   }
 
-  .section-column-wrapper>.section-column {
+  .section-column-wrapper > .section-column {
     box-sizing: border-box;
+    flex-grow: 1;
+
     min-width: 330px;
     width: 330px;
-    flex-grow: 1;
+    max-width: 330px;
+
+    max-height: 830px;
+
+    overflow-y: auto;
+    position: relative;
+    overflow-x: hidden;
   }
 
   .dropdown-item {
-    width: 300px;
     margin: auto;
+
+    width: 299px;
+    height: 120px;
+
+    padding: 15px;
+  }
+
+  .section-column::-webkit-scrollbar {
+    width: 2px;
+  }
+
+  .section-column::-webkit-scrollbar-track {
+    background-color: var(--brand-color-lighter-9);
+  }
+
+  .section-column::-webkit-scrollbar-thumb {
+    background-color: var(--brand-color-lighter-3);
   }
 }
diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.ts b/src/app/component/common/dropdown-menu/dropdown-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
 import { ThemeService } from '../../../service/theme/theme.service';
 import { UtilService } from '../../../service/util/util.service';
 
@@ -10,7 +10,7 @@ export interface DropdownColumnOption {
 }
 
 export interface DropdownMenuOption {
-  backgroundColor?: string,
+  itemColor?: string,
   brand: { brandLogo: string },
   header: string,
   description: string,
@@ -30,6 +30,10 @@ export class DropdownMenuComponent {
 
   @Input() isDropdownOpen = false;
   @Input() minimumColumns = 1;
+  @Input() minimumRows = 5;
+
+  calculatedColumns;
+  calculatedRows;
 
   @Input() options: DropdownColumnOption[] = [];
 
@@ -43,10 +47,36 @@ export class DropdownMenuComponent {
       private utilService: UtilService
   ) {
     this.brand = this.themeService.brand;
+    this.calculatedColumns = this.minimumColumns;
+    this.calculatedRows = this.minimumRows;
+  }
+
+  @HostListener( 'window:resize', [ '$event' ] )
+  onResize() {
+
+    if ( this.isDropdownOpen && window.innerWidth > 999) {
+      let wantedColumns = this.minimumColumns;
+
+      while ( wantedColumns * 330 > window.innerWidth - 255 ) {
+        wantedColumns = wantedColumns - 2;
+      }
+
+      this.calculatedColumns = wantedColumns;
+
+      if ( this.calculatedColumns < this.minimumColumns ) {
+        this.calculatedRows = this.minimumRows - ( this.minimumColumns - this.calculatedColumns );
+      } else {
+        this.calculatedRows = this.minimumRows;
+      }
+    }
   }
 
   toggleDropdown() {
     this.isDropdownOpen = !this.isDropdownOpen;
+
+    if ( this.isDropdownOpen ) {
+      this.onResize();
+    }
   }
 
   closeDropdown() {
@@ -58,7 +88,7 @@ export class DropdownMenuComponent {
     this.closeDropdownInternalClicked = true;
     this.utilService.delay( 500 ).then( () => {
       this.closeDropdown();
-      console.log('closed');
+      console.log( 'closed' );
     } );
   }
 }
diff --git a/src/app/data/constant.ts b/src/app/data/constant.ts
@@ -186,10 +186,10 @@ export const PRODUCT_LINES: DropdownColumnOption[] = [
   {
     sectionTitle: 'Premium',
     sectionDescription: 'Get more things done with our premium solutions',
-    sectionColor: 'var(--brand-color-yellow-theme)',
+    sectionColor: ThemeColorSettings.yellow,
     menus: [
       {
-        backgroundColor: 'var(--hover-yellow-theme)',
+        itemColor: ThemeColorSettings.yellow,
         brand: { brandLogo: 'https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/logo/server/orchestration-server-logo.png' },
         header: 'Orchestration Server',
         description: 'Orchestration Server Template for generic usage in Node.js',

diff --git a/src/app/page/raw-landing-layout/home/home.component.html b/src/app/page/raw-landing-layout/home/home.component.html
@@ -64,7 +64,8 @@ <h6 class="testimonial-description">What our customers are saying...</h6>
   <div class="features-wrapper">
     <div *ngFor="let productLine of PRODUCT_LINES;" class="features">
       <div class="product-line-header">
-        <h4 *ngIf="productLine.sectionTitle" [style.color]="productLine.sectionColor ? productLine.sectionColor : ''">
+        <h4 *ngIf="productLine.sectionTitle"
+            [class]="productLine.sectionColor ? productLine.sectionColor + '-theme' : ''">
           {{ productLine.sectionTitle }}
         </h4>
         <h5 *ngIf="productLine.sectionDescription">
@@ -73,21 +74,22 @@ <h5 *ngIf="productLine.sectionDescription">
       </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">
+           [class.feature-left]="i % 2 === 1" [class.feature-right]="i % 2 === 0"
+           [class]="product.itemColor ? product.itemColor + '-theme' : ''">
         <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 ? product.backgroundColor : 'var(--hover)') + ';'"></path>
+                  [style]="'fill: 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 ? product.backgroundColor : 'var(--hover)') + ';'"></path>
+                  [style]="'fill: var(--hover);'"></path>
           </svg>
         </div>
         <div class="feature"
-             [style.background-color]="i % 2 == 0 ? (product.backgroundColor ? product.backgroundColor : 'var(--hover)') : ';'">
+             [style.background-color]="i % 2 == 0 ? 'var(--hover)' : ''">
           <a class="feature-img-wrapper" [href]="product.link">
             <img class="server-logo"
                  [src]="product.brand.brandLogo"

diff --git a/src/styles/styles.common.scss b/src/styles/styles.common.scss
@@ -57,7 +57,7 @@ div * {
   }
 
   ::-webkit-scrollbar {
-    width: 0 !important;
+    width: 0;
     background-color: transparent;
   }