Fix minor issues

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

@@ -69,7 +69,7 @@
           text-align: left;
 
           @media (max-width: $mobile-width) {
-            font-size: var(--small-font-size);
+            font-size: calc(var(--small-font-size) / 2 + var(--medium-font-size) / 2);
           }
 
           position: relative;

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

@@ -6,8 +6,10 @@
 
     <img src="assets/plus-sign.svg" alt="add item" (click)="addBlock()" />
 
-    <div class="block-container {{ isFalling ? 'falling' : '' }}">
+    <div class="block-container-container">
-      <app-block *ngFor="let block of drawableBlocks" [block]="block" [tower]="tower"></app-block>
+      <div class="block-container falling">
+        <app-block *ngFor="let block of drawableBlocks" [block]="block" [tower]="tower"></app-block>
+      </div>
     </div>
   </div>
 

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

@@ -108,30 +108,35 @@
         }
       }
 
-      .block-container {
+      .block-container-container {
-        display: flex;
+        position: relative;
-        flex-flow: row wrap;
-        justify-content: flex-start;
-        align-content: flex-start;
-        align-items: flex-end;
-        transform: scaleY(-1);
         flex: 1;
+        .block-container {
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: flex-start;
+          align-content: flex-start;
+          align-items: flex-end;
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          transform: scaleY(-1);
+          &.falling > *:last-child {
+            animation: falling 1.5s cubic-bezier(0.5, 0, 1, 0) forwards;
 
-        &.falling > *:last-child {
+            @keyframes falling {
-          animation: falling 1.5s cubic-bezier(0.5, 0, 1, 0) forwards;
+              0% {
+                opacity: 0;
+                transform: translateY(500%);
+              }
 
-          @keyframes falling {
+              50% {
-            0% {
+                opacity: 1;
-              opacity: 0;
+              }
-              transform: translateY(500%);
-            }
 
-            50% {
+              100% {
-              opacity: 1;
+                transform: translateY(0);
-            }
+              }
-
-            100% {
-              transform: translateY(0);
             }
           }
         }

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

@@ -29,7 +29,9 @@ export class TowerComponent {
   }
 
   get tasks(): Block[] {
-    return this.tower.blocks.filter(block => !block.isDone);
+    return this.tower.blocks.filter(
+      block => this.dateRange.from <= block.created && block.created <= this.dateRange.to && !block.isDone
+    );
   }
 
   @Input() tower: Tower;

src/app/components/shared/double-slider/double-slider.component.scss

@@ -43,6 +43,7 @@ $slider-size: 40px;
           transform: translateY(-$slider-size / 2 + $line-height / 2) scale(1.1);
         }
       }
+
       cursor: pointer;
 
       position: relative;

src/app/components/shared/toggle/toggle.component.scss

@@ -50,13 +50,15 @@
       transition: box-shadow $long-animation-time, left $long-animation-time, transform $long-animation-time;
     }
 
-    &:hover:after {
+    @media (min-width: $mobile-width) {
-      box-shadow: $shadow;
+      &:hover:after {
-      transform: translateX(2px);
+        box-shadow: $shadow;
-    }
+        transform: translateX(2px);
+      }
 
-    &.on:hover:after {
+      &.on:hover:after {
-      transform: translateX(-2px);
+        transform: translateX(-2px);
+      }
     }
 
     &.on:after {

src/app/services/data.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { ApplicationRef, Injectable } from '@angular/core';
 import { StoreService } from './store.service';
 import { Page } from '../model/page';
 
@@ -22,7 +22,7 @@ export class DataService {
   private hasLoaded = new Promise(resolve => (this.afterLoadFinished = resolve));
   private afterLoadFinished: () => void;
 
-  constructor(private storeService: StoreService) {
+  constructor(private storeService: StoreService, private applicationRef: ApplicationRef) {
     this.init();
   }
 
@@ -72,6 +72,7 @@ export class DataService {
 
   private update() {
     this.subscribers.map(f => f());
+    this.applicationRef.tick();
   }
 
   private loadActiveIndex() {