From dc86993c8408f5fde31b1070541b98b190fd1565 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 26 May 2022 22:15:56 -0700
Subject: [PATCH] mobile improvements, fix dismiss 1 task

---
 .../manage/tasks/tasks.component.html         | 29 ++++++++++++-------
 .../manage/tasks/tasks.component.scss         |  4 +++
 .../manage/tasks/tasks.component.ts           |  2 +-
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.html b/src-ui/src/app/components/manage/tasks/tasks.component.html
index 45fc02666..a9d66ce28 100644
--- a/src-ui/src/app/components/manage/tasks/tasks.component.html
+++ b/src-ui/src/app/components/manage/tasks/tasks.component.html
@@ -33,10 +33,11 @@
             <label class="form-check-label" for="all-tasks"></label>
           </div>
         </th>
-        <th scope="col" width="25%" i18n>Name</th>
-        <th scope="col" width="20%" i18n>Created</th>
-        <th scope="col" width="45%" i18n>Results</th>
-        <th scope="col" width="10%" i18n>Actions</th>
+        <th scope="col" i18n>Name</th>
+        <th scope="col" class="d-none d-lg-table-cell" i18n>Created</th>
+        <th scope="col" class="d-none d-lg-table-cell" *ngIf="activeTab != 'incomplete'" i18n>Results</th>
+        <th scope="col" class="d-table-cell d-lg-none" i18n>Info</th>
+        <th scope="col" i18n>Actions</th>
       </tr>
     </thead>
     <tbody>
@@ -47,20 +48,28 @@
             <label class="form-check-label" for="task{{task.id}}"></label>
           </div>
         </th>
-        <td>{{ task.name }}</td>
-        <td>{{ task.created | customDate:'short' }}</td>
-        <td>
+        <td class="overflow-auto">{{ task.name }}</td>
+        <td class="d-none d-lg-table-cell">{{ task.created | customDate:'short' }}</td>
+        <td class="d-none d-lg-table-cell" *ngIf="activeTab != 'incomplete'">
           <div class="text-primary" *ngIf="task.result.length > 50" [ngbPopover]="resultPopover" popoverClass="shadow font-monospace small" triggers="mouseenter:mouseleave:click">
             <svg fill="currentColor" class="me-2" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
               <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
             </svg>
             <span class="small d-none d-md-inline-block font-monospace text-muted">{{ task.result | slice:0:50 }}&hellip;</span>
+            <ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
           </div>
           <span *ngIf="task.result.length <= 50" class="small d-none d-md-inline-block font-monospace">{{ task.result | slice:0:50 }}</span>
-          <ng-template #resultPopover><div class="small">{{ task.result }}</div></ng-template>
+        </td>
+        <td class="d-lg-none">
+          <span [ngbPopover]="resultPopoverMobile" popoverClass="shadow small mobile" container="body">
+            <svg fill="currentColor" class="me-2" width="1.2em" height="1.2em" style="vertical-align: text-top;" viewBox="0 0 16 16">
+              <use xlink:href="assets/bootstrap-icons.svg#info-circle" />
+            </svg>
+          </span>
+          <ng-template #resultPopoverMobile><div class="small">{{ task.created | customDate:'short' }}<div class="font-monospace">{{ task.result }}</div></div></ng-template>
         </td>
         <td scope="row">
-          <button class="btn btn-sm btn-outline-secondary" (click)="acknowledgeTask(task)">
+          <button class="btn btn-sm btn-outline-secondary" (click)="dismissTask(task)">
             <svg class="sidebaricon" fill="currentColor">
               <use xlink:href="assets/bootstrap-icons.svg#check"/>
             </svg>&nbsp;<ng-container i18n>Dismiss</ng-container>
@@ -79,7 +88,7 @@
     </ng-template>
   </li>
   <li ngbNavItem="completed">
-    <a ngbNavLink i18n>Completed&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completedFileTasks.length}}</span></a>
+    <a ngbNavLink i18n>Complete&nbsp;<span class="badge bg-secondary ms-1">{{tasksService.completedFileTasks.length}}</span></a>
     <ng-template ngbNavContent>
       <ng-container [ngTemplateOutlet]="tasksTemplate" [ngTemplateOutletContext]="{tasks:tasksService.completedFileTasks}"></ng-container>
     </ng-template>
diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.scss b/src-ui/src/app/components/manage/tasks/tasks.component.scss
index 5f85b09f3..3bdefc2e2 100644
--- a/src-ui/src/app/components/manage/tasks/tasks.component.scss
+++ b/src-ui/src/app/components/manage/tasks/tasks.component.scss
@@ -1,3 +1,7 @@
 ::ng-deep .popover {
     max-width: 50%;
 }
+
+::ng-deep .popover.mobile {
+    max-width: 75%;
+}
diff --git a/src-ui/src/app/components/manage/tasks/tasks.component.ts b/src-ui/src/app/components/manage/tasks/tasks.component.ts
index 873325b7d..392e0ec14 100644
--- a/src-ui/src/app/components/manage/tasks/tasks.component.ts
+++ b/src-ui/src/app/components/manage/tasks/tasks.component.ts
@@ -35,7 +35,7 @@ export class TasksComponent implements OnInit, OnDestroy {
 
   dismissTasks(task: PaperlessTask = undefined) {
     let tasks = task ? new Set([task.id]) : this.selectedTasks
-    if (this.selectedTasks.size == 0)
+    if (!task && this.selectedTasks.size == 0)
       tasks = new Set(this.currentTasks.map((t) => t.id))
     this.tasksService.dismissTasks(tasks)
   }