signalk-maintenance-tracker 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.5.1
+
+Phone-sized polish for the task list and modals.
+
+- The status column no longer crowds out task names on narrow displays: badges
+  stack below 640px, and the name column keeps a minimum width instead of the
+  status column claiming a fixed 220px.
+- Notes keep their font size when an iPhone rotates to landscape — iOS text
+  autosizing was inflating them.
+- Task rows drop their edit and delete buttons; both live on the task detail
+  page, so tapping a row goes there instead of hitting a stray button.
+- The mark-complete modal loses some redundant explanatory text.
+
 # v1.5.0
 
 The tracker learns the difference between maintenance you repeat and jobs you

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-maintenance-tracker",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Track recurring boat maintenance tasks with runtime and calendar based intervals.",
   "main": "dist/index.js",
   "license": "MIT",

package/public/app/components/LogEntryModal.js

@@ -244,14 +244,6 @@ export function LogEntryModal(props) {
                   value=${runtime}
                   onInput=${(/** @type {any} */ e) => setRuntime(e.currentTarget.value)}
                 />
-                ${
-                  !isEdit
-                    ? html`<div class="field-hint">
-                        Prefilled with the current runtime reading when
-                        available.
-                      </div>`
-                    : null
-                }
               </div>`
             : null
         }

package/public/app/pages/TaskListPage.js

@@ -4,7 +4,7 @@
  */
 import { html } from '../lib/html.js';
 import { useState, useEffect } from '../../vendor/preact-hooks.js';
-import { useTasks, useTags, deleteTask } from '../api/hooks.js';
+import { useTasks, useTags } from '../api/hooks.js';
 import { useAuth } from '../auth/auth.js';
 import { useListParams } from '../lib/useListParams.js';
 import {
@@ -13,14 +13,12 @@ import {
   formatRemainingTime,
   statusLabel,
 } from '../lib/format.js';
-import { toast } from '../lib/toasts.js';
 import { Table } from '../components/Table.js';
 import { Pagination } from '../components/Pagination.js';
 import { StatusBadge } from '../components/StatusBadge.js';
 import { StockBadge } from '../components/StockBadge.js';
 import { TaskFormModal } from '../components/TaskFormModal.js';
 import { LogEntryModal } from '../components/LogEntryModal.js';
-import { ConfirmModal } from '../components/ConfirmModal.js';
 
 /** @typedef {import('../types.js').TaskDTO} TaskDTO */
 
@@ -62,17 +60,16 @@ export function TaskListPage() {
   });
   const tagsRes = useTags();
 
-  /** @type {[TaskDTO|null|undefined, any]} editor: undefined=closed, null=create, TaskDTO=edit */
+  /** @type {[null|undefined, any]} editor: undefined=closed, null=create (edit lives on task detail) */
   const [editorTask, setEditorTask] = useState(
-    /** @type {TaskDTO|null|undefined} */ (undefined),
+    /** @type {null|undefined} */ (undefined),
   );
-  // What the editor's "Recurring task" toggle defaults to on create: true
-  // from "New task", false from "New todo". Ignored when editing.
+  // What the editor's "Recurring task" toggle defaults to: true from
+  // "New task", false from "New todo".
   const [editorRecurring, setEditorRecurring] = useState(true);
   const [completing, setCompleting] = useState(
     /** @type {TaskDTO|null} */ (null),
   );
-  const [deleting, setDeleting] = useState(/** @type {TaskDTO|null} */ (null));
 
   // Tags and status are single-select, so search, tag and status simply AND
   // together. A task has exactly one status, and tags are used as categories,
@@ -110,7 +107,6 @@ export function TaskListPage() {
       key: 'status',
       label: 'Status',
       sortable: true,
-      className: 'col-status',
       render: (/** @type {TaskDTO} */ t) =>
         html`<span class="status-badges"
           ><${StatusBadge} status=${t.status} /><${StockBadge} consumables=${t.consumables}
@@ -120,6 +116,7 @@ export function TaskListPage() {
       key: 'name',
       label: 'Name',
       sortable: true,
+      className: 'col-name',
       render: (/** @type {TaskDTO} */ t) =>
         html`<a href=${'#/tasks/' + encodeURIComponent(t.slug)}>${t.name}</a>`,
     },
@@ -160,24 +157,6 @@ export function TaskListPage() {
                 >
                   <i class="bi bi-check2-circle" />
                 </button>
-                <button
-                  type="button"
-                  class="btn-icon primary"
-                  aria-label=${'Edit ' + t.name}
-                  title="Edit"
-                  onClick=${() => setEditorTask(t)}
-                >
-                  <i class="bi bi-pencil" />
-                </button>
-                <button
-                  type="button"
-                  class="btn-icon danger"
-                  aria-label=${'Delete ' + t.name}
-                  title="Delete"
-                  onClick=${() => setDeleting(t)}
-                >
-                  <i class="bi bi-trash" />
-                </button>
               `
             : null
         }
@@ -307,20 +286,6 @@ export function TaskListPage() {
           : null
       }
       ${completing ? html`<${LogEntryModal} task=${completing} onClose=${() => setCompleting(null)} />` : null}
-      ${
-        deleting
-          ? html`<${ConfirmModal}
-              title="Delete task"
-              message=${'Delete "' + deleting.name + '" and its entire maintenance log? This cannot be undone.'}
-              onConfirm=${async () => {
-                await deleteTask(deleting.slug);
-                toast('Task deleted.', 'success');
-                setDeleting(null);
-              }}
-              onClose=${() => setDeleting(null)}
-            />`
-          : null
-      }
     </div>
   `;
 }

package/public/styles/main.css

@@ -9,6 +9,10 @@ html,
 body {
   margin: 0;
   padding: 0;
+  /* iOS WebKit inflates some text blocks in landscape ("text autosizing"),
+     giving rendered notes mismatched font sizes. Keep sizes as authored. */
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 body {
@@ -583,10 +587,11 @@ pre {
   font-variant-numeric: tabular-nums;
 }
 
-/* status column: room for status + stock badges side by side */
-.table th.col-status,
-.table td.col-status {
-  width: 220px;
+/* columns size to content, so status expands to fit its badges side by side
+   when there's room; this floor keeps a name from being squeezed to one word
+   wide when it isn't */
+.table td.col-name {
+  min-width: min(8em, 35vw);
 }
 .status-badges {
   display: flex;
@@ -622,6 +627,16 @@ pre {
   .table td.hide-sm {
     display: none;
   }
+
+  /* auto table layout hands every column a share of the slack in proportion to
+     how much wider it wants to be, so side-by-side badges keep claiming half a
+     phone's width and the name wraps beneath them. Stacking pins the status
+     column to its widest single badge — it wants nothing more, so the rest of
+     the row is the name's. */
+  .status-badges {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }
 
 .table-empty {