CUNY Academic Commons

This is likely to take a significant rearchitecting of the page. I'll put it into the 1.5.1 milestone as you've requested, but it's probably that there will not be time to complete it by then.

I've done some more research and prototyping, and I think I'll be able to get around the moving-iframes-around-the-DOM issue by using HTML5's contentEditable property instead. There are a couple existing libraries to make rich editors in this way - https://github.com/bergie/hallo is the one I've had the most success with - but integrating it properly with the new Commons profiles is proving to take a lot of work. I have to do proper browser-sniffing with fallback on textareas, and because contentEditable means that data is no longer stored in a proper HTML form, I have to write some custom JS to make the profiles actually saveable.

I'm hopeful that I'll be able to have something in the next week or so, which'll then need to be tested by the team to ensure reasonable cross-platform performance. I'm going to put it into 1.5.3 in hopes that all this can be finished by then.

This is not done, so I'm moving it to the next release.

This issue ended up being extremely complex. It required a full rewrite of the Profile javascript, and an extensive refactoring of much of the plugin.

That said, the first pass is ready to test on http://cdev.gc.cuny.edu. Log in and go to your profile edit page to check it out.

The workflow for some profile editing actions has been changed just a bit in response to some of the technical changes. I've tried to add some visual clues to help users along. I'm not going to give any more information than that, because I would like to get unvarnished opinions :)

(The update appears to have broken RSS widgets for the moment - please do not try to add or edit this widget type on cdev at this time.)

Hi Boone -- do you want all bug reports on this new system on this ticket? Because I just did something that screwed things up. Screenshots attached, both in edit mode and presentation mode. What's happening is that the text in the top field is aligned center and can't get aligned flush left. I think I did this by clicking a whole range of formatting buttons -- ordered list, bulleted list, then header 1, then justify left/right/center, then p. Now the text won't become flush left and it looks like some formatting code is spilling over to the next field. You can see this live on the Text Student account on cdev.

Also, the formatting buttons appear over the blue "remove" button; it might be better to move the buttons left a bit.

header issue

yes, you're right -- hard refresh fixed this. Thanks. Still don't think an H1 will look good here, but I guess it's fine to give people the option.

searchable links.

I guess that with the new vision of the profiles as public presentational spaces, it may not make sense to make an individual's academic interests searchable links across the entire membership. I do think it is important for us to retain the ability to search/click across member interests, though, so let's discuss that in a separate ticket.

Boone, thanks for taking the time to work on this and Matt thanks for the comments. This is going to be a great addition.

Boone, I'm going to list some comments here but if you want me to make separate tickets for anything let me know.

Buttons in Toolbar¶

Matt, with the h1 there are two things here. One is the size of the font. That is easily fixed with CSS and we can adjust that in a separate ticket if need be to get it right. The other is what people will understand. Really these are just giving people the ability to have 3 levels of titles. For the time being I think h1, h2,h3 are the best options as the numbers make sense (it might be wierd to have h2,h3,h4, where's the 1?).

From a web perspective I agree with leaving out Underline (can be confused with a link).

I'm guessing the one we'll get requests for is a button to add images. I'm also guessing that adds a lot more complexity and is something we should not do at this time.

Toolbar Position¶

Boone, I think you may have addressed this but adding my observations in case there are any differences. I found that the JS set the width of the div.halootoolbar to 558px. This caused the h3 button to break to the next line for me. If it was changed to 565px then all was fine.

I also found if I added a margin-top to the div that contains the edit area then the buttons would sit on top of it which is where I expected them See Margin-Top-Buttons.png (in next post, hit submit by accident and can't add image).
I added 80px but could be a little less:
#cacap-edit .cacap-click-to-edit.editing {
margin-bottom: 50px;
margin-top: 80px;
}

Academic Interests as Links¶

Agree that we should open separate ticket to discuss.

Pulse Cue¶

Generally I like the cue. I do see Matt's Point that it is possible a use will miss the cue if they are editing something near the top and then scroll down to click on something near the bottom. I suppose you could move them back up the page, but I'm hesitant to do that and if we did do it the movement should animate and not just jump them up.

Another idea is to add a message next to the OK and Cancel buttons that explains they need to click one before moving on to edit another section. See OK-Cancel-Message.png

Errors when adding Free Entry¶

I found some errors when trying to add a Free Entry section
I found on the first addition I was only able to edit one of the fields. Steps to replicate
1. Add Free Text
2. Click to edit Title
3. Click OK
4. Try to click to edit textarea, cannot enter.
5. Click Save Changes (for entire profile)
6. Click to Edit Profile
7. Now can edit both Free Text Fields

Also if you edit the textarea first it does not get the rich text buttons
1. Add Free Text
2. Click to edit textarea
3. You can add text but the rich text options are not there
3. Click OK
4. Try to click to edit Title, cannot enter.
5. Click Save Changes (for entire profile)
6. Click to Edit Profile
7. Now can edit both Free Text Fields and the rich text options appear

Attached is the missing image for the Buttons with margin-top added to the div.

Also adding a formatting issue. The positions List has a margin left that can probably be removed to bring it in line with the other sections. see Positions-List-Margin-Left.png

New tickets:

I'm guessing the one we'll get requests for is a button to add images. I'm also guessing that adds a lot more complexity and is something we should not do at this time.

#3048

Toolbar Position

#3049

Academic Interests as Links

#3042

Pulse Cue

#3050

Errors when adding Free Entry

#3051

==

I'm marking this ticket as Resolved. Please open separate tickets for new issues. Thanks for the help.