Project

General

Profile

Actions

Feature #2465

closed

Feature #404: Customizable user profiles

Javascript front-end for widgetized profiles

Added by Boone Gorges almost 12 years ago. Updated over 11 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
BuddyPress (misc)
Target version:
Start date:
2013-02-20
Due date:
% Done:

0%

Estimated time:
40.00 h
Deployment actions:

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:

  1. 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?
  2. There should be a big button that switches the screen to "edit mode". The exact visuals of this are to be determed.
  3. In edit mode: Widgets should be reorderable via drag and drop
  4. 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.

Actions #1

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.

Actions #2

Updated by Matt Gold over 11 years ago

Cool - thanks, Boone.

Actions #3

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.

Actions #4

Updated by Boone Gorges over 11 years ago

  • Status changed from New to Resolved

Marking resolved - we'll handle specific issues in other tickets.

Actions #5

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)

Actions #6

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.

Actions #7

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?

Actions #8

Updated by Dominic Giglio over 11 years ago

Looking real good in Safari, Chrome and Firefox on my Mac. Nice work!

Actions #9

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

Actions #10

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?

Actions #11

Updated by Boone Gorges over 11 years ago

The entire black header is now page-width. http://cdev.gc.cuny.edu/members/boonebgorges/

Actions #12

Updated by Matt Gold over 11 years ago

Looks fantastic, Boone -- many thanks.

Actions #13

Updated by Dominic Giglio over 11 years ago

Agreed! +1 on the header Boone, looks awesome!

Actions #14

Updated by Boone Gorges over 11 years ago

  • Status changed from Reporter Feedback to Resolved

Marking resolved again to clear the milestone.

Actions

Also available in: Atom PDF