HTML mockup for manage/circle/edit page

[fu]

I've been working with hope on redoing a couple of pages, and here's one of the pages that resulted from the brainstorming.

HTML mockup of a revised Manage Circle page

Throwing it out here for discussion and fleshing out. This is just quick example HTML. The CSS is preliminary (more on that in a bit), and there's no supporting JS so if you could kindly gloss over these two things :-)

The biggest changes are:

• tabs for the various sections (to be hidden by JS), so that you can focus on only one thing at a time, instead of scrolling up and down the page


• changing the way the relationships split up so that it's split along the lines of your relationship to them / their relationship to you, rather than access/subscribe


• a dropdown so you can sort by username or relationship


• a filter for usernames so you can easily find / edit people in your circle


• cleaner table markup, and cleaner markup in general


• added heading for the custom colors

Comments

[jeshyr]

Is there a reason the 'give access' checkbox only occurs for one of those four? Presumably the top one is yourself who you can't give access to, but the others?

It looks great upon first glance - have not looked about accessibility as I'm deadded today but I can do that later. Less visual clutter is a win, thank you!

r

[fu]

*checks* Oh! I'd banned them while testing some other functionality; normally they should just have the checkbox. (The subscribe checkbox is there so I can revoke access)

[jeshyr]

Ahhh! There's no visual indicator that person is banned - it might perhaps be a good idea to say why the checkbox is missing in some way to avoid people going "it's borked!" when the forget they banned $person...

[sophie]

I agree - I'd say disable the check box with disabled="1" and put "(banned)" next to the username in the username column. (although don't disable the checkboxes if it's already ticked, so that you can revoke them)