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 @@ add item -
- +
+
+ +
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() {