feat(tasks): various little improvements

src/app/features/tasks/task/task.component.html

@@ -104,7 +104,7 @@
           <button (click)="startTask()"
                   *ngIf="!task.isDone && !isCurrent && !task.subTasks"
                   title="Start tracking time"
-                  class="ico-btn"
+                  class="ico-btn start-task-btn"
                   color=""
                   mat-icon-button
                   tabindex="2">

src/app/features/tasks/task/task.component.scss

@@ -111,13 +111,17 @@ $z-time-btn-svg-wrapper: 5555;
   }
 
   :host-context(.isLightTheme):last-child > .inner-wrapper > & {
-    //border-bottom-color: $light-theme-extra-border-color;
+    @include mq(xs, max) {
+      border-bottom-color: $light-theme-extra-border-color;
+    }
   }
 
   :host-context(.isDarkTheme):last-child > .inner-wrapper > & {
-    //border-bottom-color: $dark-theme-extra-border-color;
-    //border-bottom-color: $dark-theme-bg;
-    //border-bottom-color: rgb(55, 55, 55);
+    @include mq(xs, max) {
+      //border-bottom-color: $dark-theme-extra-border-color;
+      //border-bottom-color: $dark-theme-bg;
+      border-bottom-color: rgb(55, 55, 55);
+    }
   }
 
   .inner-wrapper:not(.isCurrent) > .box {
@@ -218,13 +222,10 @@ $z-time-btn-svg-wrapper: 5555;
     display: none !important;
   }
 
-  display: flex;
+  display: none;
   flex-flow: row;
-  transform: scaleX(0);
   transform-origin: right center;
   opacity: 0;
-  transition: $transition-ultra-fast;
-  transition-property: transform, opacity;
   position: absolute;
   right: 100%;
   top: 0;
@@ -236,7 +237,7 @@ $z-time-btn-svg-wrapper: 5555;
 
   .first-line:hover & {
     opacity: 1;
-    transform: scaleX(1);
+    display: flex;
   }
 
   :host-context(.isReducedTheme.isDarkTheme) & {
@@ -264,12 +265,13 @@ $z-time-btn-svg-wrapper: 5555;
 
   &:before {
     content: '';
-    border-left: 1px solid rgba(200, 200, 200, 0.9);
+    border-left: 1px solid;
     width: 1px;
     height: 90%;
     position: absolute;
     left: 0;
     top: 5%;
+    opacity: 0.5;
   }
 }
 
@@ -406,13 +408,6 @@ $z-time-btn-svg-wrapper: 5555;
     }
   }
 
-  @include mq(xs) {
-    .first-line:hover {
-      visibility: hidden;
-    }
-  }
-
-
   .time {
     font-style: italic;
     display: flex;
@@ -704,6 +699,12 @@ progress-bar {
 }
 
 
+.start-task-btn {
+  :host-context(.isHidePlayBtn) & {
+    display: none !important;
+  }
+}
+
 // ANIMATIONS ETC
 // --------------
 @keyframes success-btn-ani {

src/app/features/tasks/task/task.component.ts

@@ -347,10 +347,13 @@ export class TaskComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   onPanStart(ev) {
+    if (!IS_TOUCH) {
+      return;
+    }
+
     this._resetAfterPan();
     if (
-      !IS_TOUCH
-      || (ev.target.className.indexOf && ev.target.className.indexOf('drag-handle') > -1)
+      (ev.target.className.indexOf && ev.target.className.indexOf('drag-handle') > -1)
       || Math.abs(ev.deltaY) > Math.abs(ev.deltaX)
       || document.activeElement === this.editOnClickEl.nativeElement
       || ev.isFinal

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

@@ -10,7 +10,7 @@
     </ng-template>
 
     <div class="tab-wrapper bg-400">
-      <div class="component-wrapper page-wrapper">
+      <div class="task-list-wrapper">
         <task-list [tasks]="taskService.backlogTasks$|async"
                    [noTasksMsg]="'There are currently no tasks in your backlog'"
                    listId="PARENT"
@@ -27,7 +27,7 @@
     </ng-template>
 
     <div class="tab-wrapper bg-400">
-      <div class="task-list-wrapper">
+      <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