Make the overall design of the browse page more compact and dense

Ha! Leslie has been screaming about this for a while, too! And we didn't have an issue for it. Curious if a lot of this space is coming from us or is default from Claro. I'm hoping it's us so we can change it rather than UNsetting Claro.

i am adding this issue as related since it is also about makeing the information more compact and condensed. this issue here is about the card view the linked issue about the list view of the browse page.

Definitely agree that the search options currently take far too much space.

Just started a DrupalCMS trial on launch day and came looking for this exact issue. IMO there is way too much empty space in both the grid view and list view. If we are keeping the center alignment design, then here is a good implementation for center alignment tile design: https://docs.helpscout.com/

Suggestions

• Reduce min-width of list items in .pb-projects-list and .pb-projects-grid from 400px to 350px
• Shorten, center and increase font sizing of the project descriptions
• Increase font sizing of project title, make the link colour black
• Center the Install button and Installed checkmark

Let's see what it looks like with ChrisCK's suggestions implemented! (updated issue summary with proposed fixes)

I've scribbled some ideas on the current layout...

Here are my thoughts...

• There are several places where there is a big vertical gap that serves no purpose. While whitespace is important, I feel these could be tightened up.
• The Search box covers the width of the page. In most cases search text won't be more than a couple of words, so this doesn't need to be anywhere near as big. My thinking is a much reduced search box alligned to the right.
• I'm not sure why the grey filters box is separate from the search text. Surely the search is also a filter?
• The Security Advisory, Maintenance, and Development statuses are all on/off toggles. Could these be combined into a drop-down of checkboxes, with a heading like "Status filters"?
• If the above were implemented, could we have a single row with "Filter by category", "Status filters", and "Search".
• There are two lines below the filters. The first with "Clear filters", any selected filter lozenges, and "sort by". The second line has the result count and list/grid selectors. Both lines have a lot of empty space. Could all of this be fitted on a single line?
• Finally, there is a line above the top row of results, that is touching the tops of the boxes. The two lines merge and look weird. If we have a line there should be a gap between it and the results. But I don't think there's any need for a line, so we should get rid of it.

My thoughts on this - from a site builder perspective only:
- Agree that the filter criteria should all have the grey background so folks understand that all the filters work together. Shortening the Search text box and combining the text "Search" with the text box on one line and placing that line within the grey area would make things more compact.
- There are several places where there is a large vertical gap that could be reduced, both within the grey filter area and in the results area (above the number of results)
- A lot of work went into placement and functionality of the other filters (categories, security coverage, ...) so I would not move or change them
- the # of results and List/Grid buttons should remain in the results area, not in the grey filter area.

I've made a first stab at tightening up spacing. The changes I've made are all through CSS, so none of the tests should be affected.

Here's a preview of the current changes:

From Leslie's comment above, moving the search into the grey area would make sense. This would slightly change the hierarchy of the form, so some tests would probably need some rework.

From Chris and rkoller's comments on Slack, we want to avoid changing the order of controls for now.

Currently the "Sort by" label is above the drop-down, which makes the line containing it excessively tall. I wonder would it make sense to move the label to the left of the drop-down, where there's plenty of space (as an aside, the Sort by label has a colon, which none of the other labels do)?

I thought this would need a Svelte code change, but when I pushed that change it caused a test to fail. Looking at the fail, I needed to move a container class back, which was when I realised the Svelte change wasn't needed and it could all be done with CSS.

I've moved the Search box inside the grey filter area. I think this connects them better visually, and allows the spacing to be tightened up:

I also checked it doesn't break in mobile view:

I think there would be scope for a more radical change, but after discussing in Slack, there wasn't an appetite for that, so I've kept it to simple tightening of the spacing.

I figured out that the searchString is gone now in favor of $filters.search so I updated that and it worked. But then I figured it needed a test, and i couldn't make the test work (which is weird it really should...)

So, I'm moving the behavior change to a follow-up and merging with just the CSS fixes that are definitely more in-scope. The follow-up should fix it and have a test.

This will get people to their projects faster!

chrisfromredfin → changed the visibility of the branch 3487845-make-the-overall to hidden.

Well, doh! Didn't notice this has been merged and tried to add test.

Will add in follow-on issue.

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