@andrian.yablonskyy/thub-coordinator 1.0.42 → 1.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andrian.yablonskyy/thub-coordinator",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "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

@@ -227,3 +227,111 @@
     animation: none;
   }
 }
+
+/* Mobile / tablet menu (below lg, where the navbar collapses; layout.pug).
+   It drops down over the page instead of pushing it down, scrolls inside
+   itself on short screens, and is laid out for thumbs: pages as a two-column
+   grid, the tools in one row, the account in the next. public/js/actions.js
+   closes it on a tap outside, Esc, or choosing a page. */
+.thub-nav-break {
+  display: none;
+}
+
+@media (max-width: 991.98px) {
+  .navbar .thub-nav {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1035;
+    max-height: calc(100dvh - 4rem);
+    overflow-y: auto;
+    padding: 0.75rem 1rem 1rem;
+    background: var(--bs-tertiary-bg);
+    border-bottom: 1px solid var(--bs-border-color);
+    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
+  }
+
+  .thub-nav-pages {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.375rem;
+    padding-bottom: 0.75rem;
+    border-bottom: 1px solid var(--bs-border-color);
+  }
+
+  .thub-nav-pages .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: 2.75rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--bs-border-radius);
+    background: var(--bs-body-bg);
+    border: 1px solid var(--bs-border-color-translucent);
+  }
+
+  .thub-nav-pages .nav-link.active {
+    background: var(--bs-primary-bg-subtle);
+    border-color: var(--bs-primary-border-subtle);
+    color: var(--bs-primary-text-emphasis);
+    font-weight: 500;
+  }
+
+  .thub-nav-tools {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 0.75rem;
+    padding-top: 0.75rem;
+  }
+
+  .thub-nav-tools > li {
+    margin: 0 !important;
+  }
+
+  /* Bigger tap targets for the icon buttons. */
+  .thub-nav-tools .btn-sm {
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+  }
+
+  /* The account row: the profile link takes the line, sign-out at its end. */
+  .thub-nav-break {
+    display: block;
+    flex-basis: 100%;
+    height: 0;
+  }
+
+  .thub-nav-account {
+    flex: 1 1 auto;
+    min-height: 2.5rem;
+  }
+}
+
+/* Phones: wide tables scroll sideways inside their own box instead of
+   running off the page, with one-line headers (wrapped headers of squeezed
+   columns used to make the header row very tall). The resource card's tab
+   row scrolls sideways too rather than wrapping onto several lines. */
+@media (max-width: 767.98px) {
+  main .table:not(.table-responsive .table) {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  main .table th {
+    white-space: nowrap;
+  }
+
+  .thub-resource-card .nav-tabs {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+
+  .thub-resource-card .nav-tabs .nav-link {
+    white-space: nowrap;
+  }
+}

package/public/js/actions.js

@@ -39,6 +39,29 @@
     }
   });
 
