Clickable prototype here: http://pauginer.github.io/prototypes/flow/responsive/index.html
- Move the wikitext that was in the Flow board header to the side rail. See prototype & mocks/screenshots for styling.
- The side rail has a title, which is not editable per page: "About this discussion page"
- There is an edit pencil icon at the top of the side rail wiki content. When the user clicks the icon, an entry field appears in that location, with the content represented in VE or wikitext (as determined by the user's sticky pref). This should follow the same model as editing an existing post -- replacing the content with the editing field, with Cancel link and Save changes button.
- Responsiveness: As the browser window gets bigger/smaller, the width of the content and the side rail change. There are breakpoints for minimum width and maximum width. When the browser window hits the minimum width, the side rail content pops to the top of the page.
- Collapse toggle: The open side rail has an X at the top right. Clicking on the X collapses the side rail to a thin border, and the Flow content fills the rest of the browser window. Clicking on the icon in the border re-opens the side rail. The default is open. (See separate ticket for sticky user preference.)
There are separate tickets for some of the elements seen in the prototype/mocks. This ticket is limited to the elements defined above.
Do we need a mockup for editing the side rail, with cancel/save changes?
Add definition of responsive width breakpoints?
Is the full-width (collapsed rail) also responsive? What's the maximum width?
The text at the top of the side rail is still in dispute -- current suggestion is "About this discussion page". Does that work, or is there something better?
In the prototype, if you have the side rail collapsed and then make the browser window smaller, the side rail content jumps to the top anyway. Do we want a "collapsed" small-width state? There's a separate ticket for phones -- whatever decision we make there will probably work for small desktop widths as well.
Content with side rail:
Full-width content with side rail collapsed:
Responsive layout allows both columns to get bigger:
Browser window is too small; side rail jumps to the top: