[4.0] Display of horizontal mod_articles_news module by drmenzelit · Pull Request #30527 · joomla/joomla-cms

drmenzelit · 2020-08-31T12:28:38Z

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

….0-dev

* [4.0] URL LANGUAGE CODE is not a prefix * modified desc as suggested

children

* fix * typo, (well nothing new) * Allow media fields in subforms - Cleanup Media field - Expose initilazation method of Bootstrpa Modlas to a Joomla.Bootstrap object - Initilise Modlas on the lifecycle of the Custom Element * Paleolithic js mode only in the legacy… * CS * Proper check * Pffff * Update joomla-field-media.w-c.es6.js

* make icon-circle use fa-circle * allows for including icon- in call

When we have fields displayed in columns with the label displayed above the input there is a width limit of 240px on the label. This results in long labels wrapping when it is not needed as the column is wider than 240px. In english we dont see this is many places but the easiest is in the __configure edit screen_ fields This simple PR changes the label width to 100% when the fields are displayed in columns like this. As this is an scss change you will need to `node build.js --compile-css` in order to test ### Before ### After

…30441) * [4.0] Add a parameter for back-to-top button in Cassiopeia Added a parameter to show / hide the back-to-top button in Cassiopeia. Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid. Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer. It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on). * Added smooth scrolling Add smooth scrolling taking in account the preferences of the user (reduced motion). Improve language file. * Correct height and position of back-to-top button * Correct code style * Correct code style 2 * Change smooth scrolling behavior to take in account reduced motion preferences * Language file corrected, language string changed to match others * Update language/en-GB/tpl_cassiopeia.ini Link instead button Co-authored-by: Brian Teeman <brian@teeman.net> * Update templates/cassiopeia/scss/blocks/_global.scss Comment for smooth scroll Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net>

* [4.0] update helptoc Removes the string for the expired cache page that no longer exists and removes it from the index displayed on the left hand side in the help page * api

) * add permissions-policy * add Permissions-Policy to the dropdown * alpha order

* Correct column name * Fix changing UCM state

Magnytu2 · 2020-08-31T16:22:33Z

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 · 2020-08-31T16:29:42Z

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 · 2020-08-31T16:38:42Z

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 · 2020-09-01T06:58:27Z

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 · 2020-09-02T08:46:11Z

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 · 2020-09-02T09:22:30Z

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.

User webAsset Manager to load specific css for module

drmenzelit · 2020-09-02T14:33:03Z

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 · 2020-09-02T14:38:13Z

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

astridx · 2020-09-02T19:13:11Z

@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 · 2020-09-03T05:48:34Z

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

Loaded.

infograf768 · 2020-09-03T06:13:35Z

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 · 2020-09-03T07:04:15Z

@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 · 2020-09-04T08:22:19Z

@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 · 2020-09-04T08:28:38Z

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 · 2020-09-04T08:43:12Z

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

infograf768 · 2020-09-04T08:45:35Z

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 · 2020-09-04T09:34:11Z

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 · 2020-09-04T15:20:12Z

RTC

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

infograf768 · 2020-09-04T17:42:28Z

Tks

