diff --git a/src/app/components/pages/page/tower/tasks/tasks.component.scss b/src/app/components/pages/page/tower/tasks/tasks.component.scss
index 7728456..1a151bd 100644
--- a/src/app/components/pages/page/tower/tasks/tasks.component.scss
+++ b/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;
diff --git a/src/app/components/pages/page/tower/tower.component.html b/src/app/components/pages/page/tower/tower.component.html
index 9daa13d..65fc8fe 100644
--- a/src/app/components/pages/page/tower/tower.component.html
+++ b/src/app/components/pages/page/tower/tower.component.html
@@ -6,8 +6,10 @@
-
diff --git a/src/app/components/pages/page/tower/tower.component.scss b/src/app/components/pages/page/tower/tower.component.scss
index 239ae2b..931af89 100644
--- a/src/app/components/pages/page/tower/tower.component.scss
+++ b/src/app/components/pages/page/tower/tower.component.scss
@@ -108,30 +108,35 @@
}
}
- .block-container {
- display: flex;
- flex-flow: row wrap;
- justify-content: flex-start;
- align-content: flex-start;
- align-items: flex-end;
- transform: scaleY(-1);
+ .block-container-container {
+ position: relative;
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 {
- animation: falling 1.5s cubic-bezier(0.5, 0, 1, 0) forwards;
+ @keyframes falling {
+ 0% {
+ opacity: 0;
+ transform: translateY(500%);
+ }
- @keyframes falling {
- 0% {
- opacity: 0;
- transform: translateY(500%);
- }
+ 50% {
+ opacity: 1;
+ }
- 50% {
- opacity: 1;
- }
-
- 100% {
- transform: translateY(0);
+ 100% {
+ transform: translateY(0);
+ }
}
}
}
diff --git a/src/app/components/pages/page/tower/tower.component.ts b/src/app/components/pages/page/tower/tower.component.ts
index 124bb43..116e245 100644
--- a/src/app/components/pages/page/tower/tower.component.ts
+++ b/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;
diff --git a/src/app/components/shared/double-slider/double-slider.component.scss b/src/app/components/shared/double-slider/double-slider.component.scss
index 1240944..a624013 100644
--- a/src/app/components/shared/double-slider/double-slider.component.scss
+++ b/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;
diff --git a/src/app/components/shared/toggle/toggle.component.scss b/src/app/components/shared/toggle/toggle.component.scss
index 492f6f5..23f828d 100644
--- a/src/app/components/shared/toggle/toggle.component.scss
+++ b/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 {
- box-shadow: $shadow;
- transform: translateX(2px);
- }
+ @media (min-width: $mobile-width) {
+ &:hover:after {
+ box-shadow: $shadow;
+ transform: translateX(2px);
+ }
- &.on:hover:after {
- transform: translateX(-2px);
+ &.on:hover:after {
+ transform: translateX(-2px);
+ }
}
&.on:after {
diff --git a/src/app/services/data.service.ts b/src/app/services/data.service.ts
index e7d7356..8f333fb 100644
--- a/src/app/services/data.service.ts
+++ b/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() {