Page MenuHomePhabricator

[Design] Make it clearer that the participants section is collapsible
Closed, ResolvedPublic2 Story Points

Description

On the event page, if you click on the word 'Participants' in the section header, it collapses the section. This behavior should be made a little more obvious. It seems kinda like an Easter egg right now.

This will also apply to the 'Categories' section we introduce in T194703: Add support for categories on the frontend and possibly also for wiki-family section, if we choose to do T200487: [Design] Allow for wiki-family sections on the event page to be collapsed.

There's a few different ways to do this - either have โŠ•/โŠ– symbols on the header which toggle between the two depending on whether the section is open or closed. Or have a simple ๐Ÿ”ฝ at the far end of the header to indicate it's collapsible. Let's do whatever is simplest.

Event Timeline

Niharika created this task.Jul 27 2018, 5:59 PM
Restricted Application added a project: Community-Tech. ยท View Herald TranscriptJul 27 2018, 5:59 PM
Niharika triaged this task as Normal priority.Jul 27 2018, 5:59 PM
Niharika set the point value for this task to 2.Jul 31 2018, 7:45 PM

@MusikAnimal is the thing to do here to generalize the eventAccordian macro and give it the down/right chevron icon? Seems like it'd be a useful thing to have untied from events. Should macro LESS go in application.less?

Samwilson updated the task description. (Show Details)Aug 9 2018, 5:41 AM
Samwilson claimed this task.Aug 9 2018, 6:28 AM
Samwilson moved this task from Ready to In Development on the Community-Tech-Sprint board.

I've had a crack at this, with a left-side CSS-only caret turnbuckle thingo. PR: https://github.com/wikimedia/grantmetrics/pull/87

I went with flexbox because it's just simpler to get things to line up. I know it's not the bootstrap way, but I figured we had to add some custom styles anyway and this just made the HTML more readable.

The panel header and caret don't have a tooltip text at the moment. Is that something we want? i.e. "Hide this section"/"Show this section".

I've had a crack at this, with a left-side CSS-only caret turnbuckle thingo. PR: https://github.com/wikimedia/grantmetrics/pull/87

That looks good to me.

The panel header and caret don't have a tooltip text at the moment. Is that something we want? i.e. "Hide this section"/"Show this section".

Good point. I hadn't thought of that. Let's add it.

@MusikAnimal is the thing to do here to generalize the eventAccordian macro and give it the down/right chevron icon? Seems like it'd be a useful thing to have untied from events.

What you have done looks good to me!

Should macro LESS go in application.less?

No LESS, but SCSS :) And yes that's where I've been putting shared styles. Not too many of them right now for it to be a problem but we can refactor if need be.

Okay, I've added the tooltip text.

@Niharika Looks like we forgot to bump the version of the assets https://github.com/wikimedia/grantmetrics/blob/7706fdf8a730ca577166acec04e73a54da2d11b7/app/config/config.yml#L34
Can you try clearing your cache?

Looks good now. But I found a bug: T201710. Let's hold off on getting this in production until we fix that though I the bug isn't caused by this. I can reproduce it in prod too right now.

Niharika moved this task from Backlog to In progress on the Grant-Metrics board.Aug 10 2018, 9:04 PM

@Niharika Looks like we forgot to bump the version of the assets https://github.com/wikimedia/grantmetrics/blob/7706fdf8a730ca577166acec04e73a54da2d11b7/app/config/config.yml#L34
Can you try clearing your cache?

Looks good now. But I found a bug: T201710. Let's hold off on getting this in production until we fix that though I the bug isn't caused by this. I can reproduce it in prod too right now.

Going by the conversation on that bug, it's clearly not a bug. Let's deploy this on production and continue conversation on that one.

MusikAnimal closed this task as Resolved.Aug 10 2018, 10:44 PM
MusikAnimal moved this task from QA to Q1 2018-19 on the Community-Tech-Sprint board.

Deployed! Though we never bumped the asset version so some people might see the broken styling that Niharika saw. This should fix itself after some brief amount of time. I still don't version the assets in Pageviews Analysis (entirely frontend code), and I've yet to have complaints.

Samwilson moved this task from In progress to Done on the Grant-Metrics board.Aug 12 2018, 8:24 AM