Mirrors/super-productivity
1
0
Fork 0
mirror of https://github.com/johannesjo/super-productivity.git synced 2026-07-31 11:40:47 +00:00
Code Issues Projects Releases Wiki Activity

feat: improve mobile styling for scheduled tasks overview

Browse source
This commit is contained in:
Johannes Millan 2019-02-09 14:13:30 +01:00
parent dfda6a292e
commit 999ef35204
2 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/app/pages/work-view/backlog-tabs/backlog-tabs.component.html
View file

@ -30,7 +30,8 @@
<div class="component-wrapper page-wrapper">
<p *ngIf="!(taskService.scheduledTasks$|async)?.length"
class="no-scheduled-tasks">
There are currently no scheduled tasks. You can schedule a task by choosing "Schedule Task" in the task context menu. To open it click on the 3 little dots on the right of a task.
There are currently no scheduled tasks. You can schedule a task by choosing "Schedule Task" in the task
context menu. To open it click on the 3 little dots on the right of a task.
</p>
@ -40,8 +41,10 @@
class="scheduled-task">
<mat-card-content>
<div class="content">
<div class="title">{{task.title}}</div>
<div class="due-date">{{task.reminderData.remindAt|humanizeTimestamp}}</div>
<div class="title-and-due-date">
<div class="title">{{task.title}}</div>
<div class="due-date">{{task.reminderData.remindAt|humanizeTimestamp}}</div>
</div>
<div class="controls">
<button mat-mini-fab
color="primary"

28
src/app/pages/work-view/backlog-tabs/backlog-tabs.component.scss
View file

@ -85,12 +85,25 @@ task-list ::ng-deep > .task-list-inner {
padding: $s/2 $s*2;
.content {
.title-and-due-date {
flex: 1;
display: flex;
flex-direction: column;
@include mq(xs) {
flex-direction: row;
}
}
.title {
flex: 1;
}
.due-date {
margin: 0 $s*2;
font-style: italic;
@include mq(xs) {
margin: 0 $s*2;
}
}
display: flex;
@ -101,20 +114,19 @@ task-list ::ng-deep > .task-list-inner {
align-self: center;
display: flex;
justify-content: center;
flex-direction: column;
@include mq(xs) {
flex-direction: row;
}
flex-direction: row;
button {
margin-left: $s;
margin-left: $s/2;
@include mq(xs) {
margin-left: $s;
}
}
}
}
}
.no-scheduled-tasks{
.no-scheduled-tasks {
margin: $s;
margin-top: $s*2;
text-align: center;