+  // The collapsed (mobile) menu drops down over the page (thub.css
+  // .thub-nav): close it on a tap outside, on Esc, and once a page in it is
+  // chosen — over the content, it shouldn't stay open in the way.
+  const nav = document.getElementById('nav'),
+    closeNav = () => {
+      if (nav?.classList.contains('show')){
+        window.bootstrap?.Collapse.getOrCreateInstance(nav, { toggle: false }).hide();
+      }
+    };
+  document.addEventListener('click', (e) => {
+    if (!nav?.classList.contains('show')){
+      return;
+    }
+    if (!e.target.closest('#nav, .navbar-toggler') || e.target.closest('#nav a[href]')){
+      closeNav();
+    }
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape'){
+      closeNav();
+    }
+  });
+
   // <form data-submit-busy>: disable its button and show a spinner while
   // the request runs (e.g. the navbar's check for updates).
   document.addEventListener('submit', (e) => {

package/public/js/tooltips.js

@@ -16,5 +16,10 @@
 // Delegated (one instance per element, created on first hover/focus), so
 // content swapped in by live updates (public/js/live.js) gets tooltips too.
 (function (){
+  // On touch screens a tap would open a tooltip and leave it stuck there
+  // (no hover to end it) — over the mobile menu, too: no tooltips there.
+  if (!window.matchMedia('(hover: hover)').matches){
+    return;
+  }
   new bootstrap.Tooltip(document.body, { selector: '[data-bs-toggle="tooltip"]' });
 })();

package/views/layout.pug

@@ -29,23 +29,18 @@ html(lang="en" data-bs-theme=(user && user.theme) || "auto")
               )= `v${updates.coordinatorUpdate} available`
         button.navbar-toggler(type="button" data-bs-toggle="collapse" data-bs-target="#nav")
           span.navbar-toggler-icon
-        #nav.collapse.navbar-collapse
-          ul.navbar-nav.me-auto
-            if user
-              li.nav-item
-                a.nav-link(href="/" class=active === 'overview' ? 'active' : '') Overview
-              li.nav-item
-                a.nav-link(href="/resources" class=active === 'resources' ? 'active' : '') Resources
+        #nav.collapse.navbar-collapse.thub-nav
+          //- Below lg the menu drops down over the page (thub.css .thub-nav,
+          //- closed by public/js/actions.js): pages as a two-column grid with
+          //- icons, then the tools in a row, then the account row.
+          - const pages = user ? [['/', 'overview', 'Overview', 'speedometer2'], ['/resources', 'resources', 'Resources', 'hdd-rack'], ['/groups', 'groups', 'Groups', 'collection'], ['/jobs', 'jobs', 'Jobs', 'list-task']].concat(user.role === 'admin' ? [['/admin/agents', 'agents', 'Agents', 'person-badge'], ['/admin/settings', 'settings', 'Settings', 'gear']] : []) : []
+          ul.navbar-nav.me-auto.thub-nav-pages
+            each pg in pages
               li.nav-item
-                a.nav-link(href="/groups" class=active === 'groups' ? 'active' : '') Groups
-              li.nav-item
-                a.nav-link(href="/jobs" class=active === 'jobs' ? 'active' : '') Jobs
-              if user.role === 'admin'
-                li.nav-item
-                  a.nav-link(href="/admin/agents" class=active === 'agents' ? 'active' : '') Agents
-                li.nav-item
-                  a.nav-link(href="/admin/settings" class=active === 'settings' ? 'active' : '') Settings
-          ul.navbar-nav
+                a.nav-link(href=pg[0] class=active === pg[1] ? 'active' : '' aria-current=active === pg[1] ? 'page' : false)
+                  i.bi.me-2.d-lg-none(class=`bi-${pg[3]}` aria-hidden="true")
+                  = pg[2]
+          ul.navbar-nav.thub-nav-tools
             if user && liveTopics
               //- Live-update status, driven by public/js/live.js.
               li.nav-item.d-flex.align-items-center.me-3
@@ -117,7 +112,8 @@ html(lang="en" data-bs-theme=(user && user.theme) || "auto")
               )
                 i.bi.bi-circle-half
             if user
-              li.nav-item.d-flex.align-items-center.me-3
+              li.thub-nav-break(aria-hidden="true")
+              li.nav-item.d-flex.align-items-center.me-3.thub-nav-account
                 a.nav-link.d-flex.align-items-center.p-0(
                   href="/profile"
                   data-bs-toggle="tooltip"
@@ -130,6 +126,7 @@ html(lang="en" data-bs-theme=(user && user.theme) || "auto")
                     span.rounded-circle.bg-secondary.text-white.d-inline-flex.align-items-center.justify-content-center.me-2(style="width: 24px; height: 24px; font-size: 12px;")
                       = ((user.firstName ? user.firstName[0] : user.username[0]) + (user.lastName ? user.lastName[0] : '')).toUpperCase()
                   span= user.firstName ? `${user.firstName} ${user.lastName || ''}`.trim() : user.username
+                  span.small.text-body-secondary.ms-2.d-lg-none= `${user.role} · profile`
               li.nav-item.d-flex.align-items-center
                 form(action="/logout" method="post")
                   button.btn.btn-sm.btn-outline-danger(