Revise Write Plan page

[stephaniesimms]

UX wireframes @JEK-III : http://h90c3m.axshare.com/#g=1&p=write_plan
Functional Specification (global spec for all write plan pages): Implement with a non-table layout; attach labels to input fields
Related issues for write plan pages #491 #495 #497 #498

• Rename second tab after Project Details "Write Plan"
  Blue notepad icon functional spec: For multi-phase plans (e.g., Horizon2020), split into separate tabs for each phase, labelled with the name of the phase (e.g., Initial DMP, etc.)
• Backdrop functional spec at bottom of wireframe: The first time the page is visited, first section is expanded, others are closed. Subseqently, open first section containing an unanswered question.
• Up to 3 guidance selections can be displayed, one tab for each. Guidance redesign is separate, related issue Revise Guidance on Write Plan page #495
• Create slider for Comments (renamed from "Share Note"); blue notepad functional spec: Contents reflect whichever question was last in focus. Set to first question when the page loads.
• Rename button at bottom of page "Download Plan"
• Move progress bar inside of Write Plan tab area
• Revise display for no. questions answered (0/3, 1/3...3/3) - show empty circle if zero questions answered, green check if at least one question answered

[briri]

Hoping @jollopre can work on this one since he is familiar with the new auto-save feature.

Note that the Guidance portion of this page is a separate ticket: #495 This ticket will need to be worked on in coordination with the guidance ticket because the Guidance/Comments section is being contextualized to the answer that has focus. (e.g. user expands a section and/or sets focus on an answer and the guidance/comments should update)

The section/answer portions of this page should function the way they currently do in the development branch. The following things need to be added/changed though:

• Progress bar moves so that its within the tab rather than floating above
• Progress bar styling needs to be re-implemented
• Add a new status indicator to the section accordion bar (e.g. 1/3 and 0/2 in the wireframe)

[briri]

@JEK-III @stephaniesimms @sjDCC and @dsisu
I'm not completely finished with this yet but wanted to provide a screenshot to begin soliciting any feedback you may have for the layout.

I've tried to retain the structure of the existing guidance/comments section

[sjDCC]

Looks good to me @briri Nice clean layout. I just have two suggestions (marked on screengrab below)

I think the section headings would be best with a coloured background to divide them more visually. I also wonder if we can reduce the padding at the bottom of the guidance/share note box and scale this to fit the number of pieces of guidance? It seems particularly big (too much whitespace) on the share note example.

One other teeny point is changing the text to 'UoE example answer' The phrase 'Example of answer' was one of Marta's portuguese-english-isms that I thought we had removed but she's creeping back in ;-)