From 999ef3520426554d5eabab0bbcf871d52af8a062 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Sat, 9 Feb 2019 14:13:30 +0100
Subject: [PATCH] feat: improve mobile styling for scheduled tasks overview

---
 .../backlog-tabs/backlog-tabs.component.html  |  9 ++++--
 .../backlog-tabs/backlog-tabs.component.scss  | 28 +++++++++++++------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.html b/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.html
index 9e4e3eec45..c777048530 100644
--- a/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.html
+++ b/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.html
@@ -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"
diff --git a/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.scss b/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.scss
index 7f9844c8c9..7c30f56f7d 100644
--- a/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.scss
+++ b/src/app/pages/work-view/backlog-tabs/backlog-tabs.component.scss
@@ -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;