I have two conflicting feelings:

• it looks nicer
• it harder to find needed module

I have the same feeling as Fedir

Note: the ordering is the same as before

Couple suggestions for usability improvement:

• About ordering: it better to make it "row flow", instead of "column flow", then I always know that upper part of alphabet are top, and bottom part of alphabet are bottom. Like now it hard and will be harder with many more modules.
• Each row and each cell in the row should have the same height, this will prevent "eye jumping" up and down while looking for needed module. It should be "perfect grid" :)
• Because of needing the same height, the title of cell need to be 1 row (long titles just cut down with overflow), and the description need to reduce in size (2-3 row) and also cut to keep the same height. Perfectly the full description and full title should be expanded "on hover". You know this nice effect in some shops, when you hover on product in grid overview you get expanded cell with product description? :) (something like that https://youtu.be/wHwyDt7bXDY?t=12, sorry I did not found a code example on quick search, technically it just an extra <div> with position absolute, that gets bigger on hover)
• Whole cell need to be "clickable" (or better to call it "selectable"), so I quickly can select needed module just by clicking on it without searching for a little "select" button. With this maybe even can remove a "select" button to save some space.

Couple suggestions for usability improvement:

• About ordering: it better to make it "row flow", instead of "column flow", then I always know that upper part of alphabet are top, and bottom part of alphabet are bottom. Like now it hard and will be harder with many more modules.

Agree but I don't know how :(

• Each row and each cell in the row should have the same height, this will prevent "eye jumping" up and down while looking for needed module. It should be "perfect grid" :)

Change to above should resolve that

• Because of needing the same height, the title of cell need to be 1 row (long titles just cut down with overflow), and the description need to reduce in size (2-3 row) and also cut to keep the same height. Perfectly the full description and full title should be expanded "on hover". You know this nice effect in some shops, when you hover on product in grid overview you get expanded cell with product description? :) (something like that https://youtu.be/wHwyDt7bXDY?t=12, sorry I did not found a code example on quick search, technically it just an extra <div> with position absolute, that gets bigger on hover)

Not sure that will be needed after above

• Whole cell need to be "clickable" (or better to call it "selectable"), so I quickly can select needed module just by clicking on it without searching for a little "select" button. With this maybe even can remove a "select" button to save some space.

I am not a fan of that. It's an accessibility nightmare

It a bit more code than column-count: 4; ;)
column-count not allow to change "flow".
Can try bootstrap grid if it enabled in admin template,
or look for use CSS Flex

.card-columns{
  display:flex;
  flex-flow: row;
  flex-wrap: wrap;
}
.card-columns>.card{
  flex: 1 1 250px;
}

or CSS grid

.card-columns{
  display: grid;
  grid-template-columns: 1fr, 1fr, 1fr, 1fr;
}

Not sure that will be needed after above

You are right, however I would still limit the description, it will looks more consistent when 1 module has 2 word(row) in description, and another 20 words. But can skip it for now, maybe later someone add.

I am not a fan of that. It's an accessibility nightmare

I cannot say here much :)
It just wrap a whole card in to <a> (maybe with title) and it will be like a list of "buttons", is that still bad? :)
But this will save really much space, and will make a "select action" faster.

I switched it to use card-deck etc

The direction is not left to right in rows not columns
Each row is the same height

We are already truncating the module description if it is too long ;)

that looks much better :)

We are already truncating the module description if it is too long ;)

I have missed that :)

I have tested this item ✅ successfully on f736ad3

Great job. Hope it will be accepted.

I have tested this item ✅ successfully on f736ad3

Looka nice!

Small question shouldn't the 'select' link look more like a button? It looks a bit lost

@HLeithner thats why I wrote

It is massively due some css love and care

and why this is an RFC and not a full PR

@HLeithner thats why I wrote

It is massively due some css love and care

and why this is an RFC and not a full PR

true, so a button layout would be cool in my opinion ;-)

Sorry - i should have been clearer - can someone help with that css

I will give it a try but it's really not my area

Maybe try add class btn btn-primary btn-sm to a button:

or even drop whole card-footer section, and do the button directly after card-body as on first example there https://getbootstrap.com/docs/4.0/components/card/ (button class btn btn-primary, and remove mr-2) :

or lighter (button class btn btn-light) :

upd: maybe can extend text to more verbose "Select this module", but not important.

Thanks

Should I retest this PR or should I wait because this is a RFC?

hm hm, not really, it not "clickable" ;)

Remove whole section:

<div class="card-footer btn btn-primary">
 ...
</div>

And add only:

<a href="<?php echo Route::_($link); ?>" class="btn btn-primary <?php echo $function ? ' select-link" data-function="' . $this->escape($function) : ''; ?>" aria-label="<?php echo Text::sprintf('COM_MODULES_SELECT_MODULE', $item->name); ?>">
  <?php echo Text::_('JSELECT'); ?>
</a>

It will make whole footer as "clickable" button

Thanks @Fedik
This is ready for testing now

I have updated the original post and title

Visually I like, however, it requires 2 wheel scrolls to see the entire list and to look for a module, your eyes scan across, diagonal, across, diagonal, and so on vs just up and down.

I agree with @Quy on this one. It is much easier to scan up and down.

Thats just for scanning titles. When you are also scanning the descriptions it is proven that a shorter line length is more effective.

In the end I use strg+f to find the module^^

Maybe really try to drop the select button? it will allow to display more rows at once:

can be something like (need to test):

<div class="card mb-4">
<a href="<?php echo Route::_($link); ?>" class="<?php echo $function ? ' select-link" data-function="' . $this->escape($function) : ''; ?>" aria-label="<?php echo Text::sprintf('COM_MODULES_SELECT_MODULE', $item->name); ?>">
  <div class="card-header"> ... </div>
  <div class="card-body"> ... </div> 
</a>
</div>

and css

#new-modules-list .card>a{
 text-decoration: none;
 color: inherit;
}

I cannot say about an accessibility,
Maybe can just try to test?

I am going to stick by the proposal here.

Minor styling when in a modal.

I prefer the current/list format because I can just focus on the module names and look to the right for the description. With the new format, I feel that my eyes are scanning all over the place.

I have tested this item ✅ successfully on 169ab46

@TobsBobs @ghazal Can you please test the latest again as changes have been made?

I really think this is a major ui improvement

I keep with my comment above: this forces to scroll a lot and read from one side of the screen to the other until the specific module is found.
What we have may not be as "beautiful" but it is certainly easier to work with.

based on comments elsewhere beautiful is what people want

To be honest I also prefer the list style like it is without this PR. But maybe I'm just a bit old fashioned.

@brianteeman I'd be interested in resurrecting this if you're happy to spend the time making it work with the new redesign?

I am happy to do it but no one here seemed to like it.

@wilsonge updated as requested

before

This choice may look much better if there are icons for the items, for example - Font-Awesome

Funny thing is that this is basically the same view from the other template that everyone raved about the design of.

Funny thing is that this is basically the same view from the other template that everyone raved about the design of.

I mean, something like this:

Thanks! I think the logical next step is to have screenshots in the boxes - similar to how we do things in the templates view - but this is a good first step and also incorporates the work done by the alternative template team

Thanks @wilsonge
Not sure I agree about the screenshots but if someone wants to give a try then fine by me