ui make up at timeline

open-template-hub · Sep 8, 2021 · 726329f · 726329f
1 parent a4a2aac
commit 726329f
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/src/app/component/common/card/card1/card1.component.html b/src/app/component/common/card/card1/card1.component.html
@@ -42,7 +42,7 @@ <h3>{{title}}</h3>
        class="card1-content">
     <ng-content select="[body]"></ng-content>
   </div>
-  <div *ngIf="bottomWrapper" [class.card1-bottom-wrapper-in-brand-color]="bottomWrapperInBrandColor"
+  <div *ngIf="bottomWrapper" [style.background-color]="bottomWrapperColor ? bottomWrapperColor : ''"
        class="card1-bottom-wrapper">
   </div>
   <div *ngIf="bottomLayer" class="bottom-layer">

diff --git a/src/app/component/common/card/card1/card1.component.scss b/src/app/component/common/card/card1/card1.component.scss
@@ -39,7 +39,7 @@
   left: 0;
 }
 
-.card1-bottom-wrapper.card1-bottom-wrapper-in-brand-color, .card1-top-wrapper.card1-top-wrapper-in-brand-color {
+.card1-top-wrapper.card1-top-wrapper-in-brand-color {
   background-color: var(--brand-color);
 }
 

diff --git a/src/app/component/common/card/card1/card1.component.ts b/src/app/component/common/card/card1/card1.component.ts
@@ -22,7 +22,7 @@ export class Card1Component {
   @Input() shadow = true;
   @Input() isBackgroundColor = false;
   @Input() bottomWrapper = true;
-  @Input() bottomWrapperInBrandColor = false;
+  @Input() bottomWrapperColor = '';
   @Input() topWrapper = false;
   @Input() topWrapperInBrandColor = false;
   @Input() height = undefined;

diff --git a/src/app/component/timeline/timeline.component.html b/src/app/component/timeline/timeline.component.html
@@ -3,7 +3,8 @@
     <div class="demo-card" *ngFor="let item of timeline; index as i" [class]="item.theme ? item.theme + '-theme' : ''">
       <app-card1
           [paddingContent]="false"
-          [enableHeader]="false">
+          [enableHeader]="false"
+          [bottomWrapperColor]="!item.paragraph && !item.img ? ('var(--brand-color-lighter-1)') : ''">
         <div custom-header class="head" [class]="!item.paragraph && !item.img ? 'bodyless' : ''">
           <div class="number-box">
             <span>{{ i + 1 }}</span>