From 954bbe5546148aa27c7861accaa9bb232fcbbf5b Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Sun, 11 Mar 2018 18:09:28 +0100
Subject: [PATCH] feat(mobile): improve ui for mobile

---
 app-src/scripts/task-list/_task-list-d.scss | 13 ++++++++++++-
 app-src/scripts/work-view/_work-view-d.scss | 13 ++++++++++++-
 app-src/scripts/work-view/work-view-d.html  |  5 +++--
 app-src/styles/base/_page.scss              |  5 +++++
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/app-src/scripts/task-list/_task-list-d.scss b/app-src/scripts/task-list/_task-list-d.scss
index 9ea6698745..f7637fe472 100644
--- a/app-src/scripts/task-list/_task-list-d.scss
+++ b/app-src/scripts/task-list/_task-list-d.scss
@@ -21,6 +21,11 @@ task-list {
       background-color: $dark-theme-bg-darker;
     }
   }
+
+  @media(max-width: $layout-xs) {
+    // make space for the expand icon
+    margin-left: 12px;
+  }
   &__backlog {
   }
 }
@@ -75,7 +80,7 @@ task-list {
 
   .first-line {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
 
     // Button Stuff
     ng-md-icon {
@@ -144,6 +149,12 @@ task-list {
 
   .controls {
     white-space: nowrap;
+    text-align: right;
+
+    @media(max-width: $layout-xs) {
+      white-space: normal;
+      flex-basis: 100%;
+    }
   }
 
   .title {
diff --git a/app-src/scripts/work-view/_work-view-d.scss b/app-src/scripts/work-view/_work-view-d.scss
index 829a7a4e50..12089e11a7 100644
--- a/app-src/scripts/work-view/_work-view-d.scss
+++ b/app-src/scripts/work-view/_work-view-d.scss
@@ -2,5 +2,16 @@ work-view {
   display: block;
   max-width: $component-max-width;
   text-align: center;
-  margin:auto;
+  margin: auto;
+}
+
+.work-view-header {
+  @media(max-width: $layout-xs) {
+    .label {
+      display: none;
+    }
+    p {
+      margin: 0;
+    }
+  }
 }
\ No newline at end of file
diff --git a/app-src/scripts/work-view/work-view-d.html b/app-src/scripts/work-view/work-view-d.html
index db0ef945dc..5ed76cd03a 100644
--- a/app-src/scripts/work-view/work-view-d.html
+++ b/app-src/scripts/work-view/work-view-d.html
@@ -1,10 +1,11 @@
 <header class="work-view-header">
   <p>
     <ng-md-icon icon="playlist_play"></ng-md-icon>
-    Working today: <strong ng-bind="vm.totalTimeWorkedToday|duration"></strong>
+    <span class="label">Working today:</span>
+    <strong ng-bind="vm.totalTimeWorkedToday|duration"></strong>
     <ng-md-icon icon="timer"></ng-md-icon>
     –
-    Estimate remaining: ~<strong ng-bind="vm.totalEstimationRemaining|duration"></strong>
+    <span class="label">Estimate remaining:</span> ~<strong ng-bind="vm.totalEstimationRemaining|duration"></strong>
     <ng-md-icon icon="timer"></ng-md-icon>
 
     <md-button ng-click="vm.collapseAllNotesAndSubTasks()"
diff --git a/app-src/styles/base/_page.scss b/app-src/styles/base/_page.scss
index ad213b95a9..39b5412a74 100644
--- a/app-src/styles/base/_page.scss
+++ b/app-src/styles/base/_page.scss
@@ -20,6 +20,11 @@ html {
 
 main {
   padding: 20px 20px 50px;
+
+  @media(max-width: $layout-xs) {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 global-link-list + .ui-view-container > main {