-
+
@@ -62,6 +64,7 @@
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;