, just with .table-compact-
mobile's smaller fonts/padding so it's less cramped, scrolling
horizontally if it still doesn't quite fit.
- Cards (.cards-active, toggled by JS): each row becomes a compact
card — a 2-column grid of label/value pairs (not one long
vertical list) so a record reads in less vertical space, with its
first column (the row's own identifier — JC No, Date, etc.) as a
bold full-width heading at the top of the card and its actions
(Edit/Print/Delete/Generate Bill/...) as a full-width button row
at the bottom.
Every | needs a matching data-label="..." attribute (its column
header's text) for the label line shown above its value in Cards
mode. Service section only for now — Inventory's own transaction
tables aren't touched here. */
@media (max-width: 767.98px) {
.table-mobile-cards.cards-active thead {
display: none;
}
.table-mobile-cards.cards-active,
.table-mobile-cards.cards-active tbody {
display: block;
width: 100%;
}
.table-mobile-cards.cards-active tbody tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem 0.6rem;
margin-bottom: 0.6rem;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 0.55rem 0.7rem;
background: #fff;
}
.table-mobile-cards.cards-active td {
display: block;
border: none !important;
padding: 0 !important;
text-align: left !important;
font-size: 0.72rem;
}
.table-mobile-cards.cards-active td[data-label]::before {
content: attr(data-label);
display: block;
font-weight: 600;
color: #6c757d;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* The row's own identifying column (always listed first) reads as a
bold full-width heading across the top of the card instead of just
another grid cell. */
.table-mobile-cards.cards-active td:first-child {
grid-column: 1 / -1;
font-size: 0.85rem;
font-weight: 700;
padding-bottom: 0.35rem !important;
margin-bottom: 0.15rem;
border-bottom: 1px solid #eee !important;
}
/* Row-level action buttons (Edit/Print/Delete/Generate Bill, etc.) get
the full card width as a wrapped button row at the bottom. */
.table-mobile-cards.cards-active td.table-mobile-actions {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
padding-top: 0.4rem !important;
}
.table-mobile-cards.cards-active tfoot {
display: block;
}
/* Same 2-column grid as the body rows (not a tall single-column
stack) — the "Total" cell (always first; colspan is meaningless
once grid layout takes over from the table model, so it's spanned
explicitly instead) reads as a full-width heading, and
Billed/Discount/Paid/Pending land two-per-line beneath it. */
.table-mobile-cards.cards-active tfoot tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.25rem 0.6rem;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 6px;
padding: 0.55rem 0.75rem;
margin-top: 0.25rem;
}
.table-mobile-cards.cards-active tfoot td,
.table-mobile-cards.cards-active tfoot th {
display: block;
border: none !important;
text-align: left !important;
padding: 0.15rem 0 !important;
}
.table-mobile-cards.cards-active tfoot tr > :first-child {
grid-column: 1 / -1;
font-size: 0.8rem;
}
.table-mobile-cards.cards-active tfoot td:empty,
.table-mobile-cards.cards-active tfoot th:empty {
display: none;
}
/* Totals row cells (Billed/Discount/Paid/Pending) otherwise show up as
bare numbers with nothing saying what they are — same data-label
convention and label styling as the body rows above. */
.table-mobile-cards.cards-active tfoot td[data-label]::before,
.table-mobile-cards.cards-active tfoot th[data-label]::before {
content: attr(data-label);
display: block;
font-weight: 600;
color: #6c757d;
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.02em;
}
}
/* Table/Cards toggle button itself — small, mobile-only (each report
view also adds d-md-none to it directly), active state highlighted
the same way Bootstrap's own .active button state looks. */
.view-mode-toggle .btn.active {
background-color: #0d6efd;
color: #fff;
border-color: #0d6efd;
}
/* Compact mobile sizing for the Job Card entry screen's Parts/Labour/
Payments tables (views/job-cards/form.ejs) — plain table markup (not
stacked cards), just shrunk down (fonts, cell padding, input widths)
so the columns fit a phone screen with little to no horizontal
scrolling, rather than restructuring the layout itself. Overrides the
blanket `table input.form-control, table select.form-select { min-
width: 100px; }` rule above via higher selector specificity (two
classes beat one class + two type selectors), not !important. */
/* Parts/Labour item-entry column widths — set via classes (rather than
the inline width="..." these used to carry) so the mobile media query
below can shrink them without fighting inline-style specificity.
Description carries no width at all, so under normal table auto-
layout it simply absorbs whatever width the other columns don't
need — the narrower these get on a phone, the more room Description
gets. */
.col-item-check {
width: 34px;
}
.col-item-qty {
width: 90px;
}
.col-item-price,
.col-item-amount {
width: 110px;
}
.col-item-actions {
width: 90px;
}
@media (max-width: 767.98px) {
.table-compact-mobile {
font-size: 0.72rem;
}
.table-compact-mobile th,
.table-compact-mobile td {
padding: 0.25rem 0.3rem;
}
.table-compact-mobile .form-control,
.table-compact-mobile .form-select {
font-size: 0.72rem;
padding: 0.2rem 0.35rem;
min-width: 0;
}
.table-compact-mobile .col-item-check {
width: 20px;
}
.table-compact-mobile .col-item-qty {
width: 42px;
}
.table-compact-mobile .col-item-price,
.table-compact-mobile .col-item-amount {
width: 52px;
}
.table-compact-mobile .col-item-actions {
width: 56px;
}
.table-compact-mobile .btn-sm {
font-size: 0.68rem;
padding: 0.15rem 0.35rem;
}
.table-compact-mobile .form-check-input {
width: 0.9em;
height: 0.9em;
}
/* Report Date columns show "dd-mm-yyyy hh:mm" — at compact mobile
width/font that string has enough hyphens and spaces for the
browser to wrap it across up to 5 lines. Forcing the date and time
halves onto their own line each (via display: block, with
white-space: nowrap so neither half itself re-wraps) caps it at
exactly 2 lines. Desktop is untouched — outside this media query
the two spans just sit inline with a space between, reading exactly
as before. */
.table-compact-mobile .report-date,
.table-compact-mobile .report-time {
display: block;
white-space: nowrap;
}
}
/* Number entry boxes (Qty, Unit Price, Discount, MRP, every rate field,
etc.) — the browser's native up/down spinner arrows take up space and
aren't useful for typed entry, so they're hidden app-wide. Typing and
the Tab/Enter-driven entry flow (see job-cards/form.ejs) both still
work exactly the same; this only removes the little arrow buttons. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* Home page "Reports" / "Registers" button lists — a lot of buttons with
some long labels ("Job Card Billing", "Payment Type Statement",
"Supplier Statement") crowd a phone screen at full desktop button
size; shrink font/padding on mobile only. */
@media (max-width: 767.98px) {
.home-links-compact-mobile .btn {
font-size: 0.72rem;
padding: 0.3rem 0.55rem;
}
}
/* Home page's colored stat boxes (Job Status / Today / Invoices —
views/home.ejs's statBox() helper). Desktop already lays these out
4-across and 3-across (views/home.ejs's row-cols-4 / row-cols-3), but
at full size on a phone that meant only 2 fit per row, so a 3- or
4-box strip turned into 2 tall rows. Shrinking the icon/number/label
here lets the SAME row-cols count (set directly in the markup now,
not just at the md breakpoint) actually fit on one line on mobile too
— same idea as .table-compact-mobile elsewhere: more columns, smaller
text, shorter page. Base rule keeps the label at the same 0.7rem it
was always inline-styled to on desktop; only the media query below
shrinks it further. */
.home-stat-label {
font-size: 0.7rem;
}
@media (max-width: 767.98px) {
.home-stat-box .card-body {
padding: 0.35rem 0.15rem;
}
.home-stat-box .bi {
font-size: 0.8rem;
}
.home-stat-box .home-stat-value {
font-size: 0.8rem !important;
}
.home-stat-box .home-stat-label {
font-size: 0.58rem !important;
}
}
/* Report pages' colored summary cards (Opening/Closing Balance, Total
In/Out, Billed/Paid/Pending, etc. — near the top of most reports in
views/reports/*.ejs). Same idea as .home-stat-* just above: the
4-card reports now pack col-3 col-md-* (4-across, one more per row
than the previous col-4 pass) and the 3-card reports stay col-4
col-md-* (already one row), so this shrinks the number/label text
further to match the tighter boxes. A printed page (e.g. A4 portrait)
renders narrower than the 768px md breakpoint too, so the SAME rule
set below covers both "mobile view" and "print" at once — that's why
the media query lists both. */
.report-stat-label {
font-size: 0.75rem;
}
@media (max-width: 767.98px), print {
.report-stat-box .card-body {
padding: 0.2rem 0.1rem;
}
.report-stat-box .report-stat-value {
font-size: 0.7rem !important;
}
.report-stat-box .report-stat-label {
font-size: 0.5rem !important;
line-height: 1.1;
}
}
|