ray
47 lines
2.5 KiB
Markdown
47 lines
2.5 KiB
Markdown
# ShopProQuote PDF Styling Guidelines
|
|
|
|
PDFs are generated client-side by `quote-tab-manager.js` → `generateQuotePDF()` using jsPDF (dynamically imported from CDN).
|
|
|
|
## User's aesthetic preferences
|
|
|
|
- **Compact and tight** — no wasted whitespace, no large gaps between labels and values
|
|
- **Professional** — clean invoice-style with subtle gray background panels, thin separators, no colons on labels
|
|
- **Font sizes**: 8-10px range. 8px for labels/section headers, 9px for body text, 10px for bold totals
|
|
- **Spacing**: 6-8px between lines, tight but readable
|
|
- **Boxes**: subtle `#f8f8f8` fill with `#dcdcdc` border at 0.5px, 2-3px corner radius
|
|
- **Separators**: 0.5px `#c8c8c8` (not thick black lines)
|
|
- **Labels**: no colons, gray (#646464) for field labels, black for values
|
|
|
|
## Key rendering sections in `generateQuotePDF()`
|
|
|
|
### Header box (~line 3765)
|
|
- Two-column: SERVICE PROVIDER (left) + CUSTOMER INFORMATION (right)
|
|
- Fill is drawn FIRST (`roundedRect` with `'F'` only) before text, so text renders on top
|
|
- Border drawn AFTER content (`roundedRect` with `'D'` only) at computed height
|
|
- `headerBoxPadding` controls top+bottom padding consistently
|
|
|
|
### Customer info lines (~line 3841)
|
|
- `addInfoLine()` helper — label at `rightColX`, value at `rightColX + 55` (compact, not full-width)
|
|
- Labels: Customer, Vehicle, RO #, Mileage, VIN, Date
|
|
|
|
### Service items (~line 3917)
|
|
- Service name: 10px bold at line 3994
|
|
- Price: right-aligned, same line
|
|
- Customer decision badges (approved/declined) above service name
|
|
- Priority, recommendation, explanation, parts notes follow
|
|
|
|
### Totals box (~line 4172)
|
|
- Summary box at 45% width from right margin
|
|
- Fill `#f8f8f8`, border `#dcdcdc` at 0.5px
|
|
- Line items: 9px, gray labels, black values, 8px row spacing
|
|
- TOTAL: 10px bold
|
|
- Shop charge note positioned at `boxBottomY + 10` (below box boundary, never overlapping)
|
|
|
|
## Pitfalls
|
|
|
|
- **Box covering text**: draw fill-only (`'F'`) BEFORE text; draw border-only (`'D'`) after content height is known
|
|
- **Overlapping sections**: use `boxBottomY` from the box calculation, not `yPos + N` magic numbers
|
|
- **Invisible borders**: `#fafafa` fill with `#e6e6e6` border at 0.5px is imperceptible — use `#f8f8f8` fill with `#dcdcdc` border for visible contrast
|
|
- **Excessive whitespace between label/value**: don't right-align values to `pageWidth - margin` — use a fixed offset from the label instead (`rightColX + 55`)
|
|
- **Font size consistency**: keep body text at 9px, labels at 8px, totals at 10px throughout
|