@brianteeman The useless space has gone, but now ordering is different so the update checks are a bit out of focus because you have to scroll down to see them. Beside this I like the new look. Maybe we just can reorder the modules a bit?

P.S. And thanks for quickly showing the guys what can be done when just someone does it.

the ordering is just css - you just have to change the direction

@brianteeman "you just have to change the direction" ... "you" means me? Or one? Will you do that? Or shall we test this PR here as is and do it with another future one?

do it with another future one?

yes

@brianteeman You know who can do that? I am not an (s)css expert.

I have tested this item ✅ successfully on 2275109

Dashboards are not wasting empty space anymore.

Ordering of modules is different now so the update checks are a bit out of focus because you have to scroll down to see them.

But this can be fixed with a future PR.

I have tested this item ✅ successfully on 2275109

@brianteeman I trust you that ordering can be easily changed.

RTC

Removing the rtc and asking for help on the scss (I might be wrong that direction can be changed here)

Removing the rtc and asking for help on the scss (I might be wrong that direction can be changed here)

@C-Lodder Can you advise here?

@brianteeman It seems the bot has added back RTC for some reason. not sure if related to my comment - I only commented on HitHub - but there is a coincidence in time.

the ordering is just css

That would have been the case if Joomla was using the Platform and the CSS Grid Layout instead you're using an extremely opinionated and outdated grid system which doesn't support such things without editing the html. All this B/C break just to be in the same position the project was 10 years ago. Sad...

I am not using anything

If you dont have anything constructive to say ....

I've already said something constructive, use CSS Grid which allows you do what you want. Bootstrap doesn't. Honestly I keep saying this for years...

@richard67 Doesn't the ordering derive from the "Ordering" parameter for each module?

@alikon It seems that whenever someone comments on this PR, a previously removed RTC label is added back. Have you removed it by changing status in the issue tracker, or just by removing the label on GitHub? (sorry @brianteeman if off topic, let me know when we shall continue to discuss that elsewhere).

@C-Lodder yes it does. I was thinking we can change from column ordering to row ordering

The dashboard is using column-count so the option does not exist to simply change direction. They will always flow as you would expect paragraphs in a multi-column page.

CSS grid is not really the solution either as it does not support a true masonry layout. The only CSS solution is probably flex. A bit of code involved but the markup would remain the same.

Actually, you probably could use CSS grid although it is a bit hacky. Set 2 columns and then use :nth-child() to add every second item to the second column.

flex is exactly what i was thinking of

The solution with grid and flex would be quite similar (both using :nth-child()).

This should help... https://tobiasahlin.com/blog/masonry-with-css/

Using CSS grid would be little easier and more versatile. If you wish, this can be merged and I will create a follow-up PR.

that would be the ideal - thanks

@brianteeman Shall I add back RTC?

Shall I add back RTC?

Imho not until a full solution is proposed.

Imho not until a full solution is proposed.

@infograf768 what are we missng?

@infograf768 what are we missing?

@richard67 explained it already
Updates are now far down and need to scroll.
I will have for example Popular Articles at the same level as Site

This PR just makes it more difficult to access the important stuff just to take off a bit of free space.

Using CSS grid would be little easier and more versatile. If you wish, this can be merged and I will create a follow-up PR.

The solution I offered would move items listed first to the top of the dashboard

The solution I offered would move items listed first to the top of the dashboard

Great. Then let's close this one and have a single PR doing what it should (and by default) so that we can really test the final result.

Unfortunately, I'm gonna have to renege on this. I've explored all possible CSS only solution and they all come with limitations that make it unsuitable (eg. require a set height on the container). We had come to the same conclusion with the previous atum template but I had somehow forgotten it was not possible.

As before, the only possible solutions is to either create 2 positions, one for each column or use javascript.

As before, the only possible solutions is to either create 2 positions, one for each column or use javascript.

Or change the ordering in the sql so that a fresh install doesnt have the issue @richard67 raised? will look at that soon

@ciar4n Thanks for checking etc

OK. In this case and unless someone proposes a useful alternative. I suggest to close this PR.
We can live with a bit of wasted space.

I have tested this item 🔴 unsuccessfully on 2275109

This is kind of masonry layout, "row flow" possible only with js

As before, the only possible solutions is to either create 2 positions, one for each column or use javascript.

@ciar4n Maybe a little JS does not hurt here 😉
https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/#article-header-id-5

