feat: add esp

phodal · Mar 11, 2020 · dc355c4 · dc355c4
1 parent c4b3230
commit dc355c4
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 21 deletions.
diff --git a/src/app/features/periodic-table/periodic-table.component.html b/src/app/features/periodic-table/periodic-table.component.html
@@ -32,13 +32,3 @@
 
  <app-wiki *ngIf="wikiAtomName" [atomName]="wikiAtomName" (closeModal)="wikiAtomName = ''"></app-wiki>
 </div>
-
-<div class="inspired">
- Periodic Table based on <a href="https://stackblitz.com/edit/ng-periodic-table">https://stackblitz.com/edit/ng-periodic-table</a>
- <br>
- and inspired by
- <a
- href="https://xebialabs.com/periodic-table-of-devops-tools/">https://xebialabs.com/periodic-table-of-devops-tools/</a>
- &&
- <a href="https://www.nexthink.com/periodic-table/">https://www.nexthink.com/periodic-table/</a>
-</div>
diff --git a/src/app/presentation/home/home.component.html b/src/app/presentation/home/home.component.html
@@ -14,9 +14,13 @@ <h2 class="title intro">DevOps 元素周期表 —— 搭配您的 DevOps 要素
  [selectedMetal]="highlightState"
  (currentAtomCategory)="setCurrentAtomCategory($event)"></app-periodic-table>
 
- <div class="intro markdown">
+ <div class="intro markdown second-header">
  <h5>DevOps 运动的主要特点是强烈倡导对构建软件的所有环节 (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。</h5>
  </div>
 
- <component-process-table [tableValue]="''"></component-process-table>
+ <component-process-table class="process-bar" [tableValue]="''"></component-process-table>
+
+ <div class="esp-insight">
+ <img src="/assets/images/esp.svg" alt="ESP Modeling">
+ </div>
 </div>
diff --git a/src/app/presentation/home/home.component.scss b/src/app/presentation/home/home.component.scss
@@ -13,3 +13,21 @@
  margin: 0 auto;
  }
 }
+
+.process-bar {
+ padding: 2em;
+}
+
+.second-header {
+ margin-top: 4em;
+}
+
+.esp-insight {
+ padding-top: 2em;
+ margin: 0 auto 4em;
+ width: 1080px;
+
+ img {
+ text-align: center;
+ }
+}
diff --git a/src/app/shared/components/process-table/process-table.component.scss b/src/app/shared/components/process-table/process-table.component.scss
@@ -76,7 +76,7 @@ div {
 
  @each $i, $color in $themeColours {
  &.type_#{$i} {background: $color;}
- &.type_#{$i}:after {border-left: 23px solid $color;}
+ &.type_#{$i}:after {border-left: 22px solid $color;}
  }
  }
 }
@@ -93,25 +93,25 @@ div {
  float: left;
  background: #3498db;
  text-align: center;
- padding: 0 23px 0 0;
+ padding: 0 22px 0 0;
  margin: 0 10px 0 0;
 
  &:after {
  content: "";
- border-top: 23px solid transparent;
- border-bottom: 23px solid transparent;
- border-left: 23px solid #3498db;
+ border-top: 22px solid transparent;
+ border-bottom: 22px solid transparent;
+ border-left: 22px solid #3498db;
  position: absolute;
- right: -23px;
+ right: -22px;
  top: -1px;
  z-index: 1;
  }
 
  &:before {
  content: "";
- border-top: 23px solid transparent;
- border-bottom: 23px solid transparent;
- border-left: 23px solid #fff;
+ border-top: 22px solid transparent;
+ border-bottom: 22px solid transparent;
+ border-left: 22px solid #fff;
  position: absolute;
  left: 0;
  top: 0;

diff --git a/src/assets/images/esp.svg b/src/assets/images/esp.svg