dropdown make-up

open-template-hub · Sep 2, 2021 · b1f2607 · b1f2607
1 parent 635e2d4
commit b1f2607
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 12 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
@@ -10,16 +10,16 @@
     </div>
 
     <div class="section-column-wrapper" [style]="'min-width: min(calc(100vw - 255px), ' + (330 * minimumColumns) + 'px);'">
-      <div class="section-column" *ngFor="let column of options; last as isLast; first as isFirst"
-           [class.section-column-right-border]="!isLast">
+      <div class="section-column" *ngFor="let column of options; last as isLastColumn"
+           [class.section-column-right-border]="!isLastColumn">
         <div *ngIf="column.sectionTitle" class="section-header">
           <h4 [style.color]="column.sectionColor ? column.sectionColor : ''">
             {{ column.sectionTitle }}
           </h4>
+          <hr [style.border-color]="column.sectionColor ? column.sectionColor : ''"/>
           <p>
             {{ column.sectionDescription }}
           </p>
-          <hr [style.border-color]="column.sectionColor ? column.sectionColor : ''"/>
         </div>
 
         <a *ngFor="let option of column.menus; last as isLast; first as isFirst" class="dropdown-item"
@@ -40,6 +40,7 @@ <h4 [style.color]="column.sectionColor ? column.sectionColor : ''">
             </p>
           </div>
         </a>
+        <hr *ngIf="!isLastColumn"/>
       </div>
     </div>
   </div>

diff --git a/src/app/component/common/dropdown-menu/dropdown-menu.component.scss b/src/app/component/common/dropdown-menu/dropdown-menu.component.scss
@@ -71,15 +71,24 @@
   font-weight: 500;
 }
 
-.section-column .section-header p {
+.section-header p {
   color: var(--lighter);
-  padding: 0 10px;
+  padding: 5px;
+  text-align: center;
+
+}
+
+.section-column hr {
+  width: 94%;
+  margin: 0 0 0 10px;
+  border-style: solid;
+  border-color: var(--darker-contrast);
 }
 
 .section-header hr {
-  width: 100vw;
-  margin: 10px 0 0 0;
-  border-style: dashed;
+  width: 25%;
+  margin: 0 0 0 1px;
+  border-style: solid;
   border-color: var(--brand-color);
 }
 
@@ -153,7 +162,7 @@
     display: none;
   }
 
-  .section-header hr {
+  .section-column hr, .section-header hr {
     display: none;
   }
 

diff --git a/src/app/mockData/events.ts → src/app/data/mock/events.ts b/src/app/mockData/events.ts → src/app/data/mock/events.ts
@@ -1,4 +1,4 @@
-import { EventModel } from '../model/EventModel';
+import { EventModel } from '../../model/EventModel';
 
 export const showroomEvents = [
   {

diff --git a/src/app/service/event/event.service.ts b/src/app/service/event/event.service.ts
@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { catchError, map, tap } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
-import { attendedEventsData, showroomEvents } from '../../mockData/events';
+import { attendedEventsData, showroomEvents } from '../../data/mock/events';
 import { EventModel } from '../../model/EventModel';
 import { CountModel } from '../../model/CountModel';
 import { EventTypes } from '../../data/constant';

diff --git a/src/app/service/user-activity/user-activity.service.ts b/src/app/service/user-activity/user-activity.service.ts
@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { of } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
-import { unratedCompletedEventsData } from '../../mockData/events';
+import { unratedCompletedEventsData } from '../../data/mock/events';
 import { CategoryService } from '../category/category.service';
 
 @Injectable( {