From 9e6fe92230a60697724e8a58bc711b89ef719c16 Mon Sep 17 00:00:00 2001 From: Dslak Date: Mon, 7 Dec 2020 18:39:51 +0100 Subject: [PATCH 1/8] add home template add random param in portfolio api new portfolio graphic --- package.json | 1 + src/apis/index.php | 3 +- src/app/app-routing.module.ts | 3 +- src/app/app.module.ts | 4 +- src/app/header/header.component.ts | 6 +- src/app/home/home.component.html | 28 +++ src/app/home/home.component.scss | 139 +++++++++++++++ src/app/home/home.component.spec.ts | 25 +++ src/app/home/home.component.ts | 53 ++++++ src/app/portfolio/portfolio.component.html | 38 ++-- src/app/portfolio/portfolio.component.scss | 196 +++++++++++---------- src/app/portfolio/portfolio.component.ts | 6 - src/app/services/apis.service.ts | 4 +- src/assets/scss/variables.scss | 1 + src/main.ts | 2 + 15 files changed, 384 insertions(+), 125 deletions(-) create mode 100644 src/app/home/home.component.html create mode 100644 src/app/home/home.component.scss create mode 100644 src/app/home/home.component.spec.ts create mode 100644 src/app/home/home.component.ts diff --git a/package.json b/package.json index b5d828b..521d259 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@angular/router": "~9.1.7", "@kolkov/angular-editor": "^1.1.4", "bootstrap": "^4.5.3", + "hammerjs": "^2.0.8", "ng-particles": "^2.1.11", "ngx-image-gallery": "^2.0.5", "rxjs": "~6.5.4", diff --git a/src/apis/index.php b/src/apis/index.php index ad3015e..113f289 100644 --- a/src/apis/index.php +++ b/src/apis/index.php @@ -15,7 +15,8 @@ if(isset($_GET['query'])) { 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($_GET['random']) {$order .= 'ORDER BY id RAND()';} else {$order = "ORDER BY id DESC";} + $qe = mysqli_query($conn,"SELECT * FROM `works` $filter $order"); if(mysqli_num_rows($qe) > 0) { $content = null; $content->items = array(); diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 453d579..d21da2f 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,6 +4,7 @@ import { AppLayoutComponent } from './app-layout/app-layout.component' import { AboutComponent } from './about/about.component' import { PortfolioComponent } from './portfolio/portfolio.component' import { DetailComponent } from './detail/detail.component' +import { HomeComponent } from './home/home.component' import { AdminComponent } from './admin/admin.component' const routes: Routes = [ @@ -12,7 +13,7 @@ const routes: Routes = [ component: AppLayoutComponent, children: [ //{ path: '', redirectTo: '/portfolio', pathMatch: 'full' }, - { path: '', component: PortfolioComponent }, + { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'portfolio', component: PortfolioComponent }, { path: 'exhibitions', component: PortfolioComponent }, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ae96ec7..000c61e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,6 +14,7 @@ import { AboutComponent } from './about/about.component'; import { PortfolioComponent } from './portfolio/portfolio.component'; import { DetailComponent } from './detail/detail.component'; import { AdminComponent } from './admin/admin.component'; +import { HomeComponent } from './home/home.component'; @NgModule({ declarations: [ @@ -23,7 +24,8 @@ import { AdminComponent } from './admin/admin.component'; AboutComponent, PortfolioComponent, DetailComponent, - AdminComponent + AdminComponent, + HomeComponent ], imports: [ BrowserModule, diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index e4c7522..c4638d6 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -9,7 +9,7 @@ import { DOCUMENT } from '@angular/common' }) export class HeaderComponent implements OnInit { - public isSticky: boolean = false + public isSticky: boolean = true public isMenuOpen: boolean = false public isFirstScroll: boolean = true @@ -22,7 +22,7 @@ export class HeaderComponent implements OnInit { } ngOnInit(): void { - this.isSticky = this.router.url != '/' + //this.isSticky = this.router.url != '/' } @HostListener('window:scroll', ['$event']) @@ -32,7 +32,7 @@ export class HeaderComponent implements OnInit { || document.body.scrollTop || 0 this.isFirstScroll = this.router.url == '/' - this.isSticky = this.isFirstScroll ? this.isMenuOpen || verticalOffset > 10 : true + //this.isSticky = this.isFirstScroll ? this.isMenuOpen || verticalOffset > 10 : true } toggleMenu(): void { diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html new file mode 100644 index 0000000..d258c89 --- /dev/null +++ b/src/app/home/home.component.html @@ -0,0 +1,28 @@ +
+
+
+
+ loading + +
+ {{item.title}} + {{item.type}} + +
+
+ from + on + {{item.date_from | date}} +
+
+ to {{item.date_to | date}} +
+
+ + {{item.tags}} +
+
+
+
+ +
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss new file mode 100644 index 0000000..26941c3 --- /dev/null +++ b/src/app/home/home.component.scss @@ -0,0 +1,139 @@ +@import "../../assets/scss/variables"; + +.component-home { + display: flex; + padding-top: 100px; + height: 100vh; + + .content { + display: inline-flex; + margin: auto; + animation: slide 120s ease-in-out infinite; + + @each $width in 1,2,3,4,5,6 { + .slide-#{$width} { + width: #{($width+2)*100}px; + } + } + + .box { + position: relative; + display: flex; + background: $black-alpha2; + border-radius: 0; + overflow: hidden; + margin: auto 0; + padding: 40px 20px; + height: calc(80vh - 90px); + min-height: 300px; + max-height: 700px; + 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%); + opacity: .5; + filter: grayscale(100%) contrast(3); + transition: opacity .4s, filter .4s; + -webkit-backface-visibility: hidden; + z-index: 0; + } + + .text { + display: block; + margin: auto; + text-align: center; + transform: translate(0%, 0%); + color: $yellow; + -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; + } + + .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 { + &.skew-#{$angle} { + //transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) scale(1.2); + transform: skew(-6deg, -6deg) rotate(6deg); + } + } + + &:hover { + background: $black; + z-index: 50; + + @each $angle in 0,1,2,3,4,5,6 { + &.skew-#{$angle} { + transform: scale(1.4) rotate(0deg) skew(0deg, 0deg); + } + } + .image { + filter: grayscale(0%); + opacity: .5; + } + } + } + + &:hover { + animation-play-state: paused; + } + } +} + + +@keyframes slide { + 0% {transform: translateX(-100%) translateX(100vw);} + 50% {transform: translateX(0%);} + 100% {transform: translateX(-100%) translateX(100vw);} +} diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts new file mode 100644 index 0000000..490e81b --- /dev/null +++ b/src/app/home/home.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomeComponent } from './home.component'; + +describe('HomeComponent', () => { + let component: HomeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts new file mode 100644 index 0000000..54a5b0b --- /dev/null +++ b/src/app/home/home.component.ts @@ -0,0 +1,53 @@ +import { Component, OnInit } from '@angular/core' +import { Router, NavigationEnd } from '@angular/router' +import { ApisService } from '../services/apis.service' +import { environment } from '../../environments/environment' + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] +}) +export class HomeComponent implements OnInit { + + public basePath = `${environment.BASE_PATH}` + + public homeItems: any = [] + public section: string = 'portfolio' + + constructor( + private apisService: ApisService, + private router: Router) + { } + + ngOnInit(): void { + this.apisService.getPortfolio(this.section, true).toPromise().then((response) => { + this.homeItems = response.items + + let cnt = 0 + let width = 0 + let tot = 0 + + this.homeItems.forEach((e) => { + e.loading = true + e.width = Math.floor(Math.random()*4)+1 + cnt++ + }) + + },(error) => { + console.error('getPortfolio ERROR', error) + }).catch((e) => { + console.error('getPortfolio CATCH', e) + }) + } + + showDetails(id): void { + const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' + this.router.navigate([`/detail/${section}/${id}`]) + } + + onLoad(id): void { + this.homeItems.filter(item => item.id == id)[0].loading = false + } + +} diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index f384422..c2f1076 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,27 +1,25 @@
-
-
-
-
- loading - -
- {{item.title}} - {{item.type}} +
+
+
+ loading + +
+ {{item.title}} + {{item.type}} -
-
- from - on - {{item.date_from | date}} -
-
- to {{item.date_to | date}} -
+
+
+ from + on + {{item.date_from | date}} +
+
+ to {{item.date_to | date}}
- - {{item.tags}}
+ + {{item.tags}}
diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss index 6a6f4ac..12a0f96 100644 --- a/src/app/portfolio/portfolio.component.scss +++ b/src/app/portfolio/portfolio.component.scss @@ -1,119 +1,133 @@ @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%); - opacity: .9; - filter: grayscale(100%) brightness(.4); - transition: opacity .4s, filter .4s; + padding-top: 160px; + + .row-container { + transform: skew(-2deg, -2deg) rotate(-2deg); + width: calc(100% - 50px); + max-width: 1400px; + margin: auto; + + .box { + position: relative; + display: flex; + border-radius: 4px; + overflow: hidden; + background: $black-alpha; + margin: 6px; + padding: 40px 20px; + min-height: 250px; + cursor: pointer; + transform: skew(6deg, -6deg) rotate(6deg); + transition: transform .4s, background .4s, box-shadow .4s; -webkit-backface-visibility: hidden; - z-index: 0; - } - - .text { - display: block; - margin: auto; - text-align: center; - transform: translate(0%, 0%); - color: $yellow; - //transition: color .4s; - -webkit-backface-visibility: hidden; - z-index: 1; - .title { - display: block; - font-size: $font-20; - text-transform: uppercase; - font-weight: bold; + .image { + position: absolute; + top: 50%; + left: 50%; + height: 100%; + width: 100%; + object-fit: cover; + transform: translate(-50%, -50%); + opacity: .9; + filter: grayscale(100%) brightness(.4); + transition: opacity .4s, filter .4s; + -webkit-backface-visibility: hidden; + z-index: 0; } - .type { - display: block; - font-size: $font-16; - font-weight: bold; + .loader { + position: absolute; + top: 50%; + left: 50%; + height: 100%; + width: 100%; + object-fit: cover; + filter: invert(100%); + transform: translate(-50%, -50%); + z-index: 0; } - .tags { + .text { display: block; - font-size: $font-12; - text-transform: uppercase; - font-weight: bold; - padding-top: 10px; - } + margin: auto; + text-align: center; + transform: translate(0%, 0%); + color: $yellow; + //transition: color .4s; + -webkit-backface-visibility: hidden; + z-index: 1; + + .title { + display: block; + font-size: $font-20; + text-transform: uppercase; + font-weight: bold; + } - .date-container { - display: inline-flex; - flex-wrap: wrap; + .type { + display: block; + font-size: $font-16; + font-weight: bold; + } - .date-row { + .tags { display: block; - width: 100%; + font-size: $font-12; + text-transform: uppercase; + font-weight: bold; + padding-top: 10px; + } - .date { - display: inline-flex; - margin: auto; - font-size: $font-20; - } + .date-container { + display: inline-flex; + flex-wrap: wrap; - .date-indication { - margin: 2px 5px auto 5px; - font-size: $font-12; - } + .date-row { + display: block; + width: 100%; - &:nth-of-type(2) { - margin-top: -12px; + .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 { - &.skew-#{$angle} { - transform: skew(#{$angle - 3}deg, #{$angle - 3}deg); } - } - &:hover { - background: $black; - z-index: 50; + &:hover { + box-shadow: 0 0 20px $white-alpha2; + background: $black; + 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); - transform: scale(1.4) rotate(0deg) skew(0deg, 0deg); - } - } + transform: scale(1.4) rotate(4deg) skew(3deg); - .image { - filter: grayscale(0%) brightness(1); - opacity: .5; - } - .text { - //color: $yellow; + .image { + filter: grayscale(0%) brightness(1); + opacity: .7; + } } } } } +@media (min-width: map-get($grid-breakpoints, 'md')) { + .component-portfolio { + .row-container { + width: calc(100% - 100px); + } + } +} diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index cf63720..459219e 100644 --- a/src/app/portfolio/portfolio.component.ts +++ b/src/app/portfolio/portfolio.component.ts @@ -42,7 +42,6 @@ export class PortfolioComponent implements OnInit { case 1: width = Math.floor(Math.random()*3)+3 cnt++ - if(tot + width > 9) { width = 12 - tot tot = 0 @@ -50,7 +49,6 @@ export class PortfolioComponent implements OnInit { } else { tot = tot + width } - break; case 2: width = 12 - tot @@ -58,11 +56,7 @@ export class PortfolioComponent implements OnInit { cnt = 0 break; } - e.width = width - - //((e.id % 5)+3) - //Math.floor((Math.random()*3)+1)+2 }) },(error) => { console.error('getPortfolio ERROR', error) diff --git a/src/app/services/apis.service.ts b/src/app/services/apis.service.ts index 31e6ab1..47887ba 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): Observable { - let urlApi = `${this.restApi}?query=${section}` + getPortfolio(section, randon = false): Observable { + let urlApi = `${this.restApi}?query=${section}&random=${randon}` return this.http.get(urlApi).pipe( catchError(this.handleError) ) diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index dd99a70..743424d 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -34,6 +34,7 @@ $yellow: #a2dc02; $white-alpha: rgba(255, 255, 255, 0.8); $white-alpha2: rgba(255, 255, 255, 0.4); $black-alpha: rgba(0, 0, 0, 0.8); +$black-alpha2: rgba(0, 0, 0, 0.4); $yellow-alpha: rgba(160, 220, 0, 0.8); // Fonts diff --git a/src/main.ts b/src/main.ts index c7b673c..5f26277 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; +import 'hammerjs'; + if (environment.production) { enableProdMode(); } From 36d86ad840b4da94dec0f0daea05fdf4b5339667 Mon Sep 17 00:00:00 2001 From: Dslak Date: Mon, 7 Dec 2020 18:40:54 +0100 Subject: [PATCH 2/8] yarn deploy --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 521d259..a68d2bd 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "dev": "ng serve", "build": "ng build", "prod": "ng build --prod --configuration production", + "deploy": "sh ./deploy.sh", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" From 43b6c9c096e7b2a51b60bd82549bc30ea4e21e63 Mon Sep 17 00:00:00 2001 From: Dslak Date: Mon, 7 Dec 2020 19:22:06 +0100 Subject: [PATCH 3/8] oblique home --- src/apis/index.php | 2 +- src/app/app-layout/app-layout.component.html | 10 +++++---- src/app/app-layout/app-layout.component.scss | 3 +++ src/app/home/home.component.scss | 23 ++++++-------------- src/index.html | 2 +- 5 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/apis/index.php b/src/apis/index.php index 113f289..b91173e 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 id RAND()';} else {$order = "ORDER BY id DESC";} + if($_GET['random']) {$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-layout/app-layout.component.html b/src/app/app-layout/app-layout.component.html index 89a86da..e46bcfe 100644 --- a/src/app/app-layout/app-layout.component.html +++ b/src/app/app-layout/app-layout.component.html @@ -1,5 +1,7 @@ - - +
+ + - + +
diff --git a/src/app/app-layout/app-layout.component.scss b/src/app/app-layout/app-layout.component.scss index e69de29..0d2866d 100644 --- a/src/app/app-layout/app-layout.component.scss +++ b/src/app/app-layout/app-layout.component.scss @@ -0,0 +1,3 @@ +main { + overflow: hidden; +} diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 26941c3..90dbac7 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -4,11 +4,12 @@ display: flex; padding-top: 100px; height: 100vh; + transform: skew(-15deg) rotate(-15deg); .content { display: inline-flex; margin: auto; - animation: slide 120s ease-in-out infinite; + animation: slide 200s ease-in-out infinite; @each $width in 1,2,3,4,5,6 { .slide-#{$width} { @@ -28,7 +29,8 @@ min-height: 300px; max-height: 700px; cursor: pointer; - transition: transform .4s, background .4s; + transform: skew(-6deg, -6deg) rotate(6deg); + transition: transform .4s, background .4s, opacity .4s; -webkit-backface-visibility: hidden; .image { @@ -39,7 +41,7 @@ width: 100%; object-fit: cover; transform: translate(-50%, -50%); - opacity: .5; + opacity: .8; filter: grayscale(100%) contrast(3); transition: opacity .4s, filter .4s; -webkit-backface-visibility: hidden; @@ -102,22 +104,11 @@ } } - @each $angle in 0,1,2,3,4,5,6 { - &.skew-#{$angle} { - //transform: skew(#{$angle - 3}deg, #{$angle - 3}deg) scale(1.2); - transform: skew(-6deg, -6deg) rotate(6deg); - } - } - &:hover { background: $black; + transform: scale(1.4) rotate(14deg) skew(14deg, 0deg); z-index: 50; - @each $angle in 0,1,2,3,4,5,6 { - &.skew-#{$angle} { - transform: scale(1.4) rotate(0deg) skew(0deg, 0deg); - } - } .image { filter: grayscale(0%); opacity: .5; @@ -134,6 +125,6 @@ @keyframes slide { 0% {transform: translateX(-100%) translateX(100vw);} - 50% {transform: translateX(0%);} + 50% {transform: translateX(0%) translateX(-100vw);} 100% {transform: translateX(-100%) translateX(100vw);} } diff --git a/src/index.html b/src/index.html index b5d7d53..229698c 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ DslakWebsite - + From 6fc768e30a9a1e0c2a7eb52ac8d26b5c6ac9a942 Mon Sep 17 00:00:00 2001 From: Dslak Date: Mon, 7 Dec 2020 20:49:46 +0100 Subject: [PATCH 4/8] home auto slider --- src/app/home/home.component.html | 6 ++-- src/app/home/home.component.scss | 51 +++++++++++++++++++++++++++--- src/app/home/home.component.ts | 54 ++++++++++++++++++++++++++++++-- 3 files changed, 101 insertions(+), 10 deletions(-) diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index d258c89..94b15a7 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,9 @@
-
+ + +
-
+
loading
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 90dbac7..011a8ff 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -6,10 +6,49 @@ height: 100vh; transform: skew(-15deg) rotate(-15deg); + .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; + + .icon { + &:before { + transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + } + } + } + .goto-prev { + top: 70px; + left: 50px; + } + .goto-next { + bottom: -30px; + right: 50px; + .icon { + &:before { + transform: translate(-50%, -50%) rotate(180deg); + } + } + } + .content { display: inline-flex; margin: auto; - animation: slide 200s ease-in-out infinite; + margin-left: -50px; + //animation: slide 150s linear infinite; + transition: margin-left .5s; @each $width in 1,2,3,4,5,6 { .slide-#{$width} { @@ -116,7 +155,9 @@ } } - &:hover { + &:hover, + &.paused { + //animation: none; animation-play-state: paused; } } @@ -124,7 +165,7 @@ @keyframes slide { - 0% {transform: translateX(-100%) translateX(100vw);} - 50% {transform: translateX(0%) translateX(-100vw);} - 100% {transform: translateX(-100%) translateX(100vw);} + 0% {margin-left: 0;} + 50% {margin-left: -100%;} + 100% {margin-left: 0;} } diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 54a5b0b..158e891 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/core' import { Router, NavigationEnd } from '@angular/router' import { ApisService } from '../services/apis.service' import { environment } from '../../environments/environment' @@ -10,17 +10,23 @@ import { environment } from '../../environments/environment' }) export class HomeComponent implements OnInit { + @ViewChild('scrollContent') scrollContent: ElementRef + public basePath = `${environment.BASE_PATH}` public homeItems: any = [] public section: string = 'portfolio' + public paused: boolean = false + private scrollPos: number = 0 constructor( private apisService: ApisService, - private router: Router) - { } + private router: Router, + private renderer: Renderer2 + ) { } ngOnInit(): void { + this.apisService.getPortfolio(this.section, true).toPromise().then((response) => { this.homeItems = response.items @@ -41,6 +47,27 @@ export class HomeComponent implements OnInit { }) } + ngAfterViewInit() { + setInterval( () => { + if(!this.paused) { + const scrollWidth = 300 + const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 + /* + switch(dir) { + case 'prev': + this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth + break; + case 'next':*/ + this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? + -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth + /* + break; + }*/ + this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' + } + },2000) + } + showDetails(id): void { const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' this.router.navigate([`/detail/${section}/${id}`]) @@ -50,4 +77,25 @@ export class HomeComponent implements OnInit { this.homeItems.filter(item => item.id == id)[0].loading = false } + scroll(dir): void { + const scrollWidth = document.body.clientWidth / 3 + const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 + this.paused = true + + switch(dir) { + case 'prev': + this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth + break; + case 'next': + this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? + -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth + break; + } + this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' + + setTimeout ( () => { + this.paused = false + }, 2000) + } + } From 65833345529a2a29f66e135fefa0ecdda36910f0 Mon Sep 17 00:00:00 2001 From: Dslak Date: Tue, 8 Dec 2020 10:23:28 +0100 Subject: [PATCH 5/8] fine tuning --- src/app/about/about.component.scss | 4 ++-- src/app/detail/detail.component.html | 15 +++++++-------- src/app/detail/detail.component.scss | 2 +- src/app/home/home.component.html | 2 +- src/app/home/home.component.scss | 14 ++++++++------ src/app/home/home.component.ts | 5 +---- src/app/portfolio/portfolio.component.html | 2 +- src/app/portfolio/portfolio.component.scss | 5 +++-- src/assets/images/loader.svg | 11 +++++++++++ src/assets/scss/global.scss | 2 +- 10 files changed, 36 insertions(+), 26 deletions(-) create mode 100644 src/assets/images/loader.svg diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index a0eb681..22ceada 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -1,8 +1,6 @@ @import "../../assets/scss/variables"; .component-about { - z-index: 0; - .content { position: relative; margin: 150px auto 80px auto; @@ -13,6 +11,8 @@ color: $black; box-shadow: 0px 0px 25px $white-alpha; border-radius: 10px; + z-index: 1; + .about-links { color: $black; diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 53457f7..929e85d 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -4,6 +4,12 @@

{{details.title}}

+
+ from + on + {{details.date_from | date}} + to {{details.date_to | date}} +
= 3}">
{{image.title}} - loading + loading
-
- from - on - {{details.date_from | date}} - to {{details.date_to | date}} -
-
diff --git a/src/app/detail/detail.component.scss b/src/app/detail/detail.component.scss index 246b883..86015ae 100644 --- a/src/app/detail/detail.component.scss +++ b/src/app/detail/detail.component.scss @@ -1,7 +1,6 @@ @import "../../assets/scss/variables"; .component-detail { - z-index: 0; .content { position: relative; @@ -11,6 +10,7 @@ color: $black; box-shadow: 0px 0px 25px $white-alpha; border-radius: 10px; + z-index: 1; .title { margin: 0; diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 94b15a7..65d7521 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -3,7 +3,7 @@
-
+
loading
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 011a8ff..718015a 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -5,6 +5,7 @@ padding-top: 100px; height: 100vh; transform: skew(-15deg) rotate(-15deg); + z-index: 1; .goto-prev, .goto-next { @@ -19,6 +20,7 @@ margin: 0; padding: 5px; cursor: pointer; + z-index: 2; .icon { &:before { @@ -30,11 +32,11 @@ } } .goto-prev { - top: 70px; + top: 60px; left: 50px; } .goto-next { - bottom: -30px; + top: calc(80vh + 10px); right: 50px; .icon { &:before { @@ -45,7 +47,7 @@ .content { display: inline-flex; - margin: auto; + margin: 0; margin-left: -50px; //animation: slide 150s linear infinite; transition: margin-left .5s; @@ -60,13 +62,13 @@ position: relative; display: flex; background: $black-alpha2; - border-radius: 0; + border-radius: 5px; overflow: hidden; margin: auto 0; padding: 40px 20px; height: calc(80vh - 90px); - min-height: 300px; - max-height: 700px; + min-height: 250px; + //max-height: 700px; cursor: pointer; transform: skew(-6deg, -6deg) rotate(6deg); transition: transform .4s, background .4s, opacity .4s; diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 158e891..6e95bbf 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -49,6 +49,7 @@ export class HomeComponent implements OnInit { ngAfterViewInit() { setInterval( () => { + console.log(this.paused) if(!this.paused) { const scrollWidth = 300 const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 @@ -92,10 +93,6 @@ export class HomeComponent implements OnInit { break; } this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' - - setTimeout ( () => { - this.paused = false - }, 2000) } } diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index c2f1076..a8f57e1 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -2,7 +2,7 @@
- loading + loading
{{item.title}} diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss index 12a0f96..ab9be70 100644 --- a/src/app/portfolio/portfolio.component.scss +++ b/src/app/portfolio/portfolio.component.scss @@ -1,13 +1,15 @@ @import "../../assets/scss/variables"; .component-portfolio { - padding-top: 160px; + padding: 160px 0 80px 0; .row-container { + position: relative; transform: skew(-2deg, -2deg) rotate(-2deg); width: calc(100% - 50px); max-width: 1400px; margin: auto; + z-index: 1; .box { position: relative; @@ -45,7 +47,6 @@ height: 100%; width: 100%; object-fit: cover; - filter: invert(100%); transform: translate(-50%, -50%); z-index: 0; } diff --git a/src/assets/images/loader.svg b/src/assets/images/loader.svg new file mode 100644 index 0000000..a656b7e --- /dev/null +++ b/src/assets/images/loader.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index b39e98f..cc49963 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -39,5 +39,5 @@ button { height: 100vh; width: 100vw; background: radial-gradient(circle, transparent 0%, transparent 85%, rgba(255,255,255,0.2) 95%, rgba(255,255,255,0.3) 100%); - z-index: -1; + z-index: 0; } From a731461e0dc5992bfd086b345d4452c63922c4e8 Mon Sep 17 00:00:00 2001 From: Dslak Date: Tue, 8 Dec 2020 11:01:58 +0100 Subject: [PATCH 6/8] add swipe and url title --- src/app/detail/detail.component.html | 4 +-- src/app/detail/detail.component.ts | 4 +-- src/app/home/home.component.html | 2 +- src/app/home/home.component.scss | 16 +++++++-- src/app/home/home.component.ts | 39 ++++++++++++++++++++-- src/app/portfolio/portfolio.component.html | 2 +- src/app/portfolio/portfolio.component.ts | 4 +-- src/assets/scss/global.scss | 2 +- 8 files changed, 60 insertions(+), 13 deletions(-) diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 929e85d..d15145a 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -51,13 +51,13 @@ Exhibitions: {{exhibition.title}} Works: {{work.title}}
diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index f2d3553..23c6ba7 100644 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -46,11 +46,11 @@ export class DetailComponent implements OnInit { this.showDetails(this.section, this.id) } - showDetails(section, id): void { + showDetails(section, id, title = ''): 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}`) + this.history.push(`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`) } const detail = response.item diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 65d7521..7ee6a34 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,7 +1,7 @@
-
+
loading diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 718015a..8c0ef20 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -33,11 +33,11 @@ } .goto-prev { top: 60px; - left: 50px; + left: 20px; } .goto-next { top: calc(80vh + 10px); - right: 50px; + right: 20px; .icon { &:before { transform: translate(-50%, -50%) rotate(180deg); @@ -166,6 +166,18 @@ } +@media (min-width: map-get($grid-breakpoints, 'md')) { + .component-home { + .goto-prev { + left: 50px; + } + .goto-next { + right: 50px; + } + } +} + + @keyframes slide { 0% {margin-left: 0;} 50% {margin-left: -100%;} diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 6e95bbf..66c8994 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -19,6 +19,9 @@ export class HomeComponent implements OnInit { public paused: boolean = false private scrollPos: number = 0 + private swipeCoord?: [number, number] + private swipeTime?: number + constructor( private apisService: ApisService, private router: Router, @@ -69,9 +72,9 @@ export class HomeComponent implements OnInit { },2000) } - showDetails(id): void { + showDetails(id, title = ''): void { const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' - this.router.navigate([`/detail/${section}/${id}`]) + this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`]) } onLoad(id): void { @@ -95,4 +98,36 @@ export class HomeComponent implements OnInit { this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' } + 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 scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 + + this.paused = true + + if (when === 'start') { + this.swipeCoord = coord + this.swipeTime = time + } else if (when === 'end') { + const direction = [coord[0] - this.swipeCoord[0], coord[1] - this.swipeCoord[1]] + const duration = time - this.swipeTime + + if (duration < 1000 + && Math.abs(direction[0]) > 30 + && Math.abs(direction[0]) > Math.abs(direction[1] * 3)) { + const swipe = direction[0] < 0 ? 'next' : 'prev' + switch(swipe) { + case 'prev': + this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth + break; + case 'next': + this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? + -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth + break; + } + this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' + } + } + } } diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index a8f57e1..c84d12b 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -1,7 +1,7 @@
-
+
loading
diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index 459219e..34dbbbf 100644 --- a/src/app/portfolio/portfolio.component.ts +++ b/src/app/portfolio/portfolio.component.ts @@ -65,9 +65,9 @@ export class PortfolioComponent implements OnInit { }) } - showDetails(id): void { + showDetails(id, title = ''): void { const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' - this.router.navigate([`/detail/${section}/${id}`]) + this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`]) } onLoad(id): void { diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index cc49963..b39e98f 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -39,5 +39,5 @@ button { height: 100vh; width: 100vw; background: radial-gradient(circle, transparent 0%, transparent 85%, rgba(255,255,255,0.2) 95%, rgba(255,255,255,0.3) 100%); - z-index: 0; + z-index: -1; } From 7aa6a529d64fbcfb6e403391a3124ff25a2d3bf6 Mon Sep 17 00:00:00 2001 From: Dslak Date: Tue, 8 Dec 2020 12:40:40 +0100 Subject: [PATCH 7/8] add loading spinner --- src/app/app.module.ts | 4 +- src/app/detail/detail.component.html | 3 +- src/app/detail/detail.component.ts | 9 ++++ src/app/home/home.component.html | 7 +-- src/app/home/home.component.ts | 22 ++++------ src/app/portfolio/portfolio.component.html | 2 + src/app/portfolio/portfolio.component.ts | 7 +++ src/app/spinner/spinner.component.html | 2 + src/app/spinner/spinner.component.scss | 19 ++++++++ src/app/spinner/spinner.component.ts | 50 ++++++++++++++++++++++ 10 files changed, 107 insertions(+), 18 deletions(-) create mode 100644 src/app/spinner/spinner.component.html create mode 100644 src/app/spinner/spinner.component.scss create mode 100644 src/app/spinner/spinner.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 000c61e..cf7935c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { PortfolioComponent } from './portfolio/portfolio.component'; import { DetailComponent } from './detail/detail.component'; import { AdminComponent } from './admin/admin.component'; import { HomeComponent } from './home/home.component'; +import { SpinnerComponent } from './spinner/spinner.component'; @NgModule({ declarations: [ @@ -25,7 +26,8 @@ import { HomeComponent } from './home/home.component'; PortfolioComponent, DetailComponent, AdminComponent, - HomeComponent + HomeComponent, + SpinnerComponent ], imports: [ BrowserModule, diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index d15145a..488b0f3 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -63,7 +63,6 @@
- + + diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index 23c6ba7..00d9403 100644 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -15,6 +15,8 @@ import { environment } from '../../environments/environment' export class DetailComponent implements OnInit { public basePath = `${environment.BASE_PATH}` + public loaded = false + public init = false @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent @@ -46,6 +48,10 @@ export class DetailComponent implements OnInit { this.showDetails(this.section, this.id) } + ngAfterContentInit() { + this.init = true + } + showDetails(section, id, title = ''): void { this.galleryImages = [] this.apisService.getDetails(section, id).toPromise().then((response) => { @@ -83,6 +89,8 @@ export class DetailComponent implements OnInit { this.loadedImages.push(true) } }) + + this.loaded = !this.loadedImages.length this.details = detail },(error) => { @@ -108,6 +116,7 @@ export class DetailComponent implements OnInit { onLoad(index): void { this.loadedImages[index] = false + this.loaded = this.init && this.loadedImages.every( (val) => !val) } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 7ee6a34..2a92674 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -3,8 +3,8 @@
-
- loading +
+ loading
{{item.title}} @@ -26,5 +26,6 @@
-
+ + diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 66c8994..131f80e 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -13,6 +13,8 @@ export class HomeComponent implements OnInit { @ViewChild('scrollContent') scrollContent: ElementRef public basePath = `${environment.BASE_PATH}` + public loaded = false + public init = false public homeItems: any = [] public section: string = 'portfolio' @@ -50,23 +52,16 @@ export class HomeComponent implements OnInit { }) } - ngAfterViewInit() { + ngAfterContentInit() { + + this.init = true + setInterval( () => { - console.log(this.paused) if(!this.paused) { const scrollWidth = 300 const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0 - /* - switch(dir) { - case 'prev': - this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth - break; - case 'next':*/ - this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? - -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth - /* - break; - }*/ + this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ? + -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px' } },2000) @@ -79,6 +74,7 @@ export class HomeComponent implements OnInit { onLoad(id): void { this.homeItems.filter(item => item.id == id)[0].loading = false + this.loaded = this.init && this.homeItems.every( (val) => !val.loading) } scroll(dir): void { diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html index c84d12b..dc8c0fd 100644 --- a/src/app/portfolio/portfolio.component.html +++ b/src/app/portfolio/portfolio.component.html @@ -25,3 +25,5 @@
+ + diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts index 34dbbbf..f7f2c66 100644 --- a/src/app/portfolio/portfolio.component.ts +++ b/src/app/portfolio/portfolio.component.ts @@ -11,6 +11,8 @@ import { environment } from '../../environments/environment' export class PortfolioComponent implements OnInit { public basePath = `${environment.BASE_PATH}` + public loaded = false + public init = false public portfolioItems: any = [] public section: string = '' @@ -65,6 +67,10 @@ export class PortfolioComponent implements OnInit { }) } + ngAfterContentInit() { + this.init = true + } + showDetails(id, title = ''): void { const section = this.section == 'exhibitions' ? 'exhibitions' : 'works' this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`]) @@ -72,6 +78,7 @@ export class PortfolioComponent implements OnInit { onLoad(id): void { this.portfolioItems.filter(item => item.id == id)[0].loading = false + this.loaded = this.init && this.portfolioItems.every( (val) => !val.loading) } } diff --git a/src/app/spinner/spinner.component.html b/src/app/spinner/spinner.component.html new file mode 100644 index 0000000..9edd48e --- /dev/null +++ b/src/app/spinner/spinner.component.html @@ -0,0 +1,2 @@ + + diff --git a/src/app/spinner/spinner.component.scss b/src/app/spinner/spinner.component.scss new file mode 100644 index 0000000..4557eef --- /dev/null +++ b/src/app/spinner/spinner.component.scss @@ -0,0 +1,19 @@ +@import "../../assets/scss/variables"; + +.spinner { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background: $black-alpha; + background-image: url('/assets/images/loader.svg'); + background-size: 200px 200px; + background-repeat: no-repeat; + background-position: center center; + z-index: 100; + + &.active { + display: block; + } +} diff --git a/src/app/spinner/spinner.component.ts b/src/app/spinner/spinner.component.ts new file mode 100644 index 0000000..536f259 --- /dev/null +++ b/src/app/spinner/spinner.component.ts @@ -0,0 +1,50 @@ +import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core' + +@Component({ + selector: 'app-spinner', + templateUrl: './spinner.component.html', + styleUrls: ['./spinner.component.scss'] +}) + +export class SpinnerComponent implements OnInit { + + @ViewChild('spinner') spinner: ElementRef + @Input() show: boolean = false + + ngOnInit(): void { + } +/* + loader(action) { + let op = 0 + let timer = null + + switch(action) { + case 'show': + op = 1 + timer = setInterval(() => { + if(op <= 0.1){ + clearInterval(timer) + this.spinner.nativeElement.style.display = 'none' + } + this.spinner.nativeElement.style.opacity = op + this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")" + op -= op * 0.1 + }, 50) + + break + case 'hide': + op = 0.1 + this.spinner.nativeElement.style.display = 'block' + timer = setInterval(() => { + if(op >= 1){ + clearInterval(timer) + } + this.spinner.nativeElement.style.opacity = op + this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")" + op += op * 0.1 + }, 50) + + break + } + }*/ +} From 46f5eb5e2c7436c5977ed5f6c7328b6708f0b787 Mon Sep 17 00:00:00 2001 From: Dslak Date: Tue, 8 Dec 2020 12:58:33 +0100 Subject: [PATCH 8/8] add fade --- src/app/spinner/spinner.component.html | 2 +- src/app/spinner/spinner.component.scss | 6 +----- src/app/spinner/spinner.component.ts | 16 +++++++++++----- 3 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/app/spinner/spinner.component.html b/src/app/spinner/spinner.component.html index 9edd48e..91af365 100644 --- a/src/app/spinner/spinner.component.html +++ b/src/app/spinner/spinner.component.html @@ -1,2 +1,2 @@ - + diff --git a/src/app/spinner/spinner.component.scss b/src/app/spinner/spinner.component.scss index 4557eef..ded7d41 100644 --- a/src/app/spinner/spinner.component.scss +++ b/src/app/spinner/spinner.component.scss @@ -6,14 +6,10 @@ left: 0; height: 100vh; width: 100vw; - background: $black-alpha; + background: $yellow-alpha; background-image: url('/assets/images/loader.svg'); background-size: 200px 200px; background-repeat: no-repeat; background-position: center center; z-index: 100; - - &.active { - display: block; - } } diff --git a/src/app/spinner/spinner.component.ts b/src/app/spinner/spinner.component.ts index 536f259..2def854 100644 --- a/src/app/spinner/spinner.component.ts +++ b/src/app/spinner/spinner.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core' +import { Component, OnInit, Input, ViewChild, ElementRef, SimpleChanges } from '@angular/core' @Component({ selector: 'app-spinner', @@ -13,7 +13,13 @@ export class SpinnerComponent implements OnInit { ngOnInit(): void { } -/* + + ngOnChanges(changes: SimpleChanges) { + if(changes.show && changes.show.firstChange) { + this.loader(changes.show.currentValue ? 'show' : 'hide') + } + } + loader(action) { let op = 0 let timer = null @@ -29,7 +35,7 @@ export class SpinnerComponent implements OnInit { this.spinner.nativeElement.style.opacity = op this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")" op -= op * 0.1 - }, 50) + }, 20) break case 'hide': @@ -42,9 +48,9 @@ export class SpinnerComponent implements OnInit { this.spinner.nativeElement.style.opacity = op this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")" op += op * 0.1 - }, 50) + }, 20) break } - }*/ + } }