Streamline "teaser" (card) view of projects

A project can have multiple images, so I assume that the card would only show the first one.

On a similar vein, many projects currently have more than one category. It may be less straightforward for categories to selectively show only a subset, since the current input doesn't allow a project maintainer to rank the categories, so it may require some discussion to determine the best way to show only one category.

We need another 2 filters (Development status & Maintenance status). This 2 filters useful for know about projecet current status

A project can have multiple images, so I assume that the card would only show the first one.

Agreed.

many projects currently have more than one category

Excellent point! I think we should only show a limited number of categories, and we should work with DA to limit the "category stuffing" trend (and limit the total number that a project can have). My suggestion is 3. In fact, I suggest we only show 3 categories at all - even on the full listing. This may help us to get those folks to self select the categories they *really* want.

We need another 2 filters (Development status & Maintenance status)

I think we certainly should be able to filter by these, but I'm not sure if we need to display them on the card itself. My concern is that it may be confusing for a newbie or a non-technical person. However, I would defer to the site-builder folks on this one.

Otherwise, I think the proposed resolution sounds great. Enough info to tell me what I need, but not too much that I am overwhelmed.

A project can have multiple images, so I assume that the card would only show the first one.

Agreed. This is the design I was thinking for the individual module pages. You can see the example of what no icon would look like, but screenshots/images being available. There are a few options: if there is no icon (or logo), then maybe the first image is what appears? Or perhaps an empty state as seen below:

We need another 2 filters (Development status & Maintenance status)

I've added advanced filtering option to the designs. Default would be a simple search with the option to click the filter icon, which would drop down the menu in the design image below. Users who know what they are looking for can use the simple search. Users who are looking for options can used the advanced filters to reduce the number of modules that show up in their search. These advanced filters are what is currently listed on the modules page on Drupal.org.

Hi @bostonjillian
I think we couldn't support project browser for Drupal 4, 5, 6, 7
we only can support projects browser for Drupal 8, 9 and coming Drupal 10.

But Otherwise filter looks awesome.

Once we agree on the MVP version of the "card" we should update the Figma and then hand off for development changes to Matt's prototype

Personally I'd prefer to see the download icon stand out a little more, assuming that this is the primary action for a site builder using the interface. Could it look a little more like a button?

Also, this version has also dropped the security shield. Could the shield be on its own in the middle of the bottom row, and maybe a site builder could click/tap on it to see the explanation if they didn't know what it was for?

There are still some minor CSS changes that need to be add for the seven theme but would appreciate feedback on what I have so far on the Claro theme.

I am not sure this is the right issue to comment in.

I am a bit concerned with the Advanced filter icon after the standard search icon. I did not know what that was... will others?
Accessibility is also spelled incorrectly.

Thanks for all this work

Ron mentioned above that it might be a good idea to only allow 3 categories, so only 3 categories would show on the card too, correct? I think that would allow for more room in the card if we know there’d only ever be 3.

Also, what does the badge with the wrench inside it do? It’s not clear to me what that does or represents, so maybe that needs to be made clearer to the user.

The card looks great so far and I’m excited to see this move forward!

Rebased with the current 1.0.x and positioning/overlap issue are addressed. Not 100% sure if it's ready for commit, but it's in a good place for someone to take over - I think the headache inducing stuff is taken care of so the remaining steps are just making it nice.

(note: the filter checkboxes aren't so great on narrow screens... that is arguable headache inducing but not in the scope of this issue 🙂)

#19, these categories are chosen by the module authors on d.o, and they currently could select every single one if they wanted. If we want to limit that, we'd need to do so on the module edit page, and then also figure out what to do about existing modules that have selected more than 3.

#21, you mean the sidebar that was added in #3241358: Filter by multiple categories? Yeah, new issue needed I guess

can we please also have an example here with no logo (how it should look like if no module logo is available at the project?!
This would help to visualise it and keep it in mind that we do not want to have a default logo.
At least in my opinion if there is no logo uploaded, no image should be shown and the space should be empty (space does not need to be kept, text should move up, just no element is visible instead of a logo)

it would be also great if the figma file can be pinned in the slack channel or in the project overview, so people can find it again :P
Thank you very much. really looking forward for this!

like the design an progress very much!