chore: update .gitignore and improve coding standards documentation
- Added .cursor/sessions/* to .gitignore to prevent session files from being tracked. - Enhanced coding standards in SKILL.md by adding semicolons to TypeScript examples for consistency. - Improved formatting in continuous learning, detail layout, and other SKILL.md files for better readability. These changes aim to streamline development processes and maintain code quality across the project.
This commit is contained in:
shancheas
@@ -32,11 +32,11 @@ Optional **identity / hero** (§3) is an extra content block when the entity ben
|
||||
|
||||
Look at **how many distinct data categories** the entity has — that decides stacked vs tabbed body:
|
||||
|
||||
| Detail type | Body mode |
|
||||
| --- | --- |
|
||||
| Few categories (≤3–4 section cards; e.g. Branch, User, simple master data) | **Stacked sections** — vertical stack of section cards under the header |
|
||||
| Detail type | Body mode |
|
||||
| ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| Few categories (≤3–4 section cards; e.g. Branch, User, simple master data) | **Stacked sections** — vertical stack of section cards under the header |
|
||||
| Many categories (>3–4 distinct groups) **or** the user explicitly asks for tabs | **Tabbed body** — keep a slim always-visible top (identity / summary / stepper), then a horizontal tab bar; each tab owns one category's content |
|
||||
| Narrow / mobile viewport | Same mode as desktop; only the **internal** key-value and status layouts collapse (§13) |
|
||||
| Narrow / mobile viewport | Same mode as desktop; only the **internal** key-value and status layouts collapse (§13) |
|
||||
|
||||
Once a page picks stacked vs tabbed, stay consistent — don't mix an ad-hoc tab region with an ad-hoc long scroll of the same categories.
|
||||
|
||||
@@ -67,8 +67,8 @@ Use when the entity has a meaningful visual (device photo, avatar, logo). Skip f
|
||||
|
||||
Single horizontal row inside one section surface:
|
||||
|
||||
| Left | Middle (flex grow) | Right |
|
||||
| --- | --- | --- |
|
||||
| Left | Middle (flex grow) | Right |
|
||||
| ----------------------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
|
||||
| Leading media (fixed square/circle) | Title stack: primary name (+ id if not already in chrome), then one short subtitle/category line | Primary content action if it belongs to this block (usually omit — Edit lives in module chrome) |
|
||||
|
||||
- Media left-aligned; title stack left-aligned next to media; any block-level action right-aligned on the same row.
|
||||
@@ -203,25 +203,25 @@ Horizontal gaps inside grids match the medium rhythm. Don't invent a fourth gap
|
||||
|
||||
## 13. Responsive collapse
|
||||
|
||||
| Wide layout | Narrow collapse |
|
||||
| --- | --- |
|
||||
| Identity hero row (media \| title \| action) | Centered vertical stack (media → title → subtitle → full-width action) |
|
||||
| Key-value label-above grid (§5A) | Label-left / value-right rows (§5B) |
|
||||
| Status metric horizontal row (§6) | Stacked metric sub-blocks; badge beside value |
|
||||
| Summary 2–3 columns (§7) | Stacked column groups, same order |
|
||||
| Tab list | Horizontally scrollable tab list; panels still one-at-a-time |
|
||||
| Table | Horizontal scroll inside the section **or** stacked label/value per row — pick one strategy per table type and keep it project-wide |
|
||||
| Wide layout | Narrow collapse |
|
||||
| -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Identity hero row (media \| title \| action) | Centered vertical stack (media → title → subtitle → full-width action) |
|
||||
| Key-value label-above grid (§5A) | Label-left / value-right rows (§5B) |
|
||||
| Status metric horizontal row (§6) | Stacked metric sub-blocks; badge beside value |
|
||||
| Summary 2–3 columns (§7) | Stacked column groups, same order |
|
||||
| Tab list | Horizontally scrollable tab list; panels still one-at-a-time |
|
||||
| Table | Horizontal scroll inside the section **or** stacked label/value per row — pick one strategy per table type and keep it project-wide |
|
||||
|
||||
Never re-pair fields into different logical groups on collapse — only column count / orientation changes.
|
||||
|
||||
## 14. Action placement (position only)
|
||||
|
||||
| Action scope | Position |
|
||||
| --- | --- |
|
||||
| Global entity actions (Edit, Delete, Activate, …) | Module header actions via `EnterpriseDetailPageProvider` — top-right of chrome |
|
||||
| Section-scoped action (Upload, Add record) | Right side of that section's header band (§4 / §11) |
|
||||
| Section filters | Right side of the table/section header, before or beside the section primary action |
|
||||
| Row action | Trailing column of that row only |
|
||||
| Action scope | Position |
|
||||
| ------------------------------------------------- | ----------------------------------------------------------------------------------- |
|
||||
| Global entity actions (Edit, Delete, Activate, …) | Module header actions via `EnterpriseDetailPageProvider` — top-right of chrome |
|
||||
| Section-scoped action (Upload, Add record) | Right side of that section's header band (§4 / §11) |
|
||||
| Section filters | Right side of the table/section header, before or beside the section primary action |
|
||||
| Row action | Trailing column of that row only |
|
||||
|
||||
Do not duplicate Edit in the body if the provider already exposes it, unless a mobile identity block needs a full-width local affordance (§3 narrow).
|
||||
|
||||
|
||||
Reference in New Issue
Block a user