CanJS GitHub example app design

[chasenlehara]

Design a UI for an app that:

• Has a form for creating a new issue (at least the title and description)
• Shows a list of GitHub issues (at least the title and first line of the description)
• Has controls for reordering the list of issues via drag & drop

I think the list will automatically save, so a separate save button isn’t required.

[chasenlehara]

Here’s a starter JS Bin: http://jsbin.com/safigic/11/edit?html,output

It uses Bootstrap right now, but it doesn’t have to. The verbiage is flexible too; we can give it a different title or rename the “Submit new issue” button to something shorter. It also doesn’t have any controls for reordering, so those need to be added.

[jamiemccue]

@chasenlehara

Notes:

• on hover the row sort icon appears, you can then drag and drop the row
• after dropping the row the background color flashes a light green confirming the new drop location (optional)
• the read more/less link is simple as it seemed unnecessary to add excessive ui
• the horizontal form inputs is super clean. could be a concern for adding a long description. let me know if you want me to mockup a form layout
• i'd be happy to discuss this version to make any improvements
• I added a row ID but you may not want them

[chasenlehara]

This looks great, thank you! The only thing I would change is turning the description into a longer-form textarea for (potentially) multi-line input.

[jamiemccue]

@chasenlehara Thanks for the feedback. Here are a couple versions with a larger textarea:

[jamiemccue]

@chasenlehara Do you require any more assistance on this issue?

I was able to find my old bin: http://jsbin.com/komugexape/1/edit?html,css,output

[chasenlehara]

Looks great, thank you!