Fix bugs

src/app/components/modal/modals/blocks/blocks.component.html

@@ -11,7 +11,7 @@
 
     <div class="header">
       <div class="exit" (click)="modalService.cancel()"></div>
-      <div class="block" [ngStyle]="{ 'background-color': tower.getColorOfBlock(editedValues[i]) | color }"></div>
+      <div class="block" [ngStyle]="{ 'background-color': tower.getColorOfTag(editedValues[i].tag) | color }"></div>
       <h1>View item</h1>
     </div>
 
@@ -30,7 +30,7 @@
 
     <textarea
       [disabled]="!editMode"
-      placeholder="Write a description here…"
+      placeholder="{{ editMode ? 'Write a description here…' : '' }}"
       [(ngModel)]="editedValues[i].description"
     ></textarea>
 
@@ -45,7 +45,9 @@
     </div>
 
     <div class="bottom">
-      <button class="{{ editMode && i + 1 === activeChild ? '' : 'hidden' }}" (click)="submitChange()"></button>
+      <button class="{{ editMode && i + 1 === activeChild ? '' : 'hidden' }}" (click)="submitChange()">
+        Save and exit
+      </button>
       <div class="edit {{ editMode && i + 1 === activeChild ? 'active' : '' }}" (click)="editMode = !editMode">
         <img src="assets/pen.svg" alt="edit" />
       </div>
@@ -62,6 +64,7 @@
 
     <div class="header">
       <div class="exit" (click)="modalService.cancel()"></div>
+      <div class="block" [ngStyle]="{ 'background-color': tower.getColorOfTag(top(editedValues).tag) | color }"></div>
       <h1>Create an item</h1>
     </div>
 

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;
   }

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<Block> {
     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),

src/app/components/pages/page/tower/tower.component.scss

@@ -13,20 +13,27 @@
 
   &:hover {
     @media (min-width: $mobile-width) {
-      div {
-        .container {
+      div.container {
         box-shadow: $shadow;
       }
     }
   }
-  }
 
   &.cdk-drag-preview {
-    div {
-      .container {
+    div.container {
+      @media (max-width: $mobile-width) {
+        @keyframes shadow {
+          from {
+            box-shadow: none;
+          }
+          to {
             box-shadow: $shadow;
           }
         }
+
+        animation: shadow $long-animation-time forwards;
+      }
+    }
   }
 
   &.trash-highlight {
@@ -87,9 +94,6 @@
         transition: opacity $short-animation-time;
       }
 
-      .tasks-container {
-      }
-
       img {
         position: relative;
         z-index: 2;

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)
           ) {

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;
     });
 

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());
   }
 }

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';
 

src/library/forms.scss

@@ -3,6 +3,11 @@
 
 textarea {
   @include normal-text();
+
+  &:disabled {
+    background-color: $light-color;
+  }
+
   display: block;
   width: 100%;
   height: 150px;