moved activity history to card

src/app/app.module.ts

@@ -91,7 +91,7 @@ import { ExternalRedirectPageComponent } from './page/splash-layout/external-red
 import { SplashLayoutComponent } from './page/splash-layout/splash-layout.component';
 import { EventButtonComponent } from './component/button/event-button/event-button.component';
 import { EventCardComponent } from './component/card/event-card/event-card.component';
-import { ActivityHistoryComponent } from './component/activity-history/activity-history.component';
+import { ActivityHistoryCardComponent } from './component/card/activity-history-card/activity-history-card.component';
 
 FullCalendarModule.registerPlugins( [
   dayGridPlugin,
@@ -170,7 +170,7 @@ FullCalendarModule.registerPlugins( [
     HeroComponent,
     EventButtonComponent,
     EventCardComponent,
-    ActivityHistoryComponent,
+    ActivityHistoryCardComponent,
   ],
   imports: [
     BrowserModule,

src/app/component/card/activity-history-card/activity-history-card.component.html

@@ -0,0 +1,20 @@
+<app-card [headerTemplate]="headerTemplate" [bodyTemplate]="bodyTemplate" class="activity-history-card">
+  <!-- Header -->
+  <ng-template #headerTemplate>
+    <div class="header">
+      <p class="title">{{ title }}</p>
+    </div>
+  </ng-template>
+
+  <!-- Body -->
+  <ng-template #bodyTemplate>
+    <div class="body">
+      <div class="activity-content">
+        <ng-container *ngFor="let j of days">
+          <div class="day" [class]="getDayClass(j)">
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </ng-template>
+</app-card>

src/app/component/card/activity-history-card/activity-history-card.component.scss

@@ -0,0 +1,101 @@
+@use '../../../../styles/util/util';
+@use '../card.component';
+
+.activity-history-card {
+
+  & .header {
+    @include card.default-header;
+
+    align-items: flex-start;
+
+    color: var(--color);
+    font-size: 19px;
+    box-shadow: none;
+
+    & p {
+      margin-left: 15px;
+      padding-bottom: 3px;
+      border-bottom: 2px solid var(--theme-color-lighter-5);
+    }
+  }
+
+  & .body {
+    @include card.default-body;
+
+    align-items: flex-start;
+    justify-content: flex-start;
+
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 10px;
+    overflow-x: auto;
+
+    & .activity-content {
+      @include util.flex-layout-column;
+
+      align-items: center;
+      justify-content: flex-start;
+
+      flex-wrap: wrap;
+      box-sizing: border-box;
+
+      height: calc(20px * 7);
+
+      & .day {
+        box-sizing: border-box;
+        margin: 1px;
+
+        border-radius: 4px;
+
+        width: 18px;
+        height: 18px;
+
+        background-color: var(--darker-contrast);
+        border: 1px solid var(--contrast);
+
+        &.number-of-activity-4 {
+          background-color: var(--theme-color-lighter-2);
+          border-color: var(--theme-color);
+        }
+
+        &.number-of-activity-3 {
+          background-color: var(--theme-color-lighter-3);
+          border-color: var(--theme-color-lighter-2);
+        }
+
+        &.number-of-activity-2 {
+          background-color: var(--theme-color-lighter-6);
+          border-color: var(--theme-color-lighter-5);
+        }
+
+        &.number-of-activity-1 {
+          background-color: var(--theme-color-lighter-8);
+          border-color: var(--theme-color-lighter-7);
+        }
+      }
+    }
+  }
+}
+
+
+@media only screen and (max-width: 999px) {
+  .activity-history-card {
+
+    & .body {
+      & .activity-content {
+        max-width: calc(20px * 53);
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: 1000px) {
+  .activity-history-card {
+    & .body {
+
+      & .activity-content {
+        width: calc(20px * 53);
+      }
+    }
+  }
+}

src/app/component/card/activity-history-card/activity-history-card.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivityHistoryCardComponent } from './activity-history-card.component';
+
+describe( 'ActivityHistoryCardComponent', () => {
+  let component: ActivityHistoryCardComponent;
+  let fixture: ComponentFixture<ActivityHistoryCardComponent>;
+
+  beforeEach( async () => {
+    await TestBed.configureTestingModule( {
+      declarations: [ ActivityHistoryCardComponent ]
+    } )
+    .compileComponents();
+  } );
+
+  beforeEach( () => {
+    fixture = TestBed.createComponent( ActivityHistoryCardComponent );
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  } );
+
+  it( 'should create', () => {
+    expect( component ).toBeTruthy();
+  } );
+} );

src/app/component/activity-history/activity-history.component.ts → src/app/component/card/activity-history-card/activity-history-card.component.ts

@@ -1,12 +1,12 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Activity } from '../../model/activity/activity.model';
+import { Activity } from '../../../model/activity/activity.model';
 
 @Component( {
-  selector: 'app-activity-history',
-  templateUrl: './activity-history.component.html',
-  styleUrls: [ './activity-history.component.scss' ]
+  selector: 'app-activity-history-card',
+  templateUrl: './activity-history-card.component.html',
+  styleUrls: [ './activity-history-card.component.scss' ]
 } )
-export class ActivityHistoryComponent implements OnInit {
+export class ActivityHistoryCardComponent implements OnInit {
 
   @Input() title: string;
   @Input() activities: Activity[] = [];
@@ -23,14 +23,14 @@ export class ActivityHistoryComponent implements OnInit {
   ngOnInit(): void {
     const today = new Date( new Date().toISOString().split( 'T' )[ 0 ] );
 
-    this.activities.map( activity => {
+    for ( const activity of this.activities ) {
       const dateStr = activity.date.toISOString().split( 'T' )[ 0 ];
       if ( this.activitySumByDate.has( dateStr ) ) {
         this.activitySumByDate.set( dateStr, this.activitySumByDate.get( dateStr ) + 1 );
       } else {
         this.activitySumByDate.set( dateStr, 1 );
       }
-    } );
+    }
 
     for ( const activitySum of this.activitySumByDate ) {
 

src/app/page/landing-layout/product-page/product-page.component.html

@@ -82,9 +82,9 @@ <h4>What our customers are saying...</h4>
             [product]="product">
         </app-price-plan>
       </div>
-      <div class="pricing-plan-wrapper">
-        <app-activity-history *ngIf="product.openSource" [title]="'Commit history'" [activities]="commitActivities">
-        </app-activity-history>
+      <div class="activity-history-wrapper">
+        <app-activity-history-card *ngIf="product.openSource" [title]="'Activity history'" [activities]="commitActivities">
+        </app-activity-history-card>
       </div>
 
       <!-- Related Products -->

src/app/page/landing-layout/product-page/product-page.component.scss

@@ -125,6 +125,10 @@ app-swiper-wrapper {
   padding-bottom: 50px;
 }
 
+.activity-history-wrapper {
+  max-width: 92vw;
+}
+
 .testimonials-header {
   @include util.flex-layout-column;
   @include util.flex-center-center;
@@ -204,12 +208,15 @@ app-swiper-wrapper {
     text-align: center;
   }
 
-  .pricing-plan-wrapper {
+  .pricing-plan-wrapper, .activity-history-wrapper {
+    width: 94vw;
+
     & > * {
-      width: 94%;
+      width: 94vw;
     }
   }
 
+
   .testimonials-wrapper {
     font-size: 18px;
 
@@ -316,4 +323,3 @@ app-swiper-wrapper {
     }
   }
 }
-