andras/life-towers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix minor issues

Browse source
This commit is contained in:
schmelczerandras 2019-08-27 14:58:43 +02:00
parent e992152a75
commit 72eaca7a3b
7 changed files with 45 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/components/pages/page/tower/tasks/tasks.component.scss
View file

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

6
src/app/components/pages/page/tower/tower.component.html
View file

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

45
src/app/components/pages/page/tower/tower.component.scss
View file

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

4
src/app/components/pages/page/tower/tower.component.ts
View file

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

1
src/app/components/shared/double-slider/double-slider.component.scss
View file

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

14
src/app/components/shared/toggle/toggle.component.scss
View file

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

5
src/app/services/data.service.ts
View file

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