From 674f07f5f130a5ffa01e2660ef27f0e7842b7494 Mon Sep 17 00:00:00 2001 From: Andras Schmelczer Date: Mon, 16 Sep 2019 15:18:23 +0200 Subject: [PATCH] Fix bugs --- .../modal/modals/blocks/blocks.component.html | 9 ++++--- .../modal/modals/blocks/blocks.component.scss | 6 ++++- .../modal/modals/blocks/blocks.component.ts | 19 +++++++++++---- .../pages/page/tower/tower.component.scss | 24 +++++++++++-------- .../pages/page/tower/tower.component.ts | 4 +++- src/app/model/tower.ts | 6 ++--- src/app/services/cancel.service.ts | 2 -- src/app/services/store.service.ts | 2 -- src/library/forms.scss | 5 ++++ 9 files changed, 51 insertions(+), 26 deletions(-) diff --git a/src/app/components/modal/modals/blocks/blocks.component.html b/src/app/components/modal/modals/blocks/blocks.component.html index 2e9270a..e9e1e69 100644 --- a/src/app/components/modal/modals/blocks/blocks.component.html +++ b/src/app/components/modal/modals/blocks/blocks.component.html @@ -11,7 +11,7 @@
-
+

View item

@@ -30,7 +30,7 @@ @@ -45,7 +45,9 @@
- +
edit
@@ -62,6 +64,7 @@
+

Create an item

