55 changed files with 887 additions and 265 deletions
@ -0,0 +1,16 @@ |
|||||
|
<?php |
||||
|
|
||||
|
$DATAhst="localhost"; |
||||
|
$DATAusr="root"; |
||||
|
$DATApwd="root"; |
||||
|
$DATAdtb="www_dslak_it"; |
||||
|
|
||||
|
/* |
||||
|
$DATAhst="localhost"; |
||||
|
$DATAusr="token"; |
||||
|
$DATApwd="tokendbpwd"; |
||||
|
$DATAdtb="www_dslak_it"; |
||||
|
*/ |
||||
|
|
||||
|
|
||||
|
?> |
||||
@ -0,0 +1,93 @@ |
|||||
|
<?php |
||||
|
@include 'conn.conn'; |
||||
|
$GLOBALS['conn']; |
||||
|
$conn=@mysqli_connect($DATAhst,$DATAusr,$DATApwd,$DATAdtb)or die("CONNECTION ERROR"); |
||||
|
|
||||
|
$content = null; |
||||
|
$content->items = array(); |
||||
|
|
||||
|
$filter = array("portfolio", "installations", "entertainment", "performances", "workshops"); |
||||
|
|
||||
|
switch($_GET['query']) { |
||||
|
case "portfolio": |
||||
|
case "installations": |
||||
|
case "entertainment": |
||||
|
case "performances": |
||||
|
case "workshops": |
||||
|
if($_GET['query'] == 'portfolio') {$filter = '';} else {$filter = "WHERE type='".$_GET['query']."'";} |
||||
|
$qe = mysqli_query($conn,"SELECT * FROM `works` $filter ORDER BY id DESC"); |
||||
|
if(mysqli_num_rows($qe) > 0) { |
||||
|
$content = null; |
||||
|
$content->items = array(); |
||||
|
while($re = mysqli_fetch_array($qe)) { |
||||
|
$item = null; |
||||
|
$item->id = $re['id']; |
||||
|
$item->title = $re['title']; |
||||
|
$item->type = $re['type']; |
||||
|
$item->tags = $re['tags']; |
||||
|
$item->image = $re['image']; |
||||
|
array_push($content->items, $item); |
||||
|
} |
||||
|
} |
||||
|
break; |
||||
|
case "exhibitions": |
||||
|
$qe = mysqli_query($conn,"SELECT * FROM `exhibitions` ORDER BY date_from DESC"); |
||||
|
if(mysqli_num_rows($qe) > 0) { |
||||
|
$content = null; |
||||
|
$content->items = array(); |
||||
|
while($re = mysqli_fetch_array($qe)) { |
||||
|
$item = null; |
||||
|
$item->id = $re['id']; |
||||
|
$item->title = $re['title']; |
||||
|
$item->date_from = $re['date_from']; |
||||
|
$item->date_to = $re['date_to']; |
||||
|
$item->tags = $re['tags']; |
||||
|
$item->image = $re['image']; |
||||
|
array_push($content->items, $item); |
||||
|
} |
||||
|
} |
||||
|
break; |
||||
|
case "detail": |
||||
|
$qe = mysqli_query($conn,"SELECT * FROM `".$_GET['type']."` WHERE id=".$_GET['id']); |
||||
|
if(mysqli_num_rows($qe)>0) { |
||||
|
$content = null; |
||||
|
$re = mysqli_fetch_array($qe); |
||||
|
$item = null; |
||||
|
$item->id = $re['id']; |
||||
|
$item->title = $re['title']; |
||||
|
$item->content = $re['content']; |
||||
|
$item->tags = $re['tags']; |
||||
|
$item->image = $re['image']; |
||||
|
if($_GET['type'] == 'exhibitions') { |
||||
|
$item->date_from = $re['date_from']; |
||||
|
$item->date_to = $re['date_to']; |
||||
|
$item->works = array(); |
||||
|
$qx = mysqli_query($conn,"SELECT id,title FROM `works` WHERE id IN (".$re['works'].")"); |
||||
|
while($re = mysqli_fetch_array($qx)) { |
||||
|
$ex = null; |
||||
|
$ex->id = $re['id']; |
||||
|
$ex->title = $re['title']; |
||||
|
array_push($item->works, $ex); |
||||
|
} |
||||
|
} else if($_GET['type'] == 'works') { |
||||
|
$item->type = $re['type']; |
||||
|
$item->exhibitions = array(); |
||||
|
$qx = mysqli_query($conn,"SELECT id,title FROM `exhibitions` WHERE id IN (".$re['exhibitions'].")"); |
||||
|
while($re = mysqli_fetch_array($qx)) { |
||||
|
$ex = null; |
||||
|
$ex->id = $re['id']; |
||||
|
$ex->title = $re['title']; |
||||
|
array_push($item->exhibitions, $ex); |
||||
|
} |
||||
|
} |
||||
|
$content->item = $item; |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
header('Access-Control-Allow-Origin: *'); |
||||
|
header('Content-Type: application/json'); |
||||
|
echo json_encode($content); |
||||
|
|
||||
|
?> |
||||
@ -1 +1,42 @@ |
|||||
<p>about works!</p> |
|
||||
|
<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> |
||||
|
|
||||
|
<p> Nel 2011 realizza le sue prime installazioni interattive e ad oggi è alla continua ricerca di soluzioni creative. </p> |
||||
|
|
||||
|
<p> <b>DSLAK</b> ha ad oggi all'attivo numerosi progetti, come workshops sull'utilizzo di sensori e microcontrollori nel campo dell'interattività e delle arti digitali, installazioni interattive e performances live frutto della sperimentazione e della ricerca continua, oltre alle collaborazioni con diversi artisti nazionali ed internazionali. </p> |
||||
|
|
||||
|
|
||||
|
<div class="about-links pt-4 pb-5"> |
||||
|
<a class="link" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/dslakMediaArts"> |
||||
|
<span class="icon icon-facebook"></span> |
||||
|
<div class="label">dslakMediaArts</div> |
||||
|
</a> |
||||
|
<a class="link" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/c/Dslak"> |
||||
|
<span class="icon icon-youtube"></span> |
||||
|
<div class="label">dslak</div> |
||||
|
</a> |
||||
|
<a class="link" target="_blank" rel="noopener noreferrer" href="https://vimeo.com/dslak"> |
||||
|
<span class="icon icon-vimeo"></span> |
||||
|
<div class="label">dslak</div> |
||||
|
</a> |
||||
|
<a class="link" target="_blank" rel="noopener noreferrer" href="https://twitter.com/dslak_"> |
||||
|
<span class="icon icon-twitter"></span> |
||||
|
<div class="label">dslak_</div> |
||||
|
</a> |
||||
|
<a class="link" target="_blank" rel="noopener noreferrer" href="tel:+393391805849"> |
||||
|
<span class="icon icon-phone"></span> |
||||
|
<div class="label">+39 339 1805849</div> |
||||
|
</a> |
||||
|
<a class="link" target="_blank" rel="noopener noreferrer" href="mailto:dslaknma@gmail.com"> |
||||
|
<span class="icon icon-envelope"></span> |
||||
|
<div class="label">dslaknma@gmail.com</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|||||
@ -0,0 +1,86 @@ |
|||||
|
@import "../../assets/scss/variables"; |
||||
|
|
||||
|
.component-about { |
||||
|
z-index: 0; |
||||
|
|
||||
|
.content { |
||||
|
position: relative; |
||||
|
margin: 150px auto 80px auto; |
||||
|
padding: 40px 50px; |
||||
|
font-size: $font-18; |
||||
|
text-align: justify; |
||||
|
background: $white-alpha; |
||||
|
color: $black; |
||||
|
box-shadow: 0px 0px 25px $white-alpha; |
||||
|
border-radius: 10px; |
||||
|
|
||||
|
.about-links { |
||||
|
color: $black; |
||||
|
|
||||
|
.link { |
||||
|
display: flex; |
||||
|
text-decoration: none; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
line-height: 35px; |
||||
|
width: 200px; |
||||
|
transition: transform .3s; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
|
||||
|
.icon { |
||||
|
display: inline-block; |
||||
|
font-size: 15px; |
||||
|
padding: 5px; |
||||
|
margin: 5px; |
||||
|
background: $dark-gray; |
||||
|
border-radius: 2px; |
||||
|
color: $white; |
||||
|
height: 25px; |
||||
|
width: 25px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.label { |
||||
|
display: inline-block; |
||||
|
color: $dark-gray; |
||||
|
font-size: $font-16; |
||||
|
padding-left: 5px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.back { |
||||
|
position: absolute; |
||||
|
top: -40px; |
||||
|
left: 0px; |
||||
|
height: 40px; |
||||
|
width: 60px; |
||||
|
appearance: none; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
font-size: $font-40; |
||||
|
color: $black-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-about { |
||||
|
.content { |
||||
|
transform: rotate(2deg) skew(0deg, -6deg); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,54 +1,4 @@ |
|||||
<app-header></app-header> |
<app-header></app-header> |
||||
<router-outlet></router-outlet> |
<router-outlet></router-outlet> |
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
<br> |
|
||||
|
|
||||
|
<Particles class="particles" [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)" *ngIf="particlesEnabled"></Particles> |
||||
|
|||||
@ -0,0 +1,21 @@ |
|||||
|
<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.content"></div> |
||||
|
<span class="tags" *ngIf="details.tags"><b>Tags:</b> {{details.tags}}</span> |
||||
|
|
||||
|
<span class="links" *ngIf="details.exhibitions && details.exhibitions.length"><b>Exhibitions:</b> |
||||
|
<span class="link" *ngFor="let exhibition of details.exhibitions" |
||||
|
(click)="showDetails('exhibitions', exhibition.id)" |
||||
|
routerLink="/detail/exhibitions/{{exhibition.id}}">{{exhibition.title}} </span> |
||||
|
</span> |
||||
|
|
||||
|
<span class="links" *ngIf="details.works && details.works.length"><b>Works:</b> |
||||
|
<span class="link" *ngFor="let work of details.works" |
||||
|
(click)="showDetails('works', work.id)" |
||||
|
routerLink="/detail/works/{{work.id}}">{{work.title}} </span> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,73 @@ |
|||||
|
@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; |
||||
|
padding-bottom: 40px; |
||||
|
} |
||||
|
|
||||
|
.tags, |
||||
|
.links { |
||||
|
display: block; |
||||
|
font-size: $font-12; |
||||
|
text-transform: uppercase; |
||||
|
padding: 5px 0; |
||||
|
|
||||
|
.link { |
||||
|
display: inline-block; |
||||
|
font-size: $font-12; |
||||
|
text-transform: uppercase; |
||||
|
padding: 0 5px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.back { |
||||
|
position: absolute; |
||||
|
top: -40px; |
||||
|
left: 0px; |
||||
|
height: 40px; |
||||
|
width: 60px; |
||||
|
appearance: none; |
||||
|
border: none; |
||||
|
padding: 0; |
||||
|
font-size: $font-40; |
||||
|
color: $black-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); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1,20 +1,20 @@ |
|||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
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(() => { |
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
TestBed.configureTestingModule({ |
||||
declarations: [ ExhibitionsComponent ] |
|
||||
|
declarations: [ DetailComponent ] |
||||
}) |
}) |
||||
.compileComponents(); |
.compileComponents(); |
||||
})); |
})); |
||||
|
|
||||
beforeEach(() => { |
beforeEach(() => { |
||||
fixture = TestBed.createComponent(ExhibitionsComponent); |
|
||||
|
fixture = TestBed.createComponent(DetailComponent); |
||||
component = fixture.componentInstance; |
component = fixture.componentInstance; |
||||
fixture.detectChanges(); |
fixture.detectChanges(); |
||||
}); |
}); |
||||
@ -0,0 +1,50 @@ |
|||||
|
import { Component, OnInit } from '@angular/core' |
||||
|
import { Router, NavigationEnd, NavigationStart, ActivatedRoute } 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 = {} |
||||
|
private history: string[] = [] |
||||
|
|
||||
|
constructor( |
||||
|
private apisService: ApisService, |
||||
|
private router: Router, |
||||
|
private location: Location, |
||||
|
private activeRoute: ActivatedRoute |
||||
|
) { } |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.showDetails(this.router.url.split('/')[2], this.router.url.split('/')[3]) |
||||
|
} |
||||
|
|
||||
|
showDetails(section, id): void { |
||||
|
this.apisService.getDetails(section, id).toPromise().then((response) => { |
||||
|
if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) { |
||||
|
this.history.push(`/detail/${section}/${id}`) |
||||
|
} |
||||
|
this.details = response.item |
||||
|
},(error) => { |
||||
|
console.error('getPortfolio ERROR', error) |
||||
|
}).catch((e) => { |
||||
|
console.error('getPortfolio CATCH', e) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
back(): void { |
||||
|
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.location.back() |
||||
|
} else { |
||||
|
this.location.back() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -1 +0,0 @@ |
|||||
<p>entertainment works!</p> |
|
||||
@ -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(); |
|
||||
}); |
|
||||
}); |
|
||||
@ -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 { |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
<p>exhibitions works!</p> |
|
||||
@ -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 { |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
<p>installations works!</p> |
|
||||
@ -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(); |
|
||||
}); |
|
||||
}); |
|
||||
@ -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 { |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1 +0,0 @@ |
|||||
<p>performances works!</p> |
|
||||
@ -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(); |
|
||||
}); |
|
||||
}); |
|
||||
@ -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 { |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1 +1,16 @@ |
|||||
<p>portfolio works!</p> |
|
||||
|
<div class="component-portfolio"> |
||||
|
<div class="container"> |
||||
|
<div class="row"> |
||||
|
<div class="col-12 col-sm-6 mx-auto" [ngClass]="'col-md-' + ((item.id % 3)+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> |
||||
|
</div> |
||||
|
</div> |
||||
|
|||||
@ -0,0 +1,102 @@ |
|||||
|
@import "../../assets/scss/variables"; |
||||
|
|
||||
|
.component-portfolio { |
||||
|
padding-top: 140px; |
||||
|
|
||||
|
.box { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
//background: $black-alpha; |
||||
|
border-radius: 10px; |
||||
|
overflow: hidden; |
||||
|
margin: 10px 0; |
||||
|
padding: 40px 20px; |
||||
|
min-height: 250px; |
||||
|
cursor: pointer; |
||||
|
transition: transform .4s, background .4s; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
|
||||
|
.image { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
object-fit: cover; |
||||
|
transform: translate(-50%, -50%) scale(1.2); |
||||
|
opacity: .5; |
||||
|
filter: grayscale(100%) invert(100%); |
||||
|
transition: transform .4s, opacity .4s, filter .4s; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
z-index: 0; |
||||
|
} |
||||
|
|
||||
|
.text { |
||||
|
display: block; |
||||
|
margin: auto; |
||||
|
text-align: center; |
||||
|
transform: translate(0%, 0%); |
||||
|
color: $black; |
||||
|
transition: color .4s; |
||||
|
-webkit-backface-visibility: hidden; |
||||
|
z-index: 1; |
||||
|
|
||||
|
.title { |
||||
|
display: block; |
||||
|
font-size: $font-20; |
||||
|
text-transform: uppercase; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.type { |
||||
|
display: block; |
||||
|
font-size: $font-16; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.tags { |
||||
|
display: block; |
||||
|
font-size: $font-12; |
||||
|
text-transform: uppercase; |
||||
|
font-weight: bold; |
||||
|
padding-top: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@each $angle in 0,1,2,3,4,5,6 { |
||||
|
&.skew-#{$angle} { |
||||
|
transform: skew(#{$angle - 3}deg, #{$angle - 3}deg); |
||||
|
/*animation: zoom#{$angle} #{$angle + 3}s ease-in infinite forwards; |
||||
|
@keyframes zoom#{$angle} { |
||||
|
0% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); } |
||||
|
50% { transform: scale(1.1) skew(#{$angle - 3}deg, #{$angle - 3}deg); } |
||||
|
75% { transform: scale(.9) skew(#{$angle - 3}deg, #{$angle - 3}deg); } |
||||
|
100% { transform: scale(1) skew(#{$angle - 3}deg, #{$angle - 3}deg); } |
||||
|
}*/ |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
background: $black; |
||||
|
z-index: 50; |
||||
|
|
||||
|
//animation-play-state: paused; |
||||
|
|
||||
|
@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 { |
||||
|
filter: grayscale(100%) invert(0%) brightness(.5); |
||||
|
opacity: .9; |
||||
|
transform: translate(-50%, -50%) scale(1.6); |
||||
|
} |
||||
|
.text { |
||||
|
color: $yellow; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,16 @@ |
|||||
|
import { TestBed } from '@angular/core/testing'; |
||||
|
|
||||
|
import { ApisService } from './apis.service'; |
||||
|
|
||||
|
describe('ApisService', () => { |
||||
|
let service: ApisService; |
||||
|
|
||||
|
beforeEach(() => { |
||||
|
TestBed.configureTestingModule({}); |
||||
|
service = TestBed.inject(ApisService); |
||||
|
}); |
||||
|
|
||||
|
it('should be created', () => { |
||||
|
expect(service).toBeTruthy(); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,33 @@ |
|||||
|
import { Injectable } from '@angular/core' |
||||
|
import { HttpClient, HttpHeaders, HttpParams, HttpRequest } from '@angular/common/http' |
||||
|
import { Observable, Subject, throwError } from 'rxjs' |
||||
|
import { catchError } from 'rxjs/operators' |
||||
|
import { BaseService } from './base-service' |
||||
|
import { environment } from '../../environments/environment' |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
export class ApisService extends BaseService { |
||||
|
|
||||
|
private restApi = `${environment.API_URL}` |
||||
|
|
||||
|
constructor(private http: HttpClient) { |
||||
|
super() |
||||
|
} |
||||
|
|
||||
|
getPortfolio(section): Observable<any> { |
||||
|
let urlApi = `${this.restApi}?query=${section}` |
||||
|
return this.http.get<any>(urlApi).pipe( |
||||
|
catchError(this.handleError) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
getDetails(section, id): Observable<any> { |
||||
|
let urlApi = `${this.restApi}?query=detail&type=${section}&id=${id}` |
||||
|
return this.http.get<any>(urlApi).pipe( |
||||
|
catchError(this.handleError) |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
import { HttpErrorResponse } from "@angular/common/http" |
||||
|
import { throwError } from "rxjs" |
||||
|
import { ParseXML } from "./parse-xml" |
||||
|
|
||||
|
export class BaseService { |
||||
|
|
||||
|
constructor() { } |
||||
|
|
||||
|
protected handleError(error: HttpErrorResponse) { |
||||
|
if(error.error instanceof ErrorEvent) { |
||||
|
console.error('An error occurred:', error.error.message) |
||||
|
} |
||||
|
|
||||
|
return throwError( ParseXML.getXMLResponseMessage(error.error) ) |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,13 @@ |
|||||
|
export class ParseXML { |
||||
|
constructor() {} |
||||
|
|
||||
|
public sanitize(str: string): string { |
||||
|
let sanitizeString = encodeURIComponent(str).replace(/%0A/g, '') |
||||
|
return decodeURIComponent(sanitizeString) |
||||
|
} |
||||
|
|
||||
|
public static getXMLResponseMessage(responseBody: string): string { |
||||
|
let parseXMLClass = new ParseXML() |
||||
|
return parseXMLClass.sanitize(responseBody).match(/<Message>(.*?)<\/Message>/g)[0].replace(/<[^>]+>/g, '') |
||||
|
} |
||||
|
} |
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,75 @@ |
|||||
|
@font-face { |
||||
|
font-family: 'icomoon'; |
||||
|
src: url('../fonts/icomoon.eot?9ti7zb'); |
||||
|
src: url('../fonts/icomoon.eot?9ti7zb#iefix') format('embedded-opentype'), |
||||
|
url('../fonts/icomoon.ttf?9ti7zb') format('truetype'), |
||||
|
url('../fonts/icomoon.woff?9ti7zb') format('woff'), |
||||
|
url('../fonts/icomoon.svg?9ti7zb#icomoon') format('svg'); |
||||
|
font-weight: normal; |
||||
|
font-style: normal; |
||||
|
font-display: block; |
||||
|
} |
||||
|
|
||||
|
[class^="icon-"], [class*=" icon-"] { |
||||
|
/* use !important to prevent issues with browser extensions that change fonts */ |
||||
|
font-family: 'icomoon' !important; |
||||
|
speak: never; |
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
font-variant: normal; |
||||
|
text-transform: none; |
||||
|
line-height: 1; |
||||
|
|
||||
|
/* Better Font Rendering =========== */ |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
} |
||||
|
|
||||
|
.icon-envelope-o:before { |
||||
|
content: "\f003"; |
||||
|
} |
||||
|
.icon-twitter-square:before { |
||||
|
content: "\f081"; |
||||
|
} |
||||
|
.icon-facebook-square:before { |
||||
|
content: "\f082"; |
||||
|
} |
||||
|
.icon-phone:before { |
||||
|
content: "\f095"; |
||||
|
} |
||||
|
.icon-phone-square:before { |
||||
|
content: "\f098"; |
||||
|
} |
||||
|
.icon-twitter:before { |
||||
|
content: "\f099"; |
||||
|
} |
||||
|
.icon-facebook:before { |
||||
|
content: "\f09a"; |
||||
|
} |
||||
|
.icon-facebook-f:before { |
||||
|
content: "\f09a"; |
||||
|
} |
||||
|
.icon-envelope:before { |
||||
|
content: "\f0e0"; |
||||
|
} |
||||
|
.icon-youtube-square:before { |
||||
|
content: "\f166"; |
||||
|
} |
||||
|
.icon-youtube:before { |
||||
|
content: "\f167"; |
||||
|
} |
||||
|
.icon-vimeo-square:before { |
||||
|
content: "\f194"; |
||||
|
} |
||||
|
.icon-git-square:before { |
||||
|
content: "\f1d2"; |
||||
|
} |
||||
|
.icon-git:before { |
||||
|
content: "\f1d3"; |
||||
|
} |
||||
|
.icon-vimeo:before { |
||||
|
content: "\f27d"; |
||||
|
} |
||||
|
.icon-back:before { |
||||
|
content: "\e900"; |
||||
|
} |
||||
@ -1,3 +1,7 @@ |
|||||
@import "./variables"; |
@import "./variables"; |
||||
@import "./fonts"; |
@import "./fonts"; |
||||
|
@import "./icons"; |
||||
@import "./global"; |
@import "./global"; |
||||
|
|
||||
|
|
||||
|
@import "node_modules/bootstrap/scss/bootstrap-grid"; |
||||
|
|||||
@ -1,3 +1,5 @@ |
|||||
export const environment = { |
export const environment = { |
||||
production: true |
|
||||
}; |
|
||||
|
production: true, |
||||
|
|
||||
|
API_URL: `https://apis.dslak.it/` |
||||
|
} |
||||
|
|||||
@ -1,16 +1,5 @@ |
|||||
// This file can be replaced during build by using the `fileReplacements` array.
|
|
||||
// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
|
|
||||
// The list of file replacements can be found in `angular.json`.
|
|
||||
|
|
||||
export const environment = { |
export const environment = { |
||||
production: false |
|
||||
}; |
|
||||
|
production: false, |
||||
|
|
||||
/* |
|
||||
* For easier debugging in development mode, you can import the following file |
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. |
|
||||
* |
|
||||
* This import should be commented out in production mode because it will have a negative impact |
|
||||
* on performance if an error is thrown. |
|
||||
*/ |
|
||||
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
|
|
||||
|
API_URL: `http://dslakng.local/apis/` |
||||
|
} |
||||
|
|||||
|
Before Width: | Height: | Size: 948 B |
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
Reference in new issue