CUNY Academic Commons

Reassigning to Chris to get feedback on which of the options we should go with.

Chris, if you could give a concept for the cancel button (even just in words), it'd be helpful. Thanks.

This keeps getting bumped, so I'm moving it to 1.6.

The basic idea is to put the save/cancel next to each other to save a bit of space and for touch screens I think it's harder to click the wrong one side/by side than one on top of the other if they are close together.

Removing Commons profile tab in edit mode still stands as a suggestion but I didn't think that needed visualization.

Attaching two possible images of the cancel button. Both basically the same with one where save is green and cancel is red and the other where cancel has red background with white text.

I'm also attaching a file with the HTML/CSS I made for it.

Put the two buttons side-by-side in a new div. Then basically just removed the left border radius on cancel and right border radius on save. Just suggestions of course.

This is another place where it would have been nice to have a styleguide.

-- is right under the avatar image the right place to put these buttons?

I'm open to other suggestions. If you'd like something different, let me know.
I added the button at the top so that you could make quick changes to the top part of your profile and click save.
I just realized that I didn't also change the Save Changes button that is at the bottom of the page. That should be changed too so it is save/cancel

-- I get the red (stop))/green (go) coloring but think it adds to many colors to our scheme, making the page look a bit chaotic. Took a look at the twitter profile editing screen and didn't see that kind of coloration there; can you perhaps put together a different version without the red/green coloring?

If you don't like the coloring then let's just leave it out. As you point out, we don't really have a system, so in the absence of one, I'm fine with just leaving the colors out. Attaching a screen shot with dark grey color for the text (777) like we have on other buttons.

Great - thanks, Chris.

One note: it looks to me, based on what I see on my own profile, that the save changes button is aligned with the bottom of the header div rather than being right under the profile photo. Chris: which position seems better to you?

I do think this looks better without colors, at least for now. Thanks for reworking it.

By "bottom of the header div" do you mean right above the white line that comes just before the edit form? That position is fine for me.

I'm losing track of where I wrote what, so I'll put it here at the risk of repeating. The following should be in place

• Add a cancel button by the Save Changes button: both aligned to the white line.
• The buttons may need to be placed in a separate div and CSS fiddled with. I found that in some resolutions the Save Changes button is covered by the avatar. It's when the page is scrolled but wide enough that the avatar is showing. (attached image)
• Remove Commons Profile Tab in edit mode

• One final part I haven't added yet is to add an edit button in the same place as the save/cancel button will be. I think this will intuitive, click Edit and then in it's place the save/cancel buttons appear.

Boone, I think my part is done so moving to you. Move it back and let me know you disagree.

Add a cancel button by the Save Changes button: both aligned to the white line.
The buttons may need to be placed in a separate div and CSS fiddled with. I found that in some resolutions the Save Changes button is covered by the avatar. It's when the page is scrolled but wide enough that the avatar is showing. (attached image)
Remove Commons Profile Tab in edit mode
One final part I haven't added yet is to add an edit button in the same place as the save/cancel button will be. I think this will intuitive, click Edit and then in it's place the save/cancel buttons appear.

These are all ready to test on cdev.

Much improved. One more suggested change. At the bottom of the page, there is a "save changes" button all by itself in the left corner. I would suggest moving it to the right so that it is parallel to the save/cancel buttons above, and adding a "cancel" button there, too. Annotated screenshot attached.

Like the short header on these pages. Much better.

I've mirrored the buttons at the bottom of the page in https://github.com/cuny-academic-commons/cac-advanced-profiles/commit/ffed075494db3c9a547bc16ff04bce4ba7aaee91. Marking resolved.