add linked exhibitions and dates

src/app/detail/detail.component.html

@@ -3,6 +3,14 @@
     <div class="col-11 col-md-10 col-lg-12 content mx-auto">
       <button class="back icon-back" (click)="back()"></button>
       <h2 class="title">{{details.title}}</h2>
+
+      <div class="date-container" *ngIf="section == 'exhibitions'">
+        <span class="date-indication" *ngIf="details.date_from != details.date_to">from</span>
+        <span class="date-indication" *ngIf="details.date_from == details.date_to">on</span>
+        <span class="date">{{details.date_from | date}}</span>
+        <span class="date" *ngIf="details.date_from != details.date_to"> <span class="date-indication">to</span> {{details.date_to | date}}</span>
+      </div>
+
       <div class="text" [innerHTML]="details.content"></div>
       <span class="tags" *ngIf="details.tags"><b>Tags:</b> {{details.tags}}</span>
 

src/app/detail/detail.component.scss

@@ -13,7 +13,7 @@
     border-radius: 10px;
 
     .title {
-      margin-top: 0;
+      margin: 0;
       font-size: $font-34;
       font-weight: bold;
       text-transform: uppercase;
@@ -22,7 +22,25 @@
     .text {
       font-size: $font-18;
       text-align: justify;
-      padding-bottom: 40px;
+      padding: 40px 0;
+    }
+
+    .date-container {
+      display: inline-flex;
+      position: absolute;
+      top: 40px;
+      right: 40px;
+
+      .date {
+        display: inline-flex;
+        margin: auto;
+        font-size: $font-20;
+      }
+
+      .date-indication {
+        margin: 2px 5px auto 5px;
+        font-size: $font-12;
+      }
     }
 
     .tags,

src/app/detail/detail.component.ts

@@ -11,6 +11,8 @@ import { ApisService } from '../services/apis.service'
 export class DetailComponent implements OnInit {
 
   public details: any = {}
+  public section: string = ''
+  public id: number = 0
   private history: string[] = []
 
   constructor(
@@ -21,7 +23,9 @@ export class DetailComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.showDetails(this.router.url.split('/')[2], this.router.url.split('/')[3])
+    this.section = this.router.url.split('/')[2]
+    this.id = parseInt(this.router.url.split('/')[3])
+    this.showDetails(this.section, this.id)
   }
 
   showDetails(section, id): void {
@@ -41,7 +45,9 @@ export class DetailComponent implements OnInit {
     this.history.pop()
     if(this.history.length > 0) {
       const last = this.history[this.history.length - 1]
-      this.showDetails(last.split('/')[2], last.split('/')[3])
+      this.section = last.split('/')[2]
+      this.id = parseInt(last.split('/')[3])
+      this.showDetails(this.section, this.id)
       this.location.back()
     } else {
       this.location.back()

src/app/portfolio/portfolio.component.html

@@ -6,7 +6,19 @@
           <img class="image" src="assets/{{item.image}}">
           <div class="text">
             <span class="title">{{item.title}}</span>
-            <span class="type">{{item.type}}</span>
+            <span class="type" *ngIf="section != 'exhibitions'">{{item.type}}</span>
+
+            <div class="date-container" *ngIf="section == 'exhibitions'">
+              <div class="date-row">
+                <span class="date-indication" *ngIf="item.date_from != item.date_to">from</span>
+                <span class="date-indication" *ngIf="item.date_from == item.date_to">on</span>
+                <span class="date">{{item.date_from | date}}</span>
+              </div>
+              <div class="date-row">
+                <span class="date" *ngIf="item.date_from != item.date_to"> <span class="date-indication">to</span> {{item.date_to | date}}</span>
+              </div>
+            </div>
+
             <span class="tags">{{item.tags}}</span>
           </div>
         </div>

src/app/portfolio/portfolio.component.scss

@@ -61,6 +61,32 @@
         font-weight: bold;
         padding-top: 10px;
       }
+
+      .date-container {
+        display: inline-flex;
+        flex-wrap: wrap;
+
+        .date-row {
+          display: block;
+          width: 100%;
+
+          .date {
+            display: inline-flex;
+            margin: auto;
+            font-size: $font-20;
+          }
+
+          .date-indication {
+            margin: 2px 5px auto 5px;
+            font-size: $font-12;
+          }
+
+          &:nth-of-type(2) {
+            margin-top: -12px;
+          }
+        }
+      }
+
     }
 
     @each $angle in 0,1,2,3,4,5,6 {

src/app/portfolio/portfolio.component.ts

@@ -10,6 +10,7 @@ import { ApisService } from '../services/apis.service'
 export class PortfolioComponent implements OnInit {
 
   public portfolioItems: any = []
+  public section: string = ''
 
   constructor(
     private apisService: ApisService,
@@ -17,7 +18,9 @@ export class PortfolioComponent implements OnInit {
   { }
 
   ngOnInit(): void {
-    this.apisService.getPortfolio(this.router.url.split('/')[1]).toPromise().then((response) => {
+    this.section = this.router.url.split('/')[1]
+
+    this.apisService.getPortfolio(this.section).toPromise().then((response) => {
       this.portfolioItems = response.items
     },(error) => {
       console.error('getPortfolio ERROR', error)
@@ -27,7 +30,7 @@ export class PortfolioComponent implements OnInit {
   }
 
   showDetails(id): void {
-    const section = this.router.url.split('/')[1] == 'exhibitions' ? 'exhibitions' : 'works'
+    const section = this.section == 'exhibitions' ? 'exhibitions' : 'works'
     this.router.navigate([`/detail/${section}/${id}`])
   }
 

src/assets/scss/global.scss

@@ -14,6 +14,20 @@ body {
   }
 }
 
+a,
+li,
+button {
+  outline: none !important;
+  &:active,
+  &:focus {
+    outline: none !important;
+  }
+}
+
+.w-100 {
+  width: 100%;
+}
+
 
 .particles {
   position: fixed;