diff --git a/src/apis/index.php b/src/apis/index.php index b91173e..b7a196a 100644 --- a/src/apis/index.php +++ b/src/apis/index.php @@ -15,7 +15,7 @@ if(isset($_GET['query'])) { case "performances": case "workshops": if($_GET['query'] == 'portfolio') {$filter = '';} else {$filter = "WHERE type='".$_GET['query']."'";} - if($_GET['random']) {$order = 'ORDER BY RAND()';} else {$order = "ORDER BY id DESC";} + if($_GET['random'] == 'true') {$order = 'ORDER BY RAND()';} else {$order = "ORDER BY id DESC";} $qe = mysqli_query($conn,"SELECT * FROM `works` $filter $order"); if(mysqli_num_rows($qe) > 0) { $content = null; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 2762abb..f16fb86 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; - @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -7,4 +6,7 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'Dslak | new-media arts'; + + public constructor() { } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cf7935c..e9ca59f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,4 +1,4 @@ -import { BrowserModule } from '@angular/platform-browser'; +import { BrowserModule, Title } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { NgParticlesModule } from "ng-particles"; @@ -38,7 +38,9 @@ import { SpinnerComponent } from './spinner/spinner.component'; AngularEditorModule, HttpClientModule ], - providers: [], + providers: [ + Title + ], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 488b0f3..f7a0f9a 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -51,14 +51,14 @@ Exhibitions: {{exhibition.title}} + (click)="showDetails('exhibitions', exhibition.id)" + routerLink="/detail/exhibitions/{{exhibition.id}}/{{parseTitle(exhibition.title)}}">{{exhibition.title}} Works: {{work.title}} + (click)="showDetails('works', work.id)" + routerLink="/detail/works/{{work.id}}/{{parseTitle(work.title)}}">{{work.title}} diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss index 86015ae..908a292 100644 --- a/src/app/detail/detail.component.scss +++ b/src/app/detail/detail.component.scss @@ -60,6 +60,7 @@ left: 0; width: 100%; height: 100%; + padding: 2px; object-fit: cover; cursor: pointer; transition: transform .4s; diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index 00d9403..8400276 100644 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -4,6 +4,7 @@ import { DomSanitizer } from '@angular/platform-browser' import { Location } from '@angular/common' import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from "ngx-image-gallery" import { ApisService } from '../services/apis.service' +import { Title } from '@angular/platform-browser'; import { environment } from '../../environments/environment' @Component({ @@ -39,7 +40,8 @@ export class DetailComponent implements OnInit { private router: Router, private location: Location, private activeRoute: ActivatedRoute, - private sanitizer: DomSanitizer + private sanitizer: DomSanitizer, + private titleService: Title ) { } ngOnInit(): void { @@ -52,16 +54,17 @@ export class DetailComponent implements OnInit { this.init = true } - showDetails(section, id, title = ''): void { + showDetails(section, id): void { this.galleryImages = [] this.apisService.getDetails(section, id).toPromise().then((response) => { - if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) { - this.history.push(`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`) + this.details = response.item + + if(this.history[this.history.length - 1] != `/detail/${section}/${id}/${this.parseTitle(this.details.title)}`) { + this.history.push(`/detail/${section}/${id}/${this.parseTitle(this.details.title)}`) } - const detail = response.item - detail.videos = detail.videos ? JSON.parse(detail.videos) : [] - detail.videos.forEach((e) => { + this.details.videos = this.details.videos ? JSON.parse(this.details.videos) : [] + this.details.videos.forEach((e) => { e.code = e.url.split('/').pop() switch(e.type) { case 'youtube': @@ -76,9 +79,9 @@ export class DetailComponent implements OnInit { } }) - detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : [] + this.details.gallery = this.details.gallery ? JSON.parse(this.details.gallery) : [] - detail.gallery.forEach((e) => { + this.details.gallery.forEach((e) => { if(!e.main) { this.galleryImages.push({ url: `${this.basePath}${e.url}`, @@ -91,7 +94,7 @@ export class DetailComponent implements OnInit { }) this.loaded = !this.loadedImages.length - this.details = detail + this.titleService.setTitle(`Dslak - New media arts | ${this.details.title}`) },(error) => { console.error('getPortfolio ERROR', error) @@ -102,6 +105,7 @@ export class DetailComponent implements OnInit { back(): void { this.history.pop() + let title = '' if(this.history.length > 0) { const last = this.history[this.history.length - 1] this.section = last.split('/')[2] @@ -110,6 +114,8 @@ export class DetailComponent implements OnInit { this.location.back() } else { this.location.back() + title = this.router.url.split('/')[2] + this.titleService.setTitle(`Dslak - New media arts | ${title.charAt(0).toUpperCase() + title.slice(1)}`) } } @@ -120,6 +126,9 @@ export class DetailComponent implements OnInit { } + parseTitle(title): string { + return title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_') + } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index dbba668..6a4bb4a 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -7,13 +7,13 @@
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index c4638d6..da9534b 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit, HostListener, Inject } from '@angular/core' import { Router, NavigationEnd } from '@angular/router' +import { Title } from '@angular/platform-browser'; import { DOCUMENT } from '@angular/common' @Component({ @@ -13,11 +14,15 @@ export class HeaderComponent implements OnInit { public isMenuOpen: boolean = false public isFirstScroll: boolean = true - constructor(@Inject(DOCUMENT) private document: Document, private router: Router) { + constructor( + @Inject(DOCUMENT) private document: Document, + private router: Router, + private titleService: Title + ) { router.events.subscribe((val) => { this.isMenuOpen = false - //this.isSticky = true this.document.body.classList.remove('no-scroll') + //if(val.shouldActivate) { console.log('route', val) } }) } @@ -45,4 +50,8 @@ export class HeaderComponent implements OnInit { } } + setTitle(title): void { + this.titleService.setTitle(`Dslak - New media arts | ${title}`) + } + } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 2a92674..3bfe617 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,8 +1,6 @@
- -
-
+
loading @@ -28,4 +26,9 @@
+ + + + + diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 8c0ef20..bcdd823 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -2,60 +2,19 @@ .component-home { display: flex; - padding-top: 100px; + padding-top: 150px; height: 100vh; transform: skew(-15deg) rotate(-15deg); z-index: 1; - .goto-prev, - .goto-next { - position: absolute; - height: 40px; - width: 60px; - border: none; - background: none; - color: $black; - font-size: $font-40; - appearance: none; - margin: 0; - padding: 5px; - cursor: pointer; - z-index: 2; - - .icon { - &:before { - transform: translate(-50%, -50%); - position: absolute; - top: 50%; - left: 50%; - } - } - } - .goto-prev { - top: 60px; - left: 20px; - } - .goto-next { - top: calc(80vh + 10px); - right: 20px; - .icon { - &:before { - transform: translate(-50%, -50%) rotate(180deg); - } - } - } - .content { display: inline-flex; margin: 0; - margin-left: -50px; //animation: slide 150s linear infinite; transition: margin-left .5s; - @each $width in 1,2,3,4,5,6 { - .slide-#{$width} { - width: #{($width+2)*100}px; - } + .slide { + width: 100vw; } .box { @@ -64,13 +23,14 @@ background: $black-alpha2; border-radius: 5px; overflow: hidden; - margin: auto 0; + margin: auto; padding: 40px 20px; height: calc(80vh - 90px); + width: calc(100% - 20px); min-height: 250px; //max-height: 700px; cursor: pointer; - transform: skew(-6deg, -6deg) rotate(6deg); + transform: rotate(15deg) skew(15deg, 0deg); transition: transform .4s, background .4s, opacity .4s; -webkit-backface-visibility: hidden; @@ -147,7 +107,7 @@ &:hover { background: $black; - transform: scale(1.4) rotate(14deg) skew(14deg, 0deg); + transform: scale(1.4) rotate(15deg) skew(15deg, 0deg); z-index: 50; .image { @@ -166,15 +126,71 @@ } +.goto-prev, +.goto-next { + position: absolute; + display: none; + height: 40px; + width: 60px; + border: none; + background: none; + color: $white; + font-size: $font-40; + appearance: none; + margin: 0; + padding: 5px; + cursor: pointer; + opacity: .4; + transition: opacity .4s; + z-index: 2; + + &:hover { + opacity: 1; + } + + .icon { + &:before { + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + } + } +} + +.goto-prev { + top: 20px; + left: 20px; +} +.goto-next { + bottom: 20px; + right: 20px; + .icon { + &:before { + transform: translate(-50%, -50%) rotate(180deg); + } + } +} + + @media (min-width: map-get($grid-breakpoints, 'md')) { .component-home { - .goto-prev { - left: 50px; - } - .goto-next { - right: 50px; + .content { + margin-left: -calc(100vw / 2); + .slide { + @each $width in 1,2,3,4,5,6 { + &.slide-#{$width} { + width: #{($width+2)*100}px; + } + } + } } } + + .goto-prev, + .goto-next { + display: block; + } } diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 50ad9a2..957fbfa 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -58,7 +58,7 @@ export class HomeComponent implements OnInit { setInterval( () => { if(!this.paused) { - const scrollWidth = 300 + const scrollWidth = document.body.clientWidth > 768 ? document.body.clientWidth / 3 : document.body.clientWidth const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth @@ -78,7 +78,7 @@ export class HomeComponent implements OnInit { } scroll(dir): void { - const scrollWidth = document.body.clientWidth / 3 + const scrollWidth = document.body.clientWidth > 768 ? document.body.clientWidth / 3 : document.body.clientWidth const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 this.paused = true @@ -97,7 +97,7 @@ export class HomeComponent implements OnInit { swipe(e: TouchEvent, when: string): void { const coord: [number, number] = [e.changedTouches[0].clientX, e.changedTouches[0].clientY] const time = new Date().getTime() - const scrollWidth = document.body.clientWidth + const scrollWidth = document.body.clientWidth > 768 ? document.body.clientWidth / 3 : document.body.clientWidth const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 this.paused = true diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index f7f2c66..37e16e7 100644 --- a/src/app/portfolio/portfolio.component.ts +++ b/src/app/portfolio/portfolio.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core' import { Router, NavigationEnd } from '@angular/router' import { ApisService } from '../services/apis.service' +import { Title } from '@angular/platform-browser'; import { environment } from '../../environments/environment' @Component({ @@ -19,8 +20,9 @@ export class PortfolioComponent implements OnInit { constructor( private apisService: ApisService, - private router: Router) - { } + private router: Router, + private titleService: Title + ) { } ngOnInit(): void { this.section = this.router.url.split('/')[1] @@ -73,6 +75,7 @@ export class PortfolioComponent implements OnInit { showDetails(id, title = ''): void { const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' + if(title) { this.titleService.setTitle(`Dslak - New media arts | ${title}`) } this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`]) } diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts index 47887ba..b878947 100644 --- a/src/app/services/apis.service.ts +++ b/src/app/services/apis.service.ts @@ -16,8 +16,8 @@ export class ApisService extends BaseService { super() } - getPortfolio(section, randon = false): Observable { - let urlApi = `${this.restApi}?query=${section}&random=${randon}` + getPortfolio(section, random = false): Observable { + let urlApi = `${this.restApi}?query=${section}&random=${random}` return this.http.get(urlApi).pipe( catchError(this.handleError) ) diff --git a/src/assets/images/favicon.png b/src/assets/images/favicon.png index 0d75435..8368e8d 100644 Binary files a/src/assets/images/favicon.png and b/src/assets/images/favicon.png differ diff --git a/src/assets/images/logo.svg b/src/assets/images/logo.svg index c1073ec..e16d907 100644 --- a/src/assets/images/logo.svg +++ b/src/assets/images/logo.svg @@ -5,15 +5,52 @@ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" - id="svg291" + xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" - viewBox="0 0 134.02536 119.09393" - height="119.09393mm" - width="134.02536mm"> + id="svg2" + height="94.896881" + width="106.79461"> + id="defs4"> + + + + + + + + + + id="metadata7"> @@ -25,84 +62,85 @@ + transform="translate(-509.49411,-555.85051)" + id="layer2"> + style="opacity:1;stroke-width:1.46329;stop-opacity:1" + transform="matrix(0.68339561,0,0,0.68339561,-1403.3442,1715.6078)" + id="g5226"> - - - - - - - - - - - - - - - + style="opacity:1;stroke-width:1.46329;stop-opacity:1" + id="g5142" + transform="translate(-14.392352,-6.619979)"> + + + + + + + + + + + + + + + + + diff --git a/src/favicon.png b/src/favicon.png index 0d75435..8368e8d 100644 Binary files a/src/favicon.png and b/src/favicon.png differ