Feature #2465
closedFeature #404: Customizable user profiles
Javascript front-end for widgetized profiles
0%
Description
The new profile will first be mostly built for non-JS, with JS fanciness added as a progressive enhancement. This is a catch-all ticket for the process of adding the JS layer.
See http://teachingmultimedia.com/commons/portfolio_protoype/portfolio.html for a partially functional mockup.
An outline of the main functionality needed:
- The new profile header very large, so that when you're scrolled down looking at a user's profile, you don't actually see the user's name anywhere. Our idea for a workaround is that, as the header is scrolled off the screen, it should fold/roll up into a smaller version of the header that contains just the username and a smaller avatar. TBD: how will this work with the toolbar?
- There should be a big button that switches the screen to "edit mode". The exact visuals of this are to be determed.
- In edit mode: Widgets should be reorderable via drag and drop
- In edit mode: The Add New Widget interface should be built in JS. We'll need more mockups on how this workflow looks (from Chris). Is it a modal overlay, or something that slides out on the page, etc.
I'm assigning this to Ray for the moment, in the hopes that he'll oversee the process, but (a) most of this shouldn't start in earnest until we have finalized workflow mockups from Chris, and (b) it'll probably make sense to divide the task into multiple smaller tasks, which can be assigned to others if need be.
Updated by Boone Gorges over 11 years ago
- Assignee changed from Raymond Hoh to Boone Gorges
This is all done, with the exception of the "sticky" header described in (1). I've got a proof-of-concept for that built, but I'm still working out a few of the kinks before I'll be prepared to mark this ticket as resolved.
Updated by Boone Gorges over 11 years ago
Sticky header is ready to test on cdev: http://cdev.gc.cuny.edu/members/boonebgorges/
It's a bit jerky in webkit browsers. Might play with the offset parameter for the sticky function.
Updated by Boone Gorges over 11 years ago
- Status changed from New to Resolved
Marking resolved - we'll handle specific issues in other tickets.
Updated by Matt Gold over 11 years ago
Looks great, Boone! Thanks so much for your work on this. Is there a way to have the header extend across the full width of the page, as in Chris's prototype? (would have placed this comment on another ticket but didn't really see one that fit the bill)
Updated by Boone Gorges over 11 years ago
- Status changed from Resolved to Assigned
I originally had it working that way, but it looked really weird to have the header suddenly snap to full width when the content portion remained narrow. If you want I'll do it the other way though.
Updated by Matt Gold over 11 years ago
How much work would be involved in creating a test version so that we could look at the difference?
Updated by Dominic Giglio over 11 years ago
Looking real good in Safari, Chrome and Firefox on my Mac. Nice work!
Updated by Boone Gorges over 11 years ago
- Status changed from Assigned to Reporter Feedback
Append header=wide
to see wide header. Eg http://cdev.gc.cuny.edu/members/boonebgorges/?header=wide
Updated by Matt Gold over 11 years ago
Thanks, Boone. On Chris's mockup, the header was full-width before the scroll down resized it. Is there a reason you didn't go with that here?
Updated by Boone Gorges over 11 years ago
The entire black header is now page-width. http://cdev.gc.cuny.edu/members/boonebgorges/
Updated by Dominic Giglio over 11 years ago
Agreed! +1 on the header Boone, looks awesome!
Updated by Boone Gorges over 11 years ago
- Status changed from Reporter Feedback to Resolved
Marking resolved again to clear the milestone.