openedx / openedx/frontend-app-authoring

Card draft tag alignment/color enhancement

Open
#2,033 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
17
Forks
218
Avg merge
9d 20h
Merged PRs (30d)
20

Description

Current Tentative design
Image Image

Spec

  1. The draft indicator color is #F4B57B and should be used as the background of badges intended to show draft status:

    • On cards
    • On draft child items for structural block full-page views (#1614 #1613 #1609)
  2. Draft status indicators on cards should appear in the same bottom metadata line as object type, and should only show the draft icon.

    • Additional information is shown in the tooltip, depending on draft status (never published, or unpublished changes are differentiated)
  3. Draft status indicators on list items in full-page structural block views should appear in the header row.

UX/UI To-dos

  • Initial design
  • Add never-published case
  • Document all list item cases and show clearly here

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the card views and the draft child-item views in structural block full-page views referenced by the issue and related issues #1614, #1613, and #1609. Compare the current indicators with the tentative design, then verify that card metadata, tooltips, and full-page header indicators cover the specified draft cases and color.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.