[4.0] Display of horizontal mod_articles_news module

[drmenzelit]

Pull Request for Issue #30426 .

Summary of Changes

Added a new scss file to collect all stuff related with modules
Added a display: grid (with flex fallback) to the class .mod-articlesnews-horizontal

Testing Instructions

Install PR and run npm ci or compile template scss.
Create some articles and a newsflash module with layout horizontal. The width is optimized for 3 articles side by side.

Actual result BEFORE applying this Pull Request

You see all articles as list one below the other

Expected result AFTER applying this Pull Request

You will see the articles side by side

Documentation Changes Required

[Magnytu2]

Good evening, it's great the choice of vertical or horizontal layout works.
But in the Main-top position, there is a two-column display. In the Top-a position, I have a display of my three articles. But if I choose 4 items, the fourth is on a second line.
I have the impression that there is a limit by the image size.
On the images, we can also see that they are cut which is a shame.

[drmenzelit]

As I wrote in my explanation, the width of the grid is optimized for 3 articles side by side. You can overwrite this on your own css. The image has a width of 100% of the column and the height is set to 250px (can be changed too) to avoid having images of different sizes. If the user has always images with the same proportions, it should not be a problem. But I know a lot of users having different sizes for images and then the news will look very weird.

[Magnytu2]

Sorry, I did not understand this instruction.
It's already very good on three columns, but a pity that it is not proportional.
For the images, we have a huge chance with the new media manager which allows us for example to modify all the images in 16/9.
I don't like templates that cut images because often we don't know how to use them. But that's just my opinion.

[chmst]

I have tested this item ✅ successfully on cddad60

I have tested this successfully. As it is described, it resolves the issue that the horizontal alignment was not possible. The styling will be a second step and is work in progress.

---

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

[hans2103]

I have tested this item ✅ successfully on cddad60

---

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

[infograf768]

Some thoughts.
Should'nt there be a default css for this module?
It would be overridden by any 3rd party template but Cassiopea would use it.

In this case the css could be, or included in a css in the module folder, or an instance created in media/mod_articles_news/css/template.css
This last one through an xml <media destination="mod_articles_news" etc.
or as it is a core module, added to build/ as is done for mod_languages

This would mean that the cassiopea template css would not be crowded with specific modules css when they are not used.

[drmenzelit]

I changed the mod_articles_news to use specific css independently from template. The css for mod_articles_news is now under media/mod_articles_news/css (after running npm ci).
I removed the cropping of the images, that can be added on the template if necessary.
I hope my commit is correct, I had some issues with my internet connection the last days :-)

[drmenzelit]

Thank you @infograf768 for the hint with mod_languages :-)

[astridx]

@infograf768 Some thoughts.
Should'nt there be a default css for this module?
It would be overridden by any 3rd party template but Cassiopea would use it.

I think css/scss is the V in MVC and should mainly be the template.

@infograf-768
This would mean that the cassiopea template css would not be crowded with specific modules css when they are not used.

Is this the way @dgrammatiko suggested here:
#30527 (comment) ? Do you mean with "would not be crowded" the place where it is saved or if it is loaded?

[infograf768]

Do you mean with "would not be crowded" the place where it is saved or if it is loaded?

Loaded.

[infograf768]

I think css/scss is the V in MVC and should mainly be the template.

Agree but "mainly" is the key here. If we have a parameter for a core module, I think it should be taken care of by default in core and obviously allow to be overridden by any template, which is easy as the css is loaded by the module tmpl only when used.

This is the case for mod_languages, plg_editors_codemirror, plg_system_highlight, etc. Some using scss instead of css (why this difference btw? Not sure).

[infograf768]

@drmenzelit
Concerning

$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseStyle('mod_modules', 'mod_articles_news/template.css');

I had to place this in /modules/mod_articles_news/tmpl/horizontal.php for the css to load when param is set to horizontal.

Also, I had to change minmax to 240px to get 3 columns instead of 2 here when module is displayed in main-top position and cassiopea is set to static. I understand that maybe voluntary.

I'm a bit confused between use of grid and flex, but that's certainly just me. ;)

[drmenzelit]

@infograf768
The question is if we really need to have a css file for horizontal and one for vertical, or if it is ok to have only one file with all necessary standard definition for the module.

Abot flex and grid, yes, sometimes I'm also confused ;-) The advantage of grid with auto-fit and minmax is that you don't need media queries. But it can be challenging to find the correct size.

[infograf768]

No idea if we need one css for vertical, but for sure here your new css have to be loaded in horizontal.php as they don't when loaded through default.php. Maybe one css file only (including vertical and horizontal) needs to be made if needed for vertical, but it should be loaded correctly in each tmpl

[drmenzelit]

@infograf768 yes, you are right! Corrected with the last commit

[infograf768]

I have tested this item ✅ successfully on daaaae4

Has to be tested again. Needs NPM to test

---

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

[chmst]

I have tested this item ✅ successfully on daaaae4

---

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

[Quy]

RTC

---

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

[infograf768]

Tks