Session Objectives Having Bulleted Or Numbered Lists Need Better Formatting - Courses and Sessions

[dartajax]

There will be more of these. If a bulleted list (or a numbered list) is entered as objectives(s) for a session, the advanced formatting causes the resulting output on the Event Detail screen to be difficult to read and understand.

Here is the session in Courses and Sessions.

Here it is in Event Detail. All of the items

are concatenated directly together without even a space being inserted between the values. See here ...

[stopfstedt]

interesting problem. i don't see a technical solution, at least not a feasible one, that would selectively replace just parts of the markup with line breaks.

suggesting instead that we apply the same "expand to full content" method across the board - everywhere we condense/strip-markup, and regardless of text length.

see session description in the course manager.

as a minor style improvement - the bullets should also be removed from the list of objectives.

[jrjohnson]

Team Discussion: We should use the expanded widget so users can get at the full contents as suggested by @stopfstedt here.

[michaelchadwick]

@dartajax @stopfstedt Did this get fixed at some point? Just made a new course, session, and offering, and the event detail page looks fine https://demo.iliosproject.org/events/S0120240730O248226

[stopfstedt]

@michaelchadwick - i think you're looking in the wrong place. the problem is on the course management side, not with learning events display.

i bolted some dummy text onto that objective to force truncation.

this should illustrate this a bit better:

see https://demo.iliosproject.org/courses/2260/sessions/83494?sessionObjectiveDetails=true

[stopfstedt]

or perhaps you are looking in the right place, and i'm misreading the issue.

@dartajax please clarify, thanks.

[michaelchadwick]

@stopfstedt You added the thing I was missing: enough text to force the truncation on the Course side. Without it, it looks fine, and as long as there's an expander icon, the text can be seen unprocessed.

I'm guessing we can't show the markup entered as-is since this is just text going into a <button> element, which doesn't accept HTML.

[dartajax]

I followed the link @stopfstedt posted and that seems like exactly what I was dealing with when this was created by me. Maybe the ticket is incorrectly named - certain in the courses and sessions area, this is the case. This issue does not appear to exist in "Event Detail" - I published and tested this. I will update the title of this ticket.

[dartajax]

This applies to course objectives as well - program years - maybe too - that would be a new ticket though

check the course objective I added using the same link @stopfstedt put in above

[michaelchadwick]

@dartajax I see the issue both on Course Objectives and Session Objectives. Also, I just realized that even when the text is not truncated, it's still being put inside a <button>, so...I guess you can put HTML inside a <button>!

@stopfstedt I'm assuming that this is the truncation algorithm, and augmenting it to handle HTML would be non-trivial. Is it worth pursuing at this point?

[stopfstedt]

@michaelchadwick that is the problem indeed. to state the obvious - arbitrary markup truncation is bad.

perhaps a different approach is in order. instead of stripping markup/truncating text, overlong markup could be hidden - add a gradient fade-out and a "shore more" button or the likes.

might look weird in the objectives grid view if the next cell over (parent objective or competency) is long, so this "truncation" might need to be added there too.

i'm thinking along the lines of https://css-tricks.com/text-fade-read-more/

haven't thought this all the way through, but may be worth a try.

[michaelchadwick]

Going to try to create a new TruncationFade component and see how it looks visually.

[michaelchadwick]

@saschaben @stopfstedt @jrjohnson if you wanna check it out, I put up a PR for using the fade technique: ilios/frontend#8034