92 lines
3.5 KiB
Markdown
92 lines
3.5 KiB
Markdown
# Portal Mockup Responsive Design Conventions
|
|
|
|
## Table column visibility breakpoints
|
|
|
|
Use Tailwind responsive classes to hide columns on smaller screens. Convention:
|
|
|
|
| Column category | Phone (<640px) | Tablet (640-1024) | Desktop (1024+) |
|
|
|---|---|---|---|
|
|
| Domain / Name / Router | `col-span-2` | `col-span-1` | `col-span-1` |
|
|
| Status / Badge | `hidden sm:block` / `hidden sm:inline` | visible | visible |
|
|
| Customer | `hidden sm:table-cell` | visible | visible |
|
|
| Expires / Plan / Model | `hidden md:table-cell` | `hidden` on phone | visible |
|
|
| Records / Uptime / Days | `hidden lg:table-cell` | `hidden` on phone and tablet | visible |
|
|
| Latency / Installed / TTL | `hidden xl:table-cell` | `hidden` on phone, tablet, small desktop | visible |
|
|
| Actions | always visible | always visible | always visible |
|
|
|
|
## Card layout responsiveness
|
|
|
|
- Summary cards: `grid-cols-2 sm:grid-cols-4` (2 on phone, 4 on desktop)
|
|
- Side-by-side content panes: `grid-cols-1 sm:grid-cols-2` (stack on phone, side by side on tablet+)
|
|
- Three-column bottom sections: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
|
|
|
|
## Padding and spacing
|
|
|
|
- Cards: `p-3 sm:p-4 md:p-5`
|
|
- Card padding with border: `p-3 sm:p-4 md:p-6`
|
|
- Table cells: `px-3 sm:px-4 md:px-5 py-2 sm:py-3`
|
|
- Table header cells: `px-3 sm:px-4 md:px-5 py-2 sm:py-2.5`
|
|
- Grid gaps: `gap-1 sm:gap-3 md:gap-4`
|
|
- Header: `px-2 sm:px-4 md:px-6 py-2 sm:py-3`
|
|
|
|
## Font sizes
|
|
|
|
- Summary values: `text-base sm:text-xl md:text-2xl font-bold`
|
|
- Section titles: `text-lg md:text-xl font-bold`
|
|
- Subtitle: `text-xs sm:text-sm`
|
|
- Table text: `text-sm` (stays readable on all)
|
|
- Tab text: `text-xs md:text-sm`
|
|
|
|
## Navigation bar
|
|
|
|
- Gap: `gap-1 sm:gap-3 md:gap-5`
|
|
- Hide non-critical nav items: `hidden md:inline` on items that aren't the primary focus
|
|
- Tab overflow: `overflow-x-auto` on the tab bar, `whitespace-nowrap` on tab items
|
|
|
|
## Header (device detail pages)
|
|
|
|
- Use `flex-col md:flex-row md:items-center justify-between gap-2`
|
|
- Quick action selects stack below title on phone
|
|
|
|
## DNS query table (6 columns)
|
|
|
|
On mobile: only Domain column visible (col-span-2). Time, Client, Type, Response, Client Hostname all hidden with `hidden sm:block` or `hidden md:block` or `hidden lg:block`. Table remains horizontally scrollable if needed, but typically the column reduction is enough.
|
|
|
|
## Table wrapping
|
|
|
|
Always wrap responsive tables in `<div class="table-wrap" style="overflow-x:auto;-webkit-overflow-scrolling:touch;">` for horizontal scroll on small devices.
|
|
|
|
## Breakpoint cheat sheet
|
|
|
|
- `sm:` = 640px+ (landscape phone, portrait tablet)
|
|
- `md:` = 768px+ (tablet landscape, small desktop)
|
|
- `lg:` = 1024px+ (desktop)
|
|
- `xl:` = 1280px+ (wide desktop)
|
|
|
|
## Common pattern for a responsive table
|
|
|
|
```html
|
|
<div class="table-wrap">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="...">
|
|
<th class="px-3 sm:px-4 md:px-5 py-2.5">Column A</th>
|
|
<th class="px-2 py-2.5 hidden sm:table-cell">Column B</th>
|
|
<th class="px-2 py-2.5 hidden md:table-cell">Column C</th>
|
|
<th class="px-2 py-2.5 hidden lg:table-cell">Column D</th>
|
|
<th class="px-3 sm:px-4 md:px-5 py-2.5 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="...">
|
|
<td class="px-3 sm:px-4 md:px-5 py-3">Value A</td>
|
|
<td class="px-2 py-3 hidden sm:table-cell">Value B</td>
|
|
<td class="px-2 py-3 hidden md:table-cell">Value C</td>
|
|
<td class="px-2 py-3 hidden lg:table-cell">Value D</td>
|
|
<td class="px-3 sm:px-4 md:px-5 py-3 text-right"><button>Edit</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
```
|