Improve display of projects details view and projects list view
dottorer opened this issue · comments
With #388 we are giving a status to projects and need to also improve the visualization.
- re-style its header to be closer to the task header and use 2 colors: light blue for normal and green for closed
- leverage this in a better list view for projects:
List view would show WG a project is in, number of open tasks and supplies and helpers (n out of m).
The current project icon really does not scream 'project' to me...
Updated spec for projects
Dashboard
- project dashboard header should be layouted like task/supply header (see above)
- colorize according to open/closed status (same colors as tasks/supplies)
- add new project icon
Project lists
- show overall numbers of required and helping users
- colorize project icon according to open/closed status (same colors as tasks/supplies)
- add new project icon
- show WG name only when in circle context (otherwise it's obvious)
- show number of tasks/supplies; but don't show "Supplies (0)" if there aren't any (same with tasks)
@phillipoertel Let's try this as a new icon for projects: http://cdn.onlinewebfonts.com/svg/img_446233.svg
It should be similar in appearance and scale ok.
@dottorer I implemented as requested and deployed to staging for review.
@phillipoertel Good start, here are a few notes after testing it:
- Task line item view is now skewed:
- Count for required total / assigned helpers should only look at open tasks (ignore closed tasks):
- Rework line item view a bit.
3.1 Icon should be overlaid to badge. Badge styled similar to tasks. Need to discuss if we can keep month display there, which is mostly visual appeal.
3.2 Counts for tasks and supplies should be using check icon (https://useiconic.com/icons/task/) and list open tasks / total tasks. This way the display is consistent in spacing and less cluttered.
3.3 Discuss if project colors are sufficient as blue / green.
Will do more testing, but also need to include translations...
Not trying to create scope creep, but maybe we can consider #330 in order to make a meaningful date range for the badge header. Thoughts?
Todos after sync this morning:
- Count for required total / assigned helpers should only look at open tasks (ignore closed tasks)
- line item & dashboard view: Icon should be overlaid to badge
- line item & dashboard view: calculate/add project moth to badge as discussed
- line item view: add counts for tasks + and supplies; use check icon
- project (and other) dashboards: add space before organizer name.
- Task line item view is skewed (user icons are stacked vertically)
- add ellipsis (…) to project title when it's longer than one line
- sort project list by months
- fix spacing after item comment / dot
@phillipoertel Looks nice! Only think i saw so far is that project list should be sorted by months in badge header asc. (Not alpha).
And maybe add a space between the dot and the "in workgroup".
@dottorer done as requested and reviewable on staging.
@phillipoertel Looks really slick now - great job. Only thing I am wondering in the overall projects list we display completed projects and not the toggling between open / closed projects like on the workgroup level. Is this intentional?
@phillipoertel looks perfect now! Closing - WDL.