…om_templates * '4.0-dev' of github.com:joomla/joomla-cms: (70 commits) [4.0] Child templates consistency (joomla#30387) [4.0] favicon changes to support child templates (joomla#30388) [4.0] Update Readme for Api tests (joomla#30539) [4.0] [Multilingual Status module] Adding displaying a possible error if URL Language Code is empty (joomla#30537) [4.0] Display of horizontal mod_articles_news module (joomla#30527) [4.0] Useless installation lang strings (joomla#30568) [4.0] Numbers not digits (joomla#30559) [4.0] Accessibility plugin position (joomla#30552) [4.0] fix for inherit fields (joomla#30557) [4.0] Redundant words (joomla#30555) add missing legend to fieldset (joomla#30528) [4.0] [a11y] add statement on found results (joomla#30535) [4.0] com_finder ul instead of dl for easier styling (joomla#30534) [4.0] Messages/Alerts: using icons instead of text as heading (joomla#30516) [4.0] Increase API Test Coverage (joomla#26722) [4.0] Implementing display of password requirements for frontend (joomla#30473) [4.0] FieldsHelper: Choose a first available category correctly (joomla#30268) Sort options (joomla#30531) Clear checkboxes on back button (joomla#30498) Update _icomoon.scss (joomla#30436) ...

@Quy

* First step to make newsflash horizontal * [4.0] Fix Alert double error display in Installation * seperating multiple messages with border top * Increase minimum length * Fix meter displaying complete message prematurely * Add strenthmeter attribute to installation * Change meter values to display green when password requirements are met * [4.0] {Cassiopea] Implementing Password length/meter * [4.0] Fix Fieldset description display (joomla#30435) * [4.0] Url Language Code is not a prefix (joomla#30440) * [4.0] URL LANGUAGE CODE is not a prefix * modified desc as suggested * [4.0] Implementing display of fieldset descriptions for fieldset children * Taking off description * scss cs * use @Quy suggestion * file cs * [4.0] Media field fix (joomla#30455) * fix * typo, (well nothing new) * Allow media fields in subforms - Cleanup Media field - Expose initilazation method of Bootstrpa Modlas to a Joomla.Bootstrap object - Initilise Modlas on the lifecycle of the Custom Element * Paleolithic js mode only in the legacy… * CS * Proper check * Pffff * Update joomla-field-media.w-c.es6.js * [4.0] Convert icon used for jgrid defaults to fas fa- (joomla#30464) * make icon-circle use fa-circle * allows for including icon- in call * move fa-fw to last class to fit convention (joomla#30469) * [4.0] Long labels wrapping (joomla#30474) When we have fields displayed in columns with the label displayed above the input there is a width limit of 240px on the label. This results in long labels wrapping when it is not needed as the column is wider than 240px. In english we dont see this is many places but the easiest is in the __configure edit screen_ fields This simple PR changes the label width to 100% when the fields are displayed in columns like this. As this is an scss change you will need to `node build.js --compile-css` in order to test ### Before ### After * Fix mod_articles_latest (joomla#30459) * [4.0] Add a parameter for "back-to-top" button in Cassiopeia (joomla#30441) * [4.0] Add a parameter for back-to-top button in Cassiopeia Added a parameter to show / hide the back-to-top button in Cassiopeia. Currently the footer appears when a module has been published on position "footer". And the back-to-top only appears if the footer is visible. Since the footer is part of the grid, it is not easy to move the back-to-top outside the grid. Now it is possible to decide to have a back-to-top or not. If yes, the footer will be rendered showing the button, independently if there is a module in the position footer. It is also possible to show only modules (switch back-to-top off) or modules and back-to-top (switch on). * Added smooth scrolling Add smooth scrolling taking in account the preferences of the user (reduced motion). Improve language file. * Correct height and position of back-to-top button * Correct code style * Correct code style 2 * Change smooth scrolling behavior to take in account reduced motion preferences * Language file corrected, language string changed to match others * Update language/en-GB/tpl_cassiopeia.ini Link instead button Co-authored-by: Brian Teeman <brian@teeman.net> * Update templates/cassiopeia/scss/blocks/_global.scss Comment for smooth scroll Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Brian Teeman <brian@teeman.net> * fix improper family name. (joomla#30481) * [4.0] update helptoc (joomla#30490) * [4.0] update helptoc Removes the string for the expired cache page that no longer exists and removes it from the index displayed on the left hand side in the help page * api * [4.0] Add new permissions-policy to the HTTPHeaders Plugin (joomla#30491) * add permissions-policy * add Permissions-Policy to the dropdown * alpha order * [4.0] Error when changing status of tagged content items (joomla#30466) * Correct column name * Fix changing UCM state * [4.0] br tag (joomla#30503) * [4.0] br tag In Joomla 4 we use `<br>` not `<br />` * bad grep * [4.0] Remove old search component (joomla#30506) * [4.0] Remove old search component The regular search component is not in J4 This pr removes reference to it in the help system `administrator/index.php?option=com_admin&view=help` * revert * [4.0] Help Dashboard (joomla#30508) * [4.0] Help Dashboard This PR makes multiple changes to the help dashboard. In order of importance they are. - Created a new section "Start Here" - Moved "Joomla Help" to the "Start Here" section to give it greater priority as it really is the first place you should look for help - Removed target=_blank from "Joomla Help" - Moved "Documentation Wiki" from "Resources" to the top of "Additional Help" * deduplicate * compass icon * Moved css for mod_articles_news to media folder User webAsset Manager to load specific css for module * Move web asset call to horizontal.php Co-authored-by: Jean-Marie Simonet <infografjms@gmail.com> Co-authored-by: Quy <quy@fluxbb.org> Co-authored-by: dGrammatiko <d.grammatiko@gmail.com> Co-authored-by: Bear <programming@hallhome.us> Co-authored-by: Brian Teeman <brian@teeman.net> Co-authored-by: Christiane Maier-Stadtherr <dev@chmst.de> Co-authored-by: Tobias Zulauf <zero-24@users.noreply.github.com> Co-authored-by: SharkyKZ <sharkykz@gmail.com>

drmenzelit added 3 commits August 10, 2020 16:40

Merge remote-tracking branch 'joomla-origin/4.0-dev' into 4.0-dev

020a67b

Merge remote-tracking branch 'joomla-origin/4.0-dev' into 4.0-dev

e8b340a

First step to make newsflash horizontal

1b9b0b7

joomla-cms-bot added NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Aug 31, 2020

drmenzelit and others added 25 commits August 31, 2020 15:32

Merge branch '4.0-dev' of https://github.com/joomla/joomla-cms into 4…

7b5a037

….0-dev

[4.0] Fix Alert double error display in Installation

a62b9ec

seperating multiple messages with border top

3c12057

Increase minimum length

da3e1e3

Fix meter displaying complete message prematurely

1f9bd25

Add strenthmeter attribute to installation

82247a1

Change meter values to display green when password requirements are met

494e4db

[4.0] {Cassiopea] Implementing Password length/meter

64b99dd

[4.0] Fix Fieldset description display (joomla#30435)

2fafa42

[4.0] Url Language Code is not a prefix (joomla#30440)

c5e2472

* [4.0] URL LANGUAGE CODE is not a prefix * modified desc as suggested

[4.0] Implementing display of fieldset descriptions for fieldset

9993a0b

children

Taking off description

9329d03

scss cs

d607b2b

use @Quy suggestion

2af296f

file cs

8ef7498

[4.0] Convert icon used for jgrid defaults to fas fa- (joomla#30464)

6f46ba4

* make icon-circle use fa-circle * allows for including icon- in call

move fa-fw to last class to fit convention (joomla#30469)

2afae5d

Fix mod_articles_latest (joomla#30459)

9b1d941

fix improper family name. (joomla#30481)

6524e71

[4.0] update helptoc (joomla#30490)

708f937

* [4.0] update helptoc Removes the string for the expired cache page that no longer exists and removes it from the index displayed on the left hand side in the help page * api

[4.0] Add new permissions-policy to the HTTPHeaders Plugin (joomla#30491

b4599d0

) * add permissions-policy * add Permissions-Policy to the dropdown * alpha order

[4.0] Error when changing status of tagged content items (joomla#30466)

aa70b24

* Correct column name * Fix changing UCM state

drmenzelit added 2 commits September 2, 2020 15:38

Merge branch '4.0-dev' into 4.0-dev-newsflash-horiz

c6e3411

Moved css for mod_articles_news to media folder

3495670

User webAsset Manager to load specific css for module

Move web asset call to horizontal.php

bcc033d

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Sep 4, 2020

infograf768 added this to the Joomla 4.0 milestone Sep 4, 2020

infograf768 merged commit c60be98 into joomla:4.0-dev Sep 4, 2020

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Sep 4, 2020

chmst mentioned this pull request Sep 5, 2020

Sample Data - Banner and Newsflash joomla/cassiopeia#55

Merged

drmenzelit deleted the 4.0-dev-newsflash-horiz branch December 9, 2020 14:20

Uh oh!

Conversation

drmenzelit commented Aug 31, 2020

Summary of Changes

Testing Instructions

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Documentation Changes Required

Uh oh!

Magnytu2 commented Aug 31, 2020

Uh oh!

drmenzelit commented Aug 31, 2020

Uh oh!

Magnytu2 commented Aug 31, 2020

Uh oh!

chmst commented Sep 1, 2020

Uh oh!

hans2103 commented Sep 2, 2020

Uh oh!

infograf768 commented Sep 2, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

drmenzelit commented Sep 2, 2020

Uh oh!

drmenzelit commented Sep 2, 2020

Uh oh!

astridx commented Sep 2, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

infograf768 commented Sep 3, 2020

Uh oh!

infograf768 commented Sep 3, 2020

Uh oh!

infograf768 commented Sep 3, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

drmenzelit commented Sep 4, 2020

Uh oh!

infograf768 commented Sep 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

drmenzelit commented Sep 4, 2020

Uh oh!

infograf768 commented Sep 4, 2020

Uh oh!

chmst commented Sep 4, 2020

Uh oh!

Quy commented Sep 4, 2020

Uh oh!

infograf768 commented Sep 4, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

13 participants

infograf768 commented Sep 2, 2020 •

edited

Loading

astridx commented Sep 2, 2020 •

edited

Loading

infograf768 commented Sep 3, 2020 •

edited

Loading

infograf768 commented Sep 4, 2020 •

edited

Loading