add details

src/app/about/about.component.html

@@ -1,6 +1,8 @@
 <div class="component-about container">
   <div class="row">
     <div class="col-10 content mx-auto">
+      <button class="back icon-back" (click)="back()"></button>
+
       <p> <b>DSLAK</b> è un progetto che nasce nel 2010 da un'idea di Carmine De Rosa, sviluppatore ed amministratore di sistema in ambiente Unix/Linux, dopo aver completato gli studi in ambito elettronico approfondisce le proprie conoscenze informatiche presso l'Università di Salerno dove insieme ad un gruppo di appassionati di haking fonda HCSSLUG (Linux Users Group dell'Università di Salerno) e ed il relativo HackLab con il quale realizza numerosi progetti in ambito OpenSource, basati sulla ricerca e sulla sperimentazione in ambito tecnologico. </p>
 
       <p> Nel 2006 si avvicina alle arti digitali e nel 2009, incuriosito dapprima dall'aspetto tecnico ma senza tralasciare quello scenico e concettuale, inizia ad approfondire le propie conoscenze nell'ambito della new-media art e delle installazioni interattive, studiando le soluzioni adottate da artisti affermati e sviluppando varie soluzioni alternative che utilizzano però un approccio più sostenibile, efficiente e soprattutto open. </p>

src/app/about/about.component.scss

@@ -4,6 +4,7 @@
   z-index: 0;
 
   .content {
+    position: relative;
     margin: 150px auto 80px auto;
     padding: 40px 50px;
     font-size: $font-18;
@@ -24,7 +25,7 @@
         line-height: 35px;
         width: 200px;
         transition: transform .3s;
-
+        -webkit-backface-visibility: hidden;
 
         .icon {
           display: inline-block;
@@ -52,6 +53,27 @@
         }
       }
     }
+
+    .back {
+      position: absolute;
+      top: -40px;
+      left: 0px;
+      height: 40px;
+      width: 60px;
+      appearance: none;
+      border: none;
+      padding: 0;
+      font-size: $font-40;
+      color: $white-alpha;
+      background: transparent;
+      cursor: pointer;
+      transition: transform .3s;
+      -webkit-backface-visibility: hidden;
+
+      &:hover {
+        transform: scale(1.1) translateX(-10px);
+      }
+    }
   }
 }
 

