chore: 2 big design passes to harmonize and fix stuff
This commit is contained in:
1 parent
67b3ff03d0
commit
5e05b606a7
43 files changed
+2167
-4183
No files matched your search
@@ -1,71 +1,25 @@
|
||||
# New article
|
||||
|
||||
- **Route:** `modal from anywhere · /article/new`
|
||||
- **API:** POST /v1/article/
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "New article" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
Route: `modal from anywhere · /article/new`. API: POST /v1/article/.
|
||||
|
||||
Recommendation: a modal. It needs two fields, and keeping the page underneath means cancelling costs nothing. /article/new opens the same modal over the article list, so it can be linked to and the back button closes it. A successful create always makes a draft and goes to the editor.
|
||||
Recommendation: a modal. Title is the only field. The body is not asked for here; it is written in the editor, which opens straight after. Keeping the page underneath means cancelling costs nothing. /article/new opens the same modal over the article list, so it can be linked to and the back button closes it. A successful create always makes a draft and goes to the editor.
|
||||
|
||||
## States
|
||||
Visual reference: `RenewCMS Screens Back-office.dc.html`, groups "New article". Frames: `AppFrame.dc.html` (shell, sidebar, topbar, drawer) plus the screen frame where listed in components.md.
|
||||
|
||||
### Default
|
||||
## Copy per state (generated from the board source, pass 2)
|
||||
|
||||
**Trigger:** "New article" from Home, Articles or the empty state.
|
||||
Every state below is drawn in light and dark (theme switch on the board), at 1440×900 and 390×844 (both frames sit side by side). Board: `RenewCMS Screens Back-office.dc.html`. Copy is exact; where a cell is empty the state reuses the fixed copy.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: placeholder "e.g. Choosing tiles for a small bathroom"; focused; counter "0 / 200"; help "3 to 200 characters."
|
||||
- field `First paragraph`: placeholder "Start writing. You'll continue in the editor."; textarea; help "You can format it and add images in the editor."
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
### New article (group "New article", 5 states)
|
||||
|
||||
### Validation
|
||||
Route: `modal from anywhere · /article/new`. API: POST /v1/article/.
|
||||
|
||||
**Trigger:** On submit or blur. Nothing is sent.
|
||||
Recommendation: a modal. Title is the only field. The body is not asked for here; it is written in the editor, which opens straight after. Keeping the page underneath means cancelling costs nothing. /article/new opens the same modal over the article list, so it can be linked to and the back button closes it. A successful create always makes a draft and goes to the editor.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Ti"; counter "2 / 200" in error; **error "Use at least 3 characters."**
|
||||
- field `First paragraph`: textarea; **error "Add a first paragraph. It can be a single sentence."**
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
|
||||
### Submitting
|
||||
|
||||
**Trigger:** Request in flight. Fields are disabled and the dialog can't be dismissed.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"
|
||||
- field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
|
||||
- cancel "Cancel"
|
||||
- confirm "Creating…", loading, not dismissible
|
||||
|
||||
### Title rejected (400)
|
||||
|
||||
**Trigger:** A server 400 that got past the browser checks. The raw error isn't shown.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"; **error "Check this title and try again."**
|
||||
- field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
|
||||
- Alert: "Something in the form isn't valid. Check the highlighted fields."
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
|
||||
### Error
|
||||
|
||||
**Trigger:** 500 or network failure.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"
|
||||
- field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
|
||||
- Alert: "Couldn't create the article. Your text is still here. Try again in a moment."
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
| # | State | Trigger | Copy |
|
||||
|---|---|---|---|
|
||||
| 1 | Default | "New article" from Home, Articles or the empty state. | |
|
||||
| 2 | Validation | On submit or blur. Nothing is sent. | "Use at least 3 characters." |
|
||||
| 3 | Submitting | Request in flight. Fields are disabled and the dialog can't be dismissed. | "Creating…" / "Choosing tiles for a small bathroom" / "Small rooms show every grout line, so we start with the floor." |
|
||||
| 4 | Title rejected (400) | A server 400 that got past the browser checks. The raw error isn't shown. | "Something in the form isn't valid. Check the highlighted fields." / "Choosing tiles for a small bathroom" / "Small rooms show every grout line, so we start with the floor." / "Check this title and try again." |
|
||||
| 5 | Error | 500 or network failure. | "Couldn't create the article. Your text is still here. Try again in a moment." / "Choosing tiles for a small bathroom" / "Small rooms show every grout line, so we start with the floor." |
|
||||
Reference in new issue
Block a user