@andrian.yablonskyy/thub-coordinator 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andrian.yablonskyy/thub-coordinator",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "TestHub Coordinator — job queue, resource registry, scheduler, heartbeat monitor, log/artifact store and web dashboard",
   "main": "src/server.js",
   "engines": {

package/public/css/thub.css

@@ -93,8 +93,9 @@
    keeps their height (and still takes them out of the tab order and of what
    screen readers read). The device tabs sit inside their shared
    <form>/<fieldset> (one Save for all of them), so that fieldset stacks its
-   panes the same way. The USB tab's output scrolls in its own box (360 px),
-   so a long lsusb doesn't make every tab that tall. */
+   panes the same way. The USB tab's output fills that height and scrolls
+   inside it (.thub-usb-pane below), so a long lsusb doesn't make every tab
+   that tall. */
 .thub-resource-card .tab-content,
 .thub-resource-card .tab-content > form > fieldset {
   display: grid;
@@ -111,8 +112,40 @@
   visibility: hidden;
 }
 
+/* Stacked, the device tabs' <form>/<fieldset> (not hidden themselves) lie
+   over the other panes: only the visible pane takes the mouse, or they'd
+   swallow every hover and click on the Details tab's buttons. */
+.thub-resource-card .tab-content > form,
+.thub-resource-card .tab-content > form > fieldset,
+.thub-resource-card .tab-content .tab-pane {
+  pointer-events: none;
+}
+
 .thub-resource-card .tab-content .tab-pane.active {
   visibility: visible;
+  pointer-events: auto;
+}
+
+/* Connected USB devices: the lsusb output takes the rest of the modal's
+   height — what the tallest other tab sets, at least 12rem — and scrolls in
+   it. Its 0 basis keeps it from making the modal taller. */
+.thub-resource-card .tab-content .tab-pane.thub-usb-pane {
+  display: flex;
+  flex-direction: column;
+}
+
+.thub-usb-pane > [data-usb-scan] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.thub-usb-pane [data-usb-output] {
+  flex: 1 1 0;
+  height: 0;
+  min-height: 12rem;
+  overflow: auto;
 }
 
 /* Help page (views/help/): sticky table of contents, code blocks with a

package/test/groups-tab.test.js

@@ -198,3 +198,10 @@ test('Import and Export work for a Client that doesn\'t re-register (no joinKey)
     method: 'POST', headers: { authorization: `Bearer ${other.resourceToken}`, 'content-type': 'application/json' }, body: '{}'
   })).status, 403);
 });
+
+test('resource card CSS: stacked tabs let only the visible one take the mouse (else the device tabs\' form covers Details)', () => {
+  const css = fs.readFileSync(path.join(__dirname, '../public/css/thub.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, ''),
+    off = css.slice(css.indexOf('.thub-resource-card .tab-content > form,'));
+  assert.match(off, /^[^{]*> form > fieldset,[^{]*\.tab-pane \{\s*pointer-events: none;/);
+  assert.match(css, /\.thub-resource-card \.tab-content \.tab-pane\.active \{[^}]*pointer-events: auto;/);
+});

package/views/mixins/resource.pug

@@ -327,7 +327,7 @@ mixin resourceCard(r, groupsById, returnTo)
             .tab-pane.fade.show.active(id=`rc-${r.id}-details` role="tabpanel" aria-labelledby=`rc-${r.id}-details-tab` tabindex="0" data-live=`rc-details-${r.id}`)
               +resourceDetails(r, groupsById, returnTo, local, external)
             +configPanes(r, returnTo, groupsById)
-            .tab-pane.fade(id=`rc-${r.id}-usb` role="tabpanel" aria-labelledby=`rc-${r.id}-usb-tab` tabindex="0")
+            .tab-pane.fade.thub-usb-pane(id=`rc-${r.id}-usb` role="tabpanel" aria-labelledby=`rc-${r.id}-usb-tab` tabindex="0")
               +usbScanPane(r)
 
 //- "Connected USB devices" (resource card tab): the Client's `lsusb`, run
@@ -364,7 +364,8 @@ mixin usbScanPane(r)
         else
           | Not scanned yet#{can.operate ? ' — press Refresh to run lsusb -tvv on the Client' : ''}.
     .alert.alert-danger.py-2.small(data-usb-error class=scan && scan.error ? null : 'd-none')= scan && scan.error || ''
-    pre.bg-body-tertiary.p-2.rounded.small.mb-0(data-usb-output style="max-height: 360px; overflow: auto;" class=scan && scan.output ? null : 'd-none')= scan && scan.output || ''
+    //- Fills the rest of the tab and scrolls inside (thub.css .thub-usb-pane).
+    pre.bg-body-tertiary.p-2.rounded.small.mb-0(data-usb-output class=scan && scan.output ? null : 'd-none')= scan && scan.output || ''
 
 //- Reboot the Client's host now (card's Actions row, icon only): confirmed first — naming the
 //- job that gets canceled, if one is running — then sent with the Client's