Page MenuHomePhabricator

Implement collection carousel
Closed, ResolvedPublic

Description

The new homepage design contains a filterable carousel of Wikipedia Library collections.

Acceptance criteria

  • A template has been created containing a carousel of library collections
  • The default view shows Featured collections (collections with featured = True)
  • Clicking tag names filters the carousel
  • The carousel is static, but moves smoothly in sections when the arrows are clicked and has a defined start and end.
  • Clicking More Info displays the relevant collection's text on top of the logo
  • Text on the logos should be truncated with "..." at the end if it doesn't fit inside the logo when More Info is clicked
  • The carousel adjusts size for mobile and tablet views, per the prototype and spec

Event Timeline

The default view shows Featured collections (collections with featured=True)

Is this acceptance criterium still valid? I thought we had agreed that an All section would be better.

Is this acceptance criterium still valid? I thought we had agreed that an All section would be better.

Yes this is still what we want. We originally had 'All' but decided 'Featured' would be better.

@aishwaryavardhana noted two issues:

  • If you resize your browser screen size the carousel breaks at around 769px
  • The right/left arrow should be disabled when at the respective end of the carousel (i.e. when users hit the far right end, they shouldn't be able to click a right arrow to loop back to the start). Ideally the arrow would disappear, but simply disabling the loop-back behaviour would suffice.

One piece of feedback we got from the community was that our merging of 'multidisciplinary' with all other tags is confusing:

I've clicked through the tabs at the top, and it seems to me that the choices at the bottom change, but not necessarily to the choices I would expect or choices in alphabetic order. I mean, for example, I clicked on law assuming to fairly quickly find HeinOnline, but had to scroll more than five times to find it. First up was Magiran, a publisher of scientific journals; then Cairn, a publisher of social science materials; then Proquest, a general source conglomerate, before I got to the first law collection, Public International Law, which wasn't Hein. If I didn't know Hein was a major law compiler, I more than likely wouldn't find it, but it would be one of the first sources one should search for research on law materials.

The user responded positively to my suggested improvement, which would be to list collections which specifically have a particular tag first, then the multidisciplinary collections. Is that possible?

So if we had four collections, A, B, C, and D, with A and B having the 'Law' tag and C and D having the 'Multidisciplinary' tag, when a user filtered for Law, instead of current behaviour, which would randomise all 4 in any order, we'd prioritise A and B first, then show C and D.

@aishwaryavardhana noted two issues:

  • If you resize your browser screen size the carousel breaks at around 769px
  • The right/left arrow should be disabled when at the respective end of the carousel (i.e. when users hit the far right end, they shouldn't be able to click a right arrow to loop back to the start). Ideally, the arrow would disappear, but simply disabling the loop-back behaviour would suffice.

Both of these errors should be fixed and are now live on staging.

One piece of feedback we got from the community was that our merging of 'multidisciplinary' with all other tags is confusing:

I've clicked through the tabs at the top, and it seems to me that the choices at the bottom change, but not necessarily to the choices I would expect or choices in alphabetic order. I mean, for example, I clicked on law assuming to fairly quickly find HeinOnline, but had to scroll more than five times to find it. First up was Magiran, a publisher of scientific journals; then Cairn, a publisher of social science materials; then Proquest, a general source conglomerate, before I got to the first law collection, Public International Law, which wasn't Hein. If I didn't know Hein was a major law compiler, I more than likely wouldn't find it, but it would be one of the first sources one should search for research on law materials.

The user responded positively to my suggested improvement, which would be to list collections which specifically have a particular tag first, then the multidisciplinary collections. Is that possible?

So if we had four collections, A, B, C, and D, with A and B having the 'Law' tag and C and D having the 'Multidisciplinary' tag, when a user filtered for Law, instead of current behaviour, which would randomise all 4 in any order, we'd prioritise A and B first, then show C and D.

This has been implemented and added to staging. Let me know if this is correctly implemented

The right/left arrow should be disabled when at the respective end of the carousel (i.e. when users hit the far right end, they shouldn't be able to click a right arrow to loop back to the start). Ideally, the arrow would disappear, but simply disabling the loop-back behaviour would suffice.

@Scardenasmolinar is it possible/straightforward to make the arrow disappear at the ends? Not sure if that was hard in the package you're using or not :)

The right/left arrow should be disabled when at the respective end of the carousel (i.e. when users hit the far right end, they shouldn't be able to click a right arrow to loop back to the start). Ideally, the arrow would disappear, but simply disabling the loop-back behaviour would suffice.

@Scardenasmolinar is it possible/straightforward to make the arrow disappear at the ends? Not sure if that was hard in the package you're using or not :)

Not sure if that's possible. I can try and I'll get back to you.

Nice! I'm seeing the greyed out left arrow at the start, but clicking the right arrow until I get to the end doesn't seem to fade it out in the same way. Is that expected?

jsn.sherman added a subscriber: jsn.sherman.

The arrow behavior is looking good, though we could still do with a little JS cleanup.
Merged!

Looking good! Everything seems to be behaving as expected on production.