[4.0] Dashboards

[brianteeman]

Before this PR In the dashboards of joomla 4 we have a situation where sometimes there is a large space between modules

This is because the modules generated by the system are in a different div than that of the more traditional modules.

By moving them all into the same div that problem disappears. I can't see any reason for them to be in different divs

Example Home Before

Example Home After

[richard67]

@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?

[richard67]

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

[brianteeman]

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

[richard67]

@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?

[brianteeman]

do it with another future one?

yes

[richard67]

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

[richard67]

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.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27777.}

[jwaisner]

I have tested this item ✅ successfully on 2275109

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27777.}

[richard67]

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

[richard67]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27777.}

[brianteeman]

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

[richard67]

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?

[richard67]

@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.

[dgrammatiko]

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...

[brianteeman]

I am not using anything

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

[dgrammatiko]

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...

[C-Lodder]

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

[richard67]

@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).

[brianteeman]

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

[wilsonge]

Hound should be impeached...

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

[richard67]

@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)?

[brianteeman]

appveyor has that problem a lot!!

[richard67]

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 :-(

[wilsonge]

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

[richard67]

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?

[richard67]

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

[brianteeman]

I agree

[Fedik]

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

[brianteeman]

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

[richard67]

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

[Fedik]

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

[richard67]

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

Good team work!

[richard67]

I have tested this item ✅ successfully on 5ff0fe7

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27777.}

[richard67]

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.

[Quy]

I have tested this item ✅ successfully on 5ff0fe7

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27777.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27777.}

[richard67]

@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.

[richard67]

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

[brianteeman]

Thanks. Making the impossible possible is nice