Add device_type field, mobile-friendly improvements, and device filtering

- Device model: add device_type column (String 50, nullable) - Device add/edit: type select with presets + custom entry - Device detail: show type in info card; new Edit Device form - Device list: Type column + client-side filter bar (type + text search) - Mobile: card-style responsive tables on dashboard and device list, form-grid-2col collapse, larger tap targets, stacked form-actions, column picker viewport fix, filter bar full-width controls - Assign page: larger radio touch targets (min-height 44px) - 3 new acceptance tests for device_type (45 total)
2026-04-12 22:02:29 -05:00
parent b7e2d54bd2
commit 3bc897c1e5
11 changed files with 320 additions and 37 deletions
@@ -86,6 +86,83 @@
    .text-warning { color: #b45309; font-size: 0.8rem; }
    .text-danger  { color: #dc2626; }
    .text-muted   { color: #6b7280; font-size: 0.85rem; }
+
+    /* ─── Mobile responsive ─────────────────────────────────── */
+    @media (max-width: 640px) {
+
+      /* Tap targets */
+      .btn    { padding: 0.5rem 0.9rem; }
+      .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.825rem; }
+
+      /* Collapse 2-col form grids */
+      .form-grid-2col { grid-template-columns: 1fr !important; }
+
+      /* Card-style table rows */
+      .responsive-table thead { display: none; }
+      .responsive-table tr {
+        display: block;
+        border: 1px solid #e2e8f0;
+        border-radius: 6px;
+        margin-bottom: 0.75rem;
+        padding: 0.25rem 0;
+        background: #fff;
+      }
+      .responsive-table tr:hover td { background: transparent; }
+      .responsive-table td {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.4rem 0.75rem;
+        border-bottom: 1px solid #f1f5f9;
+        border-top: none;
+        font-size: 0.875rem;
+      }
+      .responsive-table td:last-child { border-bottom: none; }
+      .responsive-table td:empty { display: none; }
+      .responsive-table td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        color: #64748b;
+        font-size: 0.8rem;
+        flex-shrink: 0;
+        margin-right: 0.75rem;
+        white-space: nowrap;
+      }
+      /* Checkbox column: no label prefix, left-aligned */
+      .responsive-table td[data-label=""] {
+        justify-content: flex-start;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+      /* Actions column: allow wrapping, override nowrap */
+      .responsive-table td[data-label="Actions"] {
+        flex-wrap: wrap;
+        gap: 0.35rem;
+        white-space: normal !important;
+      }
+      .responsive-table td[data-label="Actions"] select {
+        width: 100%;
+        max-width: 100% !important;
+      }
+
+      /* Filter bar: full-width controls with larger tap targets */
+      #filter-bar select,
+      #filter-bar input[type=text] { flex: 1 1 100%; width: 100% !important; padding: 0.5rem 0.65rem !important; font-size: 0.9rem !important; }
+
+      /* Bulk toolbar: prevent text inputs overflowing */
+      #bulk-toolbar input[type=text] { width: 100% !important; }
+
+      /* Install grid on device_detail */
+      #install-grid { grid-template-columns: 1fr !important; max-width: 100% !important; }
+
+      /* Column picker: keep panel inside viewport */
+      #col-picker-panel { left: 0; right: auto !important; max-width: calc(100vw - 2rem); }
+
+      /* form-actions: stack buttons full-width */
+      .form-actions { flex-direction: column; align-items: stretch; }
+      .form-actions .btn,
+      .form-actions button { width: 100%; text-align: center; }
+    }
  </style>
 </head>
 <body>