Problem/Motivation

Some projects on Drupal.org have many, many categories checked (some have all checked!). The _right_ fix is to re-work the categorization on Drupal.org and to allow a max of three categories for any project. With that said, until that is done, we need a UI that will work even when there is a high number of categories.

Steps to reproduce

See AddToAny Share Buttons module in card view for example.

Proposed resolution

Display an extra bit of data such as "(+4 more)" for showing that there's more categories, but keeping the display consistent.

Remaining tasks

  • ✅ File an issue about this project
  • ☐ Addition/Change/Update/Fix to this project
  • ☐ Testing to ensure no regression
  • ☐ Automated unit/functional testing coverage
  • ☐ Developer Documentation support on feature change/addition
  • ☐ User Guide Documentation support on feature change/addition
  • ☐ Code review from 1 Drupal core team member
  • ☐ Full testing and approval
  • ☐ Credit contributors
  • ☐ Review with the product owner
  • ☐ Release

User interface changes

Changes to category display on cards.

CommentFileSizeAuthor
#14 Screenshot from 2022-07-07 10-34-35.png38.79 KBomkar-pd
#12 diff-pill.png87.03 KBtim.plunkett
#9 Screenshot 2022-07-01 at 19.41.38.png49.7 KBfjgarlin
#6 Browse Drupal.org projects Drupal 2022-07-01 13-20-37.png27.1 KBtim.plunkett

Issue fork project_browser-3267685

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

chrisfromredfin created an issue. See original summary.

chrisfromredfin’s picture

chrisfromredfin
he/him/his
Primary language English
Location Portland, Maine
commented
Issue tags: +Project Browser MVP
bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

Since there will eventually be a 3 category limit, I'd like to avoid the Modal approach. The Drupal dialog integration is just complex enough that I'd rather it not be in something temporary. The "...4 more" approach sounds good IMO.

chrisfromredfin’s picture

chrisfromredfin
he/him/his
Primary language English
Location Portland, Maine
commented
Issue summary: View changes

Yes, I'm definitely arguing for the "... 4 more" approach; and if they're interested in what those are they can go to the detail page / d.o page.

tim.plunkett made their first commit to this issue’s fork.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Active » Needs review
StatusFileSize
new Browse Drupal.org projects Drupal 2022-07-01 13-20-37.png27.1 KB

Here's a first attempt. But this styling doesn't look right at all, any thoughts?

tim.plunkett opened merge request !183

fjgarlin’s picture

fjgarlin commented

Perhaps drop the background and the parenthesis?

fjgarlin’s picture

fjgarlin commented
StatusFileSize
new Screenshot 2022-07-01 at 19.41.38.png49.7 KB

Like this:
card

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented

Semantically should it also be an LI tag but with a class for changing the visual display?
Or should it be another tag outside the UL?

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Needs review » Needs work
tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
StatusFileSize
new diff-pill.png87.03 KB

Discussed with @bnjmnm and he agreed it should be semantically in the same list. Plan is to drop the parentheses, and style the extra pill like this:

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
Status: Needs work » Needs review
omkar-pd’s picture

omkar-pd commented
StatusFileSize
new Screenshot from 2022-07-07 10-34-35.png38.79 KB

Tested the MR and looks good. Can be moved to RTBC. But as tests are failed so not moving this to RTBC.

omkar-pd’s picture

omkar-pd commented
Status: Needs review » Reviewed & tested by the community

Looks good. moving this to RTBC.

  • tim.plunkett committed b2879b2 on 1.0.x 
    Issue #3267685 by tim.plunkett, bnjmnm, fjgarlin, omkar-pd: Poor UI when...
tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Status: Reviewed & tested by the community » Fixed

Looks great, thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.