diff --git a/src/app/components/modal/modals/blocks/blocks.component.scss b/src/app/components/modal/modals/blocks/blocks.component.scss index 77cf427..845e0ab 100644 --- a/src/app/components/modal/modals/blocks/blocks.component.scss +++ b/src/app/components/modal/modals/blocks/blocks.component.scss @@ -58,6 +58,10 @@ z-index: 10000; @include card(); + + @media (max-width: $mobile-width) { + opacity: 0 !important; + } } &:first-child { @@ -65,7 +69,7 @@ } &.placeholder { - opacity: 0; + opacity: 0 !important; width: 1000px; max-width: 1000px; } diff --git a/src/app/components/modal/modals/blocks/blocks.component.ts b/src/app/components/modal/modals/blocks/blocks.component.ts index b6a4712..7662cc7 100644 --- a/src/app/components/modal/modals/blocks/blocks.component.ts +++ b/src/app/components/modal/modals/blocks/blocks.component.ts @@ -45,6 +45,8 @@ export class BlocksComponent implements OnInit, OnDestroy { } @HostListener('scroll') onScroll() { + console.log('scrolling'); + this.animateScroll(); const newToken = ++this.endOfScrollToken; setTimeout(() => { @@ -59,7 +61,9 @@ export class BlocksComponent implements OnInit, OnDestroy { private cancelService: CancelService, private changeDetector: ChangeDetectorRef, private component: ElementRef - ) {} + ) { + window.addEventListener('resize', this.onScroll.bind(this)); + } get blocks(): Array { return this.tower.blocks.filter(b => b.isDone === this.onlyDone); @@ -107,10 +111,12 @@ export class BlocksComponent implements OnInit, OnDestroy { } animate(cardStyle, maskStyle, t: number) { + t = Math.min(2, Math.max(0, t)); + cardStyle.opacity = (1.33 * (1 - t / 2)).toString(); + console.log(1 - t / 2); t = Math.min(1, Math.max(0, t)); - cardStyle.opacity = (1 - t / 1.5).toString(); maskStyle.opacity = Math.pow(t, 0.5).toString(); - maskStyle.display = t <= 0.1 ? 'none' : 'block'; + maskStyle.display = t <= 0.05 ? 'none' : 'block'; } adjustPosition() { @@ -118,13 +124,17 @@ export class BlocksComponent implements OnInit, OnDestroy { return; } + console.log('adjusting position'); + const c = this.component.nativeElement; const middle = [...this.container.nativeElement.children] .slice(1, -1) .map(element => Math.abs(element.offsetLeft - c.scrollLeft + element.clientWidth / 2 - window.innerWidth / 2)) - .map((value, index) => (Math.abs(index + 1 - this.activeChild) === 1 ? value / 1.5 : value)) + .map((value, index) => + Math.abs(index + 1 - this.activeChild) === 1 ? Math.abs(value - window.innerWidth / 4) : value + ) .reduce( (middleIndex, current, currentIndex, list) => (list[middleIndex] < current ? middleIndex : currentIndex), 0 @@ -136,6 +146,7 @@ export class BlocksComponent implements OnInit, OnDestroy { scrollToChild(index: number, instantly?: boolean) { this.activeChild = index; + console.log('scrolling to', index); const element = this.container.nativeElement.children[index]; this.component.nativeElement.scrollTo({ left: element.offsetLeft - (window.innerWidth / 2 - element.clientWidth / 2), diff --git a/src/app/components/pages/page/tower/tower.component.scss b/src/app/components/pages/page/tower/tower.component.scss index 9d333fc..5e70603 100644 --- a/src/app/components/pages/page/tower/tower.component.scss +++ b/src/app/components/pages/page/tower/tower.component.scss @@ -13,18 +13,25 @@ &:hover { @media (min-width: $mobile-width) { - div { - .container { - box-shadow: $shadow; - } + div.container { + box-shadow: $shadow; } } } &.cdk-drag-preview { - div { - .container { - box-shadow: $shadow; + div.container { + @media (max-width: $mobile-width) { + @keyframes shadow { + from { + box-shadow: none; + } + to { + box-shadow: $shadow; + } + } + + animation: shadow $long-animation-time forwards; } } } @@ -87,9 +94,6 @@ transition: opacity $short-animation-time; } - .tasks-container { - } - img { position: relative; z-index: 2; diff --git a/src/app/components/pages/page/tower/tower.component.ts b/src/app/components/pages/page/tower/tower.component.ts index 71d0fd1..91186e6 100644 --- a/src/app/components/pages/page/tower/tower.component.ts +++ b/src/app/components/pages/page/tower/tower.component.ts @@ -56,7 +56,9 @@ export class TowerComponent implements OnInit { }); if ( - (difference.every(i => i) && this.tower.blocks.length + 1 === value.blocks.length) || + (difference.every(i => i) && + this.tower.blocks.length + 1 === value.blocks.length && + top(value.blocks).isDone) || (this.tower.blocks.length === value.blocks.length && this.tower.blocks.filter(b => b.isDone).length + 1 === value.blocks.filter(b => b.isDone).length) ) { diff --git a/src/app/model/tower.ts b/src/app/model/tower.ts index 4ba88ab..f40d76d 100644 --- a/src/app/model/tower.ts +++ b/src/app/model/tower.ts @@ -48,8 +48,8 @@ export class Tower extends Serializable implements ITower, TowerState { this.changeKeys({ name }); } - getColorOfBlock(block: Block): IColor { - return lighten((hash(block.tag) - 0.5) * 50, this.baseColor); + getColorOfTag(tag: string): IColor { + return lighten((hash(tag) - 0.5) * 50, this.baseColor); } protected onAfterClone() { @@ -59,7 +59,7 @@ export class Tower extends Serializable implements ITower, TowerState { this.coloredBlocks = this.blocks.map(b => { const coloredBlock = b as ColoredBlock; - coloredBlock.color = this.getColorOfBlock(b); + coloredBlock.color = this.getColorOfTag(b.tag); return coloredBlock; }); diff --git a/src/app/services/cancel.service.ts b/src/app/services/cancel.service.ts index a8a4448..e3537ea 100644 --- a/src/app/services/cancel.service.ts +++ b/src/app/services/cancel.service.ts @@ -19,12 +19,10 @@ export class CancelService { } cancelAllExcept(except: object) { - console.log('cancel all except', except); this.subscribers.filter(s => s.object !== except).map(s => s.callback()); } cancelAll() { - console.log('cancel all'); this.subscribers.map(s => s.callback()); } } diff --git a/src/app/services/store.service.ts b/src/app/services/store.service.ts index a4b1596..be3c4e0 100644 --- a/src/app/services/store.service.ts +++ b/src/app/services/store.service.ts @@ -1,6 +1,4 @@ import { Injectable } from '@angular/core'; -import { Page } from '../model/page'; -import { IPage } from '../interfaces/persistance/page'; const LOCAL_STORAGE_KEY = 'life-towers.data.v.2'; diff --git a/src/library/forms.scss b/src/library/forms.scss index 0e730a1..43df3cf 100644 --- a/src/library/forms.scss +++ b/src/library/forms.scss @@ -3,6 +3,11 @@ textarea { @include normal-text(); + + &:disabled { + background-color: $light-color; + } + display: block; width: 100%; height: 150px;