src/app/about/about.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core'
+import { Location } from '@angular/common'
 
 @Component({
   selector: 'app-about',
@@ -7,9 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AboutComponent implements OnInit {
 
-  constructor() { }
+  constructor(
+    private location: Location
+  ) { }
 
   ngOnInit(): void {
   }
 
+  back() {
+    this.location.back()
+  }
 }

src/app/app-layout/app-layout.component.ts

@@ -8,7 +8,7 @@ import type { Container } from 'tsparticles'
 })
 export class AppLayoutComponent implements OnInit {
 
-  public particlesEnabled: boolean = false
+  public particlesEnabled: boolean = true
   public id: string = 'tsparticles'
 
   public particlesOptions: any = {

src/app/app-routing.module.ts

@@ -3,12 +3,7 @@ import { Routes, RouterModule } from '@angular/router'
 import { AppLayoutComponent } from './app-layout/app-layout.component'
 import { AboutComponent } from './about/about.component'
 import { PortfolioComponent } from './portfolio/portfolio.component'
-import { ExhibitionsComponent } from './exhibitions/exhibitions.component'
-import { InstallationsComponent } from './installations/installations.component'
-import { EntertainmentComponent } from './entertainment/entertainment.component'
-import { PerformancesComponent } from './performances/performances.component'
-import { WorkshopsComponent } from './workshops/workshops.component'
-
+import { DetailComponent } from './detail/detail.component'
 
 const routes: Routes = [
   {
@@ -17,13 +12,19 @@ const routes: Routes = [
     children: [
       //{ path: '', redirectTo: '/portfolio', pathMatch: 'full' },
       { path: '', component: PortfolioComponent },
-      { path: 'portfolio', component: PortfolioComponent },
       { path: 'about', component: AboutComponent },
-      { path: 'exhibitions', component: ExhibitionsComponent },
-      { path: 'installations', component: InstallationsComponent },
-      { path: 'entertainment', component: EntertainmentComponent },
-      { path: 'performances', component: PerformancesComponent },
-      { path: 'workshops', component: WorkshopsComponent }
+      { path: 'portfolio', component: PortfolioComponent },
+      { path: 'exhibitions', component: PortfolioComponent },
+      { path: 'installations', component: PortfolioComponent },
+      { path: 'entertainment', component: PortfolioComponent },
+      { path: 'performances', component: PortfolioComponent },
+      { path: 'workshops', component: PortfolioComponent },
+      { path: 'detail', component: DetailComponent,
+        children: [
+          { path: '**', component: DetailComponent }
+        ]
+      }
+
     ]
   }
 ]

src/app/app.module.ts

@@ -9,11 +9,7 @@ import { HeaderComponent } from './header/header.component';
 import { AppLayoutComponent } from './app-layout/app-layout.component';
 import { AboutComponent } from './about/about.component';
 import { PortfolioComponent } from './portfolio/portfolio.component';
-import { ExhibitionsComponent } from './exhibitions/exhibitions.component';
-import { InstallationsComponent } from './installations/installations.component';
-import { EntertainmentComponent } from './entertainment/entertainment.component';
-import { PerformancesComponent } from './performances/performances.component';
-import { WorkshopsComponent } from './workshops/workshops.component';
+import { DetailComponent } from './detail/detail.component';
 
 @NgModule({
   declarations: [
@@ -22,11 +18,7 @@ import { WorkshopsComponent } from './workshops/workshops.component';
     AppLayoutComponent,
     AboutComponent,
     PortfolioComponent,
-    ExhibitionsComponent,
-    InstallationsComponent,
-    EntertainmentComponent,
-    PerformancesComponent,
-    WorkshopsComponent
+    DetailComponent
   ],
   imports: [
     BrowserModule,

src/app/detail/detail.component.html

@@ -0,0 +1,9 @@
+<div class="component-detail container">
+  <div class="row">
+    <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="text" [innerHTML]="details.text"></div>
+      <span class="tags"><b>Tags:</b> {{details.tags}}</span>
+  </div>
+</div>

src/app/detail/detail.component.scss

@@ -0,0 +1,63 @@
+@import "../../assets/scss/variables";
+
+.component-detail {
+  z-index: 0;
+
+  .content {
+    position: relative;
+    margin: 150px auto 80px auto;
+    padding: 40px 50px;
+    background: $white-alpha;
+    color: $black;
+    box-shadow: 0px 0px 25px $white-alpha;
+    border-radius: 10px;
+
+    .title {
+      margin-top: 0;
+      font-size: $font-34;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    .text {
+      font-size: $font-18;
+      text-align: justify;
+    }
+
+    .tags {
+      display: block;
+      font-size: $font-12;
+      text-transform: uppercase;
+      padding-top: 40px;
+    }
+
+    .back {
+      position: absolute;
+      top: -40px;
+      left: 0px;
+      height: 40px;
+      width: 60px;
+      appearance: none;
+      border: none;
+      padding: 0;
+      font-size: $font-40;
+      color: $white-alpha;
+      background: transparent;
+      cursor: pointer;
+      transition: transform .3s;
+      -webkit-backface-visibility: hidden;
+
+      &:hover {
+        transform: scale(1.1) translateX(-10px);
+      }
+    }
+  }
+}
+
+@media (min-width: map-get($grid-breakpoints, 'md')) {
+ .component-detail {
+    .content {
+      transform: rotate(2deg) skew(0deg, -6deg);
+    }
+  }
+}

src/app/exhibitions/exhibitions.component.spec.ts → src/app/detail/detail.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ExhibitionsComponent } from './exhibitions.component';
+import { DetailComponent } from './detail.component';
 
-describe('ExhibitionsComponent', () => {
-  let component: ExhibitionsComponent;
-  let fixture: ComponentFixture<ExhibitionsComponent>;
+describe('DetailComponent', () => {
+  let component: DetailComponent;
+  let fixture: ComponentFixture<DetailComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ExhibitionsComponent ]
+      declarations: [ DetailComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ExhibitionsComponent);
+    fixture = TestBed.createComponent(DetailComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/detail/detail.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core'
+import { Router, NavigationEnd } from '@angular/router'
+import { Location } from '@angular/common'
+import { ApisService } from '../services/apis.service'
+
+@Component({
+  selector: 'app-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.scss']
+})
+export class DetailComponent implements OnInit {
+
+  public details: any = {}
+
+  constructor(
+    private apisService: ApisService,
+    private router: Router,
+    private location: Location
+  ){ }
+
+  ngOnInit(): void {
+    this.showDetails(this.router.url.split('/')[2])
+  }
+
+  showDetails(id): void {
+    this.apisService.getDetails(id).toPromise().then((response) => {
+      this.details = response.item
+    },(error) => {
+      console.error('getPortfolio ERROR', error)
+    }).catch((e) => {
+      console.error('getPortfolio CATCH', e)
+    })
+  }
+
+  back() {
+    this.location.back()
+  }
+}

src/app/entertainment/entertainment.component.html

@@ -1 +0,0 @@
-<p>entertainment works!</p>

src/app/entertainment/entertainment.component.spec.ts

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

src/app/entertainment/entertainment.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-entertainment',
-  templateUrl: './entertainment.component.html',
-  styleUrls: ['./entertainment.component.scss']
-})
-export class EntertainmentComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/exhibitions/exhibitions.component.html

@@ -1 +0,0 @@
-<p>exhibitions works!</p>

src/app/exhibitions/exhibitions.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-exhibitions',
-  templateUrl: './exhibitions.component.html',
-  styleUrls: ['./exhibitions.component.scss']
-})
-export class ExhibitionsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/header/header.component.scss

@@ -65,8 +65,8 @@
     background: transparent;
 
     .logo-container {
-      height: 80px;
-      width: 80px;
+      height: 100px;
+      width: 100px;
 
       .circles {
         &:before,
@@ -76,8 +76,8 @@
       }
 
       &.menu-open {
-        height: 120px;
-        width: 120px;
+        height: 140px;
+        width: 140px;
         .circles {
           &:before,
           &:after {

src/app/installations/installations.component.html

@@ -1 +0,0 @@
-<p>installations works!</p>

src/app/installations/installations.component.spec.ts

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

src/app/installations/installations.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-installations',
-  templateUrl: './installations.component.html',
-  styleUrls: ['./installations.component.scss']
-})
-export class InstallationsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/performances/performances.component.html

@@ -1 +0,0 @@
-<p>performances works!</p>

src/app/performances/performances.component.spec.ts

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

src/app/performances/performances.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-performances',
-  templateUrl: './performances.component.html',
-  styleUrls: ['./performances.component.scss']
-})
-export class PerformancesComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/portfolio/portfolio.component.html

@@ -1,12 +1,14 @@
 <div class="component-portfolio">
   <div class="container">
     <div class="row">
-      <div class="col-3 box" [ngClass]="'skew-' + (item.id % 6)" *ngFor="let item of portfolioItems">
-        <img class="image" src="assets/{{item.image}}">
-        <div class="text">
-          <span class="title">{{item.title}}</span>
-          <span class="type">{{item.type}}</span>
-          <span class="tags">{{item.tags}}</span>
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3" *ngFor="let item of portfolioItems">
+        <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)">
+          <img class="image" src="assets/{{item.image}}">
+          <div class="text">
+            <span class="title">{{item.title}}</span>
+            <span class="type">{{item.type}}</span>
+            <span class="tags">{{item.tags}}</span>
+          </div>
         </div>
       </div>
     </div>

src/app/portfolio/portfolio.component.scss

@@ -1,7 +1,7 @@
 @import "../../assets/scss/variables";
 
 .component-portfolio {
-  padding-top: 100px;
+  padding-top: 140px;
 
   .box {
     position: relative;
@@ -9,7 +9,7 @@
     background: $black;
     border-radius: 10px;
     overflow: hidden;
-    margin: 40px;
+    margin: 20px 0;
     padding: 20px;
     cursor: pointer;
     transition: transform .4s;
@@ -64,10 +64,12 @@
     }
 
     &:hover {
-      //transform: scale(1.4) skew(2deg, 2deg) rotate(2deg);
+      z-index: 50;
+
       @each $angle in 0,1,2,3,4,5,6 {
           &.skew-#{$angle} {transform: scale(1.4) rotate(2deg) skew(#{3 - $angle}deg, #{3 - $angle}deg) ;}
         }
+
       .image {
         transform: translate(-50%, -50%) scale(1.4);
       }

src/app/portfolio/portfolio.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core'
+import { Router, NavigationEnd } from '@angular/router'
 import { ApisService } from '../services/apis.service'
 
 @Component({
@@ -10,10 +11,13 @@ export class PortfolioComponent implements OnInit {
 
   public portfolioItems: any = []
 
-  constructor(private apisService: ApisService) { }
+  constructor(
+    private apisService: ApisService,
+    private router: Router)
+  { }
 
   ngOnInit(): void {
-    this.apisService.getPortfolio('portfolio').toPromise().then((response) => {
+    this.apisService.getPortfolio(this.router.url.split('/')[1]).toPromise().then((response) => {
       this.portfolioItems = response.items
     },(error) => {
       console.error('getPortfolio ERROR', error)
@@ -22,5 +26,8 @@ export class PortfolioComponent implements OnInit {
     })
   }
 
+  showDetails(id): void {
+    this.router.navigate([`/detail/${id}`])
+  }
 
 }

src/app/services/apis.service.ts

@@ -23,4 +23,11 @@ export class ApisService extends BaseService {
     )
   }
 
+  getDetails(id): Observable<any> {
+    let urlApi = `${this.restApi}?query=single&id=${id}`
+    return this.http.get<any>(urlApi).pipe(
+      catchError(this.handleError)
+    )
+  }
+
 }

src/assets/fonts/icomoon.svg

@@ -7,6 +7,7 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="back" d="M424.633 593.293l-386.090-308.871h946.914v100h-661.836l163.48 130.785z" />
 <glyph unicode="&#xf003;" glyph-name="envelope-o" d="M950.857 91.428v438.857c-12-13.714-25.143-26.286-39.429-37.714-81.714-62.857-164-126.857-243.429-193.143-42.857-36-96-80-155.429-80h-1.143c-59.429 0-112.571 44-155.429 80-79.429 66.286-161.714 130.286-243.429 193.143-14.286 11.429-27.429 24-39.429 37.714v-438.857c0-9.714 8.571-18.286 18.286-18.286h841.143c9.714 0 18.286 8.571 18.286 18.286zM950.857 692c0 14.286 3.429 39.429-18.286 39.429h-841.143c-9.714 0-18.286-8.571-18.286-18.286 0-65.143 32.571-121.714 84-162.286 76.571-60 153.143-120.571 229.143-181.143 30.286-24.571 85.143-77.143 125.143-77.143h1.143c40 0 94.857 52.571 125.143 77.143 76 60.571 152.571 121.143 229.143 181.143 37.143 29.143 84 92.571 84 141.143zM1024 713.143v-621.714c0-50.286-41.143-91.429-91.429-91.429h-841.143c-50.286 0-91.429 41.143-91.429 91.429v621.714c0 50.286 41.143 91.429 91.429 91.429h841.143c50.286 0 91.429-41.143 91.429-91.429z" />
 <glyph unicode="&#xf081;" glyph-name="twitter-square" horiz-adv-x="878" d="M731.429 602.286c-21.714-9.714-44.571-16-69.143-19.429 25.143 14.857 44 38.857 53.143 66.857-23.429-13.714-49.143-24-76.571-29.143-21.714 23.429-53.143 37.714-87.429 37.714-66.286 0-120-53.714-120-120 0-9.143 0.571-18.857 2.857-27.429-100 5.143-188.571 52.571-248 125.714-10.286-17.714-16.571-38.857-16.571-60.571 0-41.714 19.429-78.286 52-100-20 0.571-38.857 6.286-57.143 14.857v-1.143c0-58.286 44-106.857 98.857-117.714-10.286-2.857-18.286-4.571-29.143-4.571-7.429 0-14.857 1.143-22.286 2.286 15.429-47.429 59.429-82.286 112-83.429-41.143-32-92.571-51.429-149.143-51.429-9.714 0-19.429 0.571-28.571 1.714 53.143-33.714 116-53.714 184-53.714 220.571 0 341.714 182.857 341.714 341.714 0 5.143 0 10.286-0.571 15.429 23.429 16.571 44 37.714 60 62.286zM877.714 713.143v-548.571c0-90.857-73.714-164.571-164.571-164.571h-548.571c-90.857 0-164.571 73.714-164.571 164.571v548.571c0 90.857 73.714 164.571 164.571 164.571h548.571c90.857 0 164.571-73.714 164.571-164.571z" />
 <glyph unicode="&#xf082;" glyph-name="facebook-square" horiz-adv-x="878" d="M713.143 877.714c90.857 0 164.571-73.714 164.571-164.571v-548.571c0-90.857-73.714-164.571-164.571-164.571h-107.429v340h113.714l17.143 132.571h-130.857v84.571c0 38.286 10.286 64 65.714 64l69.714 0.571v118.286c-12 1.714-53.714 5.143-101.714 5.143-101.143 0-170.857-61.714-170.857-174.857v-97.714h-114.286v-132.571h114.286v-340h-304c-90.857 0-164.571 73.714-164.571 164.571v548.571c0 90.857 73.714 164.571 164.571 164.571h548.571z" />

src/assets/scss/global.scss

@@ -7,6 +7,7 @@ body {
   font-size: $font-20;
   color: $black;
   background: $yellow;
+  overflow-x: hidden;
 
   &.no-scroll {
     overflow: hidden;

src/assets/scss/icons.scss

@@ -70,3 +70,6 @@
 .icon-vimeo:before {
   content: "\f27d";
 }
+.icon-back:before {
+  content: "\e900";
+}