diff --git a/app/templates/inspections/view.html b/app/templates/inspections/view.html index fbfebd6..60b50f2 100644 --- a/app/templates/inspections/view.html +++ b/app/templates/inspections/view.html @@ -26,43 +26,55 @@ .meta-item .lbl { font-size:.72rem; color:#94a3b8; font-weight:500; text-transform:uppercase; letter-spacing:.04em; } .meta-item .val { font-size:.9rem; color:#0f172a; font-weight:500; margin-top:.1rem; } - /* Grid — 52px rows matches the form editor exactly */ + /* ── Grid: 12 cols × 36px rows, tight 3px gap ── */ .form-grid { - display:grid; grid-template-columns:repeat(12,72px); - grid-auto-rows:52px; gap:4px 8px; width:max-content; + display:grid; + grid-template-columns: repeat(12, 72px); + grid-auto-rows: 36px; + gap: 3px 8px; + width: max-content; + } + .fg-cell { + overflow:hidden; display:flex; flex-direction:column; + padding:.1rem .4rem; + } + .fg-cell .field-lbl { + font-size:.68rem; font-weight:600; color:#94a3b8; + display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; + flex-shrink:0; line-height:1.3; } - .fg-cell { overflow:hidden; display:flex; flex-direction:column; padding:.18rem .45rem; } - .fg-cell .field-lbl { font-size:.7rem; font-weight:500; color:#64748b; margin-bottom:.1rem; display:block; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fg-cell .field-val { font-size:.78rem; color:#0f172a; background:#f8fafc; border:1px solid #e2e8f0; border-radius:4px; - padding:.18rem .35rem; flex:1; min-height:0; + padding:.1rem .35rem; flex:1; min-height:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; + display:flex; align-items:center; } .fg-cell .field-val.empty { color:#94a3b8; font-style:italic; } - .section-divider { height:100%; display:flex; align-items:center; border-top:2px solid #e2e8f0; } - .section-divider strong { font-weight:700; color:#374151; font-size:.9rem; } - /* Rating — single line */ - .rating-line { display:flex; align-items:center; gap:.3rem; flex:1; min-height:0; } - .rating-stars-ro { color:#f59e0b; font-size:.95rem; letter-spacing:.03rem; line-height:1; white-space:nowrap; } - .rating-score { font-size:.72rem; color:#64748b; white-space:nowrap; } + /* Section heading — spans full width, single row */ + .section-head { + display:flex; align-items:flex-end; padding-bottom:.15rem; + border-bottom:2px solid #e2e8f0; height:100%; + } + .section-head strong { font-weight:700; color:#374151; font-size:.88rem; } + + /* Rating — inline stars */ + .rating-line { display:flex; align-items:center; gap:.28rem; flex:1; min-height:0; } + .rating-stars-ro { color:#f59e0b; font-size:.9rem; letter-spacing:.02rem; line-height:1; white-space:nowrap; } + .rating-score { font-size:.7rem; color:#64748b; white-space:nowrap; } /* View Photo / Signature button */ .btn-view-media { - display:inline-flex; align-items:center; gap:.25rem; - font-size:.7rem; padding:.15rem .48rem; border-radius:4px; + display:inline-flex; align-items:center; gap:.2rem; + font-size:.68rem; padding:.1rem .42rem; border-radius:4px; border:1px solid #cbd5e1; background:#f8fafc; color:#374151; - cursor:pointer; white-space:nowrap; flex-shrink:0; + cursor:pointer; white-space:nowrap; transition:border-color .12s, background .12s; } .btn-view-media:hover { border-color:#2563eb; background:#eff6ff; color:#2563eb; } - .tbl-view { width:100%; border-collapse:collapse; font-size:.76rem; } - .tbl-view th { background:#f1f5f9; font-weight:600; color:#374151; padding:.2rem .4rem; border:1px solid #e2e8f0; font-size:.73rem; } - .tbl-view td { border:1px solid #e2e8f0; padding:.15rem .4rem; color:#0f172a; } - - /* Photo / signature lightbox */ + /* Media lightbox */ .media-backdrop { display:none; position:fixed; inset:0; z-index:1055; background:rgba(0,0,0,.65); align-items:center; justify-content:center; @@ -82,6 +94,11 @@ .media-modal-close { border:none; background:none; font-size:1.1rem; color:#64748b; cursor:pointer; line-height:1; padding:0; } .media-modal-close:hover { color:#dc2626; } .media-modal img { display:block; max-width:100%; max-height:calc(90vh - 46px); object-fit:contain; } + + /* Issues */ + .tbl-view { width:100%; border-collapse:collapse; font-size:.76rem; } + .tbl-view th { background:#f1f5f9; font-weight:600; color:#374151; padding:.2rem .4rem; border:1px solid #e2e8f0; } + .tbl-view td { border:1px solid #e2e8f0; padding:.15rem .4rem; color:#0f172a; } {% endblock %} @@ -152,112 +169,211 @@ - {# Form field responses #} + {# ── Build the filtered field set ────────────────────────────────────── + Strategy: + 1. Find all grid rows that contain at least one rated rating field. + 2. Collect every field whose grid row overlaps a rated row. + 3. Also collect section fields that immediately precede a rated group. + 4. Re-number rows sequentially (1-based) so there are no gaps. + #} {% if form_fields %} -
| {{ hdr }} | {% endfor %}
|---|
| {{ row.get(hdr,'') }} | {% endfor %}
| {{ hdr }} | {% endfor %}
|---|
| {{ row.get(hdr,'') }} | {% endfor %}
No rated fields in this inspection.
+ {% endif %} {% else %}No form fields found for this template.
@@ -290,12 +406,12 @@ -{# Photo / Signature lightbox #} -