31 lines
1.9 KiB
Markdown
31 lines
1.9 KiB
Markdown
# Blog post layout spec
|
|
|
|
This document defines the shared layout and spacing for the blog post detail screen so that the **blog-editor mobile preview** and the **Android app** (BlogDetailScreen) match exactly.
|
|
|
|
## Values (single source of truth)
|
|
|
|
| Element | Web (Tailwind) | Android (Compose) | Notes |
|
|
|--------|----------------|-------------------|--------|
|
|
| Screen horizontal padding | `px-4` (16px) | `16.dp` | Gutter for title, date, divider, body |
|
|
| Header block vertical padding | `py-6` (24px) | `24.dp` | Top and bottom of header block |
|
|
| Gap between title and date | `mb-3` (12px) | `12.dp` | |
|
|
| Divider | Full width, `px-4` inset | `padding(horizontal = 16.dp)` | |
|
|
| Gap between divider and content | `pt-6` (24px) | `24.dp` | |
|
|
| Content block vertical padding | 0 top, 0 bottom | None | Only horizontal padding on content |
|
|
| Paragraph / block spacing | `mb-3` (12px) | `12.dp` | Between paragraphs and after blocks |
|
|
| Image block vertical margin | `my-2` (8px) | `8.dp` | Top and bottom of image |
|
|
| Image caption gap | `mt-1` (4px) | `4.dp` | Above caption text |
|
|
| Bottom padding (scroll) | `h-8` (32px) | `32.dp` | |
|
|
| TopAppBar | `px-4 py-3` | Material TopAppBar | Back + "Blog Post" |
|
|
|
|
## Image caption
|
|
|
|
- Only show caption when `title` is present and **not** the literal string `"null"` (case-insensitive). Both Web and Android must hide caption when title is null, blank, or `"null"` to avoid showing "null" on screen.
|
|
|
|
## Where this is used
|
|
|
|
- **blog-editor frontend**: [MobilePreview.jsx](../frontend/src/components/MobilePreview.jsx), [TipTapContentRenderer.jsx](../frontend/src/components/TipTapContentRenderer.jsx)
|
|
- **Android app**: [BlogDetailScreen.kt](../../android-app/app/src/main/java/com/livingai/android/ui/screens/BlogDetailScreen.kt), [TipTapContentRenderer.kt](../../android-app/app/src/main/java/com/livingai/android/ui/components/TipTapContentRenderer.kt)
|
|
|
|
When changing layout or spacing, update both codebases and this spec.
|