@infograf768 please don't be so negative - there are many ways to skin a cat. It is fine to say that you don't agree with the code. It is fine to say you don't see the need. Marking the code as an unsuccessful test on that criteria is not ok. A test should mark if the code does what it says and nothing more. A test is a factual statement and not an opinion. If you don't want to mark something as tested because you don't agree then that is also fine.

Or change the ordering in the sql so that a fresh install doesnt have the issue @richard67 raised? will look at that soon

@brianteeman You will have an issue there if a user adds/removes any modules. column-count will alter the layout so both columns are equal, potentially moving modules from the top.

@Fedik Yes I think a little JS is perfectly acceptable here. I didn't fully understand the JS involved which is why I didn't attempt it myself.

@Fedik is this something you are able to investigate?

I didn't fully understand the JS involved which is why I didn't attempt it myself.

Need to calculate grid-row-end for every cell, somehow
Here more detailed explanation https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb

is this something you are able to investigate?

I can try to check when will get some time

@Fedik Thanks - in the meantime I will read that blog post you linked to

Is this acceptable?

https://codepen.io/brianteeman/pen/OJVJLLG

There is no change to the markup. Just css and js

Looks good (I guess the patch would just change the uneeded space). Would we still be able to modify the order of modules?

yes because this does not touch the markup

And of course with this PR in general you are able to change the order of ALL the modules on the home dashboard in one group whereas before this PR you could only change them within two groups

Ignore Hound, the JavaScript need to be optimized a bit,
I try look in the evening

ok thanks

@Fedik please use the native resizeObserver (if supported) or fallback to resize (either way you need to debounce a bit)

hm, I try one more time 😄

Hound should be impeached...

Hound should be impeached...

Unfortunately hound has a majority in the senior chamber of release leads ;)

@wilsonge After the Hound was happy, AppVeyor got mad. Chocolatey faild to install php or something like that. Seems not to be related to this PR. Maybe the Hound has eaten all the Chocolate(y)?

appveyor has that problem a lot!!

If those test would work reliably we could say we don't give RTC when tests bad .. but like it is with that lotto game we can't do that, it would block so many PRs. Sometimes it helps to retrigger the CI tests by pulling in the base branch, but if nothing happens on the base branch that doesn't help. Only way then is to commit a dummy change. It's not really fun to work like that :-(

PHP Is timing out installing :( We can probably bump that timeout up

I've just tested but think it could be optimized. CSS or JS experts, whatever needed here, please check and advise.

When having my browser window in a size similar as shown in all the screnshot above, I see now following:

I.e. buttons are too big, all is in 1 column, so I have to scroll down to see the update checks.

When I enlarge browser width to covering almost the full screen (which is 1920px wide!!!) the buttons look ok, i.e. buttons are like before the PR, and I can see all update checks with 1 look:

So it seems that below a certain window width it switches to 1 column, but this change happens too early, i.e. when browser window is still big enough to show it nice in 2 columns. It should change on smaller width than like it is now.

Beside this, maybe it would be better to exchange position of "Site" and "Update Checks" (ordering of the modules) so the update checks always come first and so are on top when 1 column only?

So PR works, but it could be optimized a bit as described in my previous comment.

I agree

So it seems that below a certain window width it switches to 1 column

this with it:
grid-template-columns: repeat(auto-fill, minmax(700px,1fr));
if the cell cannot fit 700px it goes 100% (1fr)

I found 700px work good for my screen and mobile, but I totally forgot about "middle sizes"

Need try to play with it a bit, maybe something down to 560

Yeah. That's the line to play with. And don't forget it's different on the system and help pages

@Fedik It seems your mobile phone display is bigger than the parking space I have for my car 😄

or just change it to more simle:
for large:
grid-template-columns: 1fr 1fr;
for small:
grid-template-columns: 1fr;

Hey, seems to be cool now, I like the result:

Good team work!

I have tested this item ✅ successfully on 5ff0fe7

Really nice. We can make future PR to move upate checks to the top by module order. But so or so I love how the modules and the buttons mode and scale now when reducing display width.

I have tested this item ✅ successfully on 5ff0fe7

RTC

@brianteeman Shall we wait a bit for the requested reviews by @rdeutz and @wilsonge before we merge?

Update: I have no problem to merge it, it is awesome, but you had requested those reviews so I thought I ask if you are still waiting for them.

Of course if @wilsonge merges this it will be as good as review. ;-)

Thanks. Making the impossible possible is nice