feat: init process table

src/app/presentation/home/home.component.html

@@ -17,4 +17,6 @@ <h2 class="title intro">DevOps 元素周期表 —— 搭配您的 DevOps 要素
  <div class="intro markdown">
  <h5>DevOps 运动的主要特点是强烈倡导对构建软件的所有环节 (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。</h5>
  </div>
+
+ <component-process-table [data]="[]"></component-process-table>
 </div>

src/app/shared/components/process-table/process-table.component.html

@@ -0,0 +1,32 @@
+<div class="table-container" role="table" aria-label="Destinations">
+ <div class="flex-table header" role="rowgroup">
+ <div class="flex-row first" role="columnheader">Country</div>
+ <div class="flex-row" role="columnheader">Events</div>
+ <div class="flex-row" role="columnheader">Time</div>
+ <div class="flex-row" role="columnheader">Fees</div>
+ </div>
+ <div class="flex-table row" role="rowgroup">
+ <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span> United Kingdom</div>
+ <div class="flex-row" role="cell">Stonehenge, Windsor and Bath with Pub Lunch</div>
+ <div class="flex-row" role="cell">19 Sep, 1p.m.</div>
+ <div class="flex-row" role="cell">US$500</div>
+ </div>
+ <div class="flex-table row" role="rowgroup">
+ <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-ca"></span> Canada</div>
+ <div class="flex-row" role="cell">Vancouver to Victoria and Butchart Gardens Tour</div>
+ <div class="flex-row" role="cell">23 Sep, 1:30p.m.</div>
+ <div class="flex-row" role="cell">US$387</div>
+ </div>
+ <div class="flex-table row" role="rowgroup">
+ <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-au"></span> Australia</div>
+ <div class="flex-row" role="cell">Blue Mountains Tours</div>
+ <div class="flex-row" role="cell">9 Sep, 2p.m.</div>
+ <div class="flex-row" role="cell">US$400</div>
+ </div>
+ <div class="flex-table row" role="rowgroup">
+ <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-nz"></span> New Zealand</div>
+ <div class="flex-row" role="cell">Milford Sound Coach & Cruise</div>
+ <div class="flex-row" role="cell">12 Sep, 2p.m.</div>
+ <div class="flex-row" role="cell">US$400</div>
+ </div>
+</div>

src/app/shared/components/process-table/process-table.component.scss

@@ -0,0 +1,147 @@
+$table-header: #1976D2;
+$table-header-border: #1565C0;
+$table-border: #d9d9d9;
+$row-bg: #f4f2f1;
+
+div {
+ box-sizing: border-box;
+}
+
+.table-container {
+ display: block;
+ margin: 2em auto;
+ width: 90%;
+ max-width: 600px;
+}
+
+.flag-icon {
+ margin-right: 0.1em;
+}
+
+.flex-table {
+ display: flex;
+ flex-flow: row wrap;
+ border-left: solid 1px $table-border;
+ transition: 0.5s;
+
+ &:first-of-type {
+ border-top: solid 1px $table-header-border;
+ border-left: solid 1px $table-header-border;
+ }
+
+ &:first-of-type .flex-row {
+ background: $table-header;
+ color: white;
+ border-color: $table-header-border;
+ }
+
+ &.row:nth-child(odd) .flex-row {
+ background: $row-bg;
+ }
+
+ &:hover {
+ background: #F5F5F5;
+ transition: 500ms;
+ }
+}
+
+.flex-row {
+ width: calc(100% / 4);
+ text-align: center;
+ padding: 0.5em 0.5em;
+ border-right: solid 1px $table-border;
+ border-bottom: solid 1px $table-border;
+}
+
+.rowspan {
+ display: flex;
+ flex-flow: row wrap;
+ align-items: flex-start;
+ justify-content: center;
+}
+
+.column {
+ display: flex;
+ flex-flow: column wrap;
+ width: 75%;
+ padding: 0;
+
+ .flex-row {
+ display: flex;
+ flex-flow: row wrap;
+ width: 100%;
+ padding: 0;
+ border: 0;
+ border-bottom: solid 1px $table-border;
+
+ &:hover {
+ background: #F5F5F5;
+ transition: 500ms;
+ }
+ }
+}
+
+.flex-cell {
+ width: calc(100% / 3); //1px = border right
+ text-align: center;
+ padding: 0.5em 0.5em;
+ border-right: solid 1px $table-border;
+ //flex: 1 1 33.3%;
+ &:last-child {
+ // border-right: 0;
+ }
+}
+
+@media all and (max-width: 767px) {
+ .flex-row {
+ width: calc(100% / 3); //1px = border right
+
+ &.first {
+ width: 100%;
+ }
+ }
+
+ .column {
+ width: 100%;
+ }
+}
+
+@media all and (max-width: 430px) {
+
+ .flex-table {
+ .flex-row {
+ border-bottom: 0;
+ }
+
+ .flex-row:last-of-type {
+ border-bottom: solid 1px $table-border;
+ }
+ }
+
+ .header {
+ .flex-row {
+ border-bottom: solid 1px;
+ }
+ }
+
+ .flex-row {
+ width: 100%; //1px = border right
+
+ &.first {
+ width: 100%;
+ border-bottom: solid 1px $table-border;
+ }
+ }
+
+ .column {
+ width: 100%;
+
+ .flex-row {
+ border-bottom: solid 1px $table-border;
+ }
+ }
+
+ .flex-cell {
+ width: 100%; //1px = border right
+ }
+}

src/app/shared/components/process-table/process-table.component.spec.ts

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

src/app/shared/components/process-table/process-table.component.ts

@@ -0,0 +1,16 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+ selector: 'component-process-table',
+ templateUrl: './process-table.component.html',
+ styleUrls: ['./process-table.component.scss']
+})
+export class ProcessTableComponent implements OnInit {
+ @Input()
+ data: [][];
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+}

src/app/shared/shared.module.ts

@@ -6,9 +6,10 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { MarkdownRenderComponent } from './components/markdown-render/markdown-render.component';
 import { MarkdownModule } from 'ngx-markdown';
 import { CustomMaterialModule } from './custom-material.module';
-import {MarkdownRadarChartComponent} from './components/markdown-radar-chart/markdown-radar-chart.component';
-import {MarkdownRatingComponent} from './components/markdown-radar-chart/markdown-rating/markdown-rating.component';
-import {MarkdownRatingItemComponent} from './components/markdown-radar-chart/markdown-rating-item/markdown-rating-item.component';
+import { MarkdownRadarChartComponent } from './components/markdown-radar-chart/markdown-radar-chart.component';
+import { MarkdownRatingComponent } from './components/markdown-radar-chart/markdown-rating/markdown-rating.component';
+import { MarkdownRatingItemComponent } from './components/markdown-radar-chart/markdown-rating-item/markdown-rating-item.component';
+import { ProcessTableComponent } from './components/process-table/process-table.component';
 
 @NgModule({
  imports: [
@@ -25,14 +26,16 @@ import {MarkdownRatingItemComponent} from './components/markdown-radar-chart/mar
  MarkdownRatingComponent,
  MarkdownRatingItemComponent,
  MarkdownRadarChartComponent,
+ ProcessTableComponent,
  ],
  providers: [
  ],
  exports: [
  MarkdownRenderComponent,
  MarkdownRatingComponent,
  MarkdownRatingItemComponent,
- MarkdownRadarChartComponent
+ MarkdownRadarChartComponent,
+ ProcessTableComponent,
  ],
  entryComponents: []
 })