? Language Change ? NPM Resource Changed ? Pending

User tests: Successful: Unsuccessful:

avatar korenevskiy
korenevskiy
9 Jun 2021

Dear colleagues. How many web designers create websites using the Cassiopeia template, redefining its blocks, creating a completely new design?
I do the same thing. The Cassiopeia template has accessibility, normalization, styles, and a framework. This template is ideal for starting even if you need to create a website with a completely different design.
But Cassiopeia is not adapted for use on a large scale with such capabilities.
Cassiopeia is used only with the design that is already laid down. This is bad. It can not be used as NORMALIZE.CSS is used.
We need to add this to the template:
//134 line
<jdoc:include type="modules" name="top" style="none" class="grid-child" />
//180 line
<jdoc:include type="modules" name="bottom" style="none" class="grid-child" />
The important thing is that you need to add these positions without the <DIV> container.
Using classes in a position
class="grid-child"
we specify that the position will have the default grid width that all blocks on the site have.
Class processing should be added to
//25 line \templates\cassiopeia\html\layouts\chromes\noCard.php
//25 line \templates\cassiopeia\html\layouts\chromes\card.php

$moduleAttribs['class'] = $module->position . ' no-card ' . ($params->get('moduleclass_sfx') ?
			(htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8')) : $attribs['class']);

Add the GRID-ARIA grid position to the styles.
.
Dear colleagues, thanks to the change. You can create modules on the site that are the width of the entire site, this can be a map of the route map. It can be a carousel of products. Agree that the driving directions and carousel are convenient when they are the entire width of the site.
Let's make more features for Cassiopeia!
By default, this position has only the width of the content.
This is also convenient when placing just ordinary modules.
If desired, we can place the gallery in the entire width of the site between the blocks.
90% of sites have a gallery in the site header with a width of 100% without affecting the main menu.
For example, the Xiaomi website.
https://www.mi.com/global/
https://www.solus.com/
to make a wide module, you need to add a class suffix full-width in the module settings of the admin panel.

avatar korenevskiy korenevskiy - open - 9 Jun 2021
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 9 Jun 2021
Category Front End Templates (site) NPM Change
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Title
Add 2 new positions in Template Cassipeia
[4.0]Add 2 new positions in Template Cassipeia
avatar korenevskiy korenevskiy - edited - 9 Jun 2021
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2021-06-09 15:38:24
Closed_By korenevskiy
Labels Added: NPM Resource Changed ?
avatar korenevskiy korenevskiy - close - 9 Jun 2021
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Status Closed New
Closed_Date 2021-06-09 15:38:24
Closed_By korenevskiy
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Status New Pending
avatar korenevskiy korenevskiy - reopen - 9 Jun 2021
avatar korenevskiy
korenevskiy - comment - 9 Jun 2021
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2021-06-09 18:20:42
Closed_By korenevskiy
avatar korenevskiy korenevskiy - close - 9 Jun 2021
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Status Closed New
Closed_Date 2021-06-09 18:20:42
Closed_By korenevskiy
avatar korenevskiy korenevskiy - change - 9 Jun 2021
Status New Pending
avatar korenevskiy korenevskiy - reopen - 9 Jun 2021
avatar korenevskiy
korenevskiy - comment - 10 Jun 2021

@richard67 When this commit will be in nigth building?

avatar richard67
richard67 - comment - 10 Jun 2021

@korenevskiy When it has 2 successful tests by human testers (not by you because you are the author) it will be set to RTC, which means "Ready to Commit" by a Joomla Bug Squad member or a maintainer, which may include a brief review, and after that it will be merged by a maintainer into the 4.0-dev branch here whenever appropriate, and then is it included in the next nightly after that.

avatar korenevskiy
korenevskiy - comment - 10 Jun 2021

Colleagues, I found a small mistake of my own.
Fixed it. Now everything works well.
You can add a class suffix full-width for module, after which the module will become full-width.

avatar drmenzelit
drmenzelit - comment - 11 Jun 2021

Thank you for your first pull request!

I see some problems with the new positions:

  • they work only with the chromes card and noCard from Cassiopeia, but not with the chromes from core
  • you can put only one module on each position

I would like to see other opinions here @chmst @dgrammatiko

In _css-grid.scss the position top is defined differently in the lines 7-18 and 42-51 (here is top between top-a and top-b).

avatar korenevskiy
korenevskiy - comment - 11 Jun 2021

_css-grid.I'll fix the CSS.
.
we will also insert the class attribute processing in layout core.
.
let's think about how to use more than one module in a position?

avatar richard67
richard67 - comment - 11 Jun 2021

In addition, don't forget to apply the same changes to error.php as yo do for index.php.

avatar drmenzelit
drmenzelit - comment - 11 Jun 2021

Something else: you need to add the name of the positions in the language file of Cassiopeia:
/language/en-GB/tpl_cassiopeia.sys.ini

avatar joomla-cms-bot joomla-cms-bot - change - 11 Jun 2021
Category Front End Templates (site) NPM Change Language & Strings Front End Templates (site) NPM Change
avatar korenevskiy
korenevskiy - comment - 11 Jun 2021

Thank you for your first pull request!

Thanks. This is my second PR. Now I understand a little bit how it works.
.
Please explain. In my account there is a JOOMLA-CMS, in this repository I see patches.
If I delete patches in my account, then for some reason these patches are deleted in the JOOMLA repository. Please tell me, After the DEV branch merges with the MASTER branch, then I can delete the repository in my account? so that the changes do not affect JOOMLA?


I didn't find the location of the chromes from core. Where is it?

avatar korenevskiy
korenevskiy - comment - 11 Jun 2021

My PR passed the tests. But after the tests, I don't see any positions in the Night Build.
And in which assembly do they appear?

avatar richard67
richard67 - comment - 11 Jun 2021

My PR passed the tests. But after the tests, I don't see any positions in the Night Build.
And in which assembly do they appear?

@korenevskiy I have explained you already in my comment above:

When it has 2 successful tests by human testers (not by you because you are the author) it will be set to RTC, which means "Ready to Commit" by a Joomla Bug Squad member or a maintainer, which may include a brief review, and after that it will be merged by a maintainer into the 4.0-dev branch here whenever appropriate, and then is it included in the next nightly after that.

avatar drmenzelit
drmenzelit - comment - 11 Jun 2021

You don't work directly in the repository, you should create a new branch where you do your changes. So you can work on several PRs, each one on an own branch.
You can delete your branch safely after your PR is merged into Joomla.

The module chromes are under /layouts/chromes

The Nightly Build will contain your changes after your PR get merged into core.

avatar korenevskiy korenevskiy - change - 11 Jun 2021
Labels Added: ?
avatar joomla-cms-bot joomla-cms-bot - change - 11 Jun 2021
Category Front End Templates (site) NPM Change Language & Strings Language & Strings Layout Front End Templates (site) NPM Change
avatar korenevskiy
korenevskiy - comment - 11 Jun 2021

In which file is Layout**.php called CHROME file?

avatar chmst
chmst - comment - 12 Jun 2021

Sorry, I don't understand your question: Maybe this is the answer: In the .xml files of modules, the user can choose a module style (chrome).


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34477.
avatar korenevskiy
korenevskiy - comment - 12 Jun 2021

Sorry, I don't understand your question: Maybe this is the answer: In the .xml files of modules, the user can choose a module style (chrome).

I ask where chrome rendering is done.

avatar chmst
chmst - comment - 12 Jun 2021

In libraries/src/Helper/ModuleHelper.php

avatar joomla-cms-bot joomla-cms-bot - change - 12 Jun 2021
Category Front End Templates (site) NPM Change Language & Strings Layout Language & Strings Layout Libraries Front End Templates (site) NPM Change
avatar RickR2H
RickR2H - comment - 17 Jun 2021

When Choosing the html5 layout in the module I get an Notice: Array to string conversion in \layouts\chromes\html5.php on line 26. Use the same code as used in: templates\cassiopeia\html\layouts\chromes\card.php

Add on line 16:

$attribs = $displayData['attribs'];

Next change the following:

$moduleAttribs['class'] = "$displayData[attribs][class]

to

$moduleAttribs['class'] = "$attribs[class]

This will fix the warning.

avatar RickR2H
RickR2H - comment - 17 Jun 2021

@korenevskiy The banner module in Cassiopeia is already full-width as I recall...

avatar korenevskiy
korenevskiy - comment - 18 Jun 2021

@korenevskiy The banner module in Cassiopeia is already full-width as I recall...

You're right, this position is full width. Is that enough? Of course, it is enough, provided that if you use the Cassiopeia template as is.
But a lot of people use this template as NORMALIZE. CSS, i.e. to create completely different sites, using this template as a base, since it has BOOTSTRAP, NORMALIZE, ACCESSIBILITY. In this template, the positions are very well placed and the grid is correctly placed.
.
And suppose you need to create a carousel of products, or create a carousel of partner logos?. Do you think it would be convenient for you to make a full-width carousel or just in the center of the site?
Using these positions, you can create banners, ads, and much more in the center of the site, making the site flexible for creating sites of any complexity.
Using these positions, you can create banners, ads, and much more in the center of the site, making the site flexible for creating sites of any complexity.
The CSS grid allows you to go to a new level in the layout. It's silly to use a grid but still limit yourself to the site width containers. Using the grid, we can take all the best that the grid has.
Or do you suggest using a grid similar to the Table tag, what is the point of a grid then?

You're right, I missed a mistake. I agree with you on how to fix it. After fixing it, I saw that the tests show an error. I can't figure out what the error is.
Please help me. How do I fix a test error?

avatar korenevskiy
korenevskiy - comment - 21 Jun 2021

@richard67

Is there anything I can do to help resolve the problem with the PR testing error?

avatar richard67
richard67 - comment - 21 Jun 2021

Is there anything I can do to help resolve the problem with the PR testing error?

No. As said, people already are working on it.

avatar korenevskiy
korenevskiy - comment - 22 Jun 2021

How do you think to place positions?
1:

Banner
TOP
Top-a, Top-b
left, component, right.....
bottom-a, bottom-b
BOTTOM
footer

OR

2:

Banner
Top-a, Top-b
TOP
left, component, right.....
BOTTOM
bottom-a, bottom-b
footer
avatar RickR2H
RickR2H - comment - 23 Jun 2021

I would go for:

Banner
TOP
Top-a, Top-b
left, component, right.....
bottom-a, bottom-b
BOTTOM
footer

avatar brianteeman brianteeman - test_item - 2 Jul 2021 - Tested successfully
avatar brianteeman
brianteeman - comment - 2 Jul 2021

I have tested this item successfully on c40229e


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34477.

avatar RickR2H
RickR2H - comment - 2 Jul 2021

I noticed same empty spaces in the module chromes. I would suggerst to do a check on the class suffix and add a extra space if required. Something like:

$modClassSuffix = htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8');
$moduleAttribs['class'] .= $modClassSuffix !== '' ? ' ' . $modClassSuffix : '';

space-in-module

avatar korenevskiy
korenevskiy - comment - 3 Jul 2021

@RickR2H

I noticed same empty spaces in the module chromes. I would suggerst to do a check on the class suffix and add a extra space if required. Something like:

img-2021-07-03-13-59-12
Before my changes, there was previously an empty space there. I changed chrome, but the presence of an empty space remained unchanged.
Do you think that you need to get rid of the space?

I'm afraid that if I remove the space. Then my PR needs to pass all the tests again. After that, he needs to pass the verification of participants.
If the PR is rejected in 4.0, the gap will still remain as it is originally in the code.
And the probability of rejection is high, since the release of Joomla 4 has gone beyond all deadlines. And the code managers simply do not have time to re-check and inspect the code.

avatar RickR2H
RickR2H - comment - 3 Jul 2021

I would get rid of the space. It much cleaner and an easy fix!

avatar brianteeman
brianteeman - comment - 3 Jul 2021

The space is correct!!

avatar richard67
richard67 - comment - 3 Jul 2021

The space is correct!!

Yes, that's right because the htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8'); is appended in any case.

If the moduleclass_sfx is empty, this results in the obsolete space at the end of the class.

This is not nice and could be fixed, but it is something which is not introduced by this PR, so I'd prefer that to be fixed separately in another PR.

avatar brianteeman
brianteeman - comment - 3 Jul 2021

It is correct because without it the moduleclass suffix is merged with the word module table!!! there is nothing to fix.

avatar richard67
richard67 - comment - 3 Jul 2021

It is correct because without it the moduleclass suffix is merged with the word module table!!! there is nothing to fix.

I have said nothing else. The space is needed when the moduleclass suffix is appended. But if that moduleclass is empty, it results in an unneccessary trailing space after all.

This could be fixed as follows:

$moduleAttribs['class'] = "$attribs[class] $module->position moduletable"
                        . ($params->get('moduleclass_sfx') ? ' ' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_QUOTES, 'UTF-8') : '')

But that's not really nice.

Another way would be just to do a $moduleAttribs['class'] = trim($moduleAttribs['class']); after that line in discussion.

avatar korenevskiy
korenevskiy - comment - 3 Jul 2021

1.There is no class with the position name in Chrome "Table", and there was not. Is this how it should be?
2. There is no "$params->get(sfxClass)" class in Chrome "Outline".

avatar korenevskiy
korenevskiy - comment - 3 Jul 2021

I tried to create feng shui. So that the first class is "Chrome", then the "position", and then the "$params->get(sfxClass)".
So that there is such an order everywhere.

avatar RickR2H RickR2H - test_item - 4 Jul 2021 - Tested successfully
avatar RickR2H
RickR2H - comment - 4 Jul 2021

I have tested this item successfully on c40229e


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34477.

avatar ricardo1709 ricardo1709 - test_item - 6 Jul 2021 - Tested successfully
avatar ricardo1709
ricardo1709 - comment - 6 Jul 2021

I have tested this item successfully on c40229e


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34477.

avatar RickR2H RickR2H - test_item - 7 Jul 2021 - Not tested
avatar RickR2H
RickR2H - comment - 7 Jul 2021

I have not tested this item.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34477.

avatar RickR2H RickR2H - test_item - 7 Jul 2021 - Tested successfully
avatar RickR2H
RickR2H - comment - 7 Jul 2021

I have tested this item successfully on c40229e


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34477.

avatar korenevskiy
korenevskiy - comment - 11 Jul 2021

@chmst
Please conduct a PR check.

avatar brianteeman
brianteeman - comment - 12 Jul 2021

it would be a real shame if this doesnt make it into 4.0 because of the pending language freeze.

avatar richard67 richard67 - change - 12 Jul 2021
Status Pending Ready to Commit
avatar richard67 richard67 - edited - 12 Jul 2021
avatar richard67
richard67 - comment - 12 Jul 2021

RTC


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34477.

avatar korenevskiy
korenevskiy - comment - 25 Jul 2021

@chmst Help, How fix this conflict?

avatar richard67
richard67 - comment - 25 Jul 2021

@korenevskiy I could help with that, but we have language freeze anyway, and this PR adds new language strings, so it has to wait until 4.0.1 at least, and so it doesn't really need to fix the conflicts now.

But if you want you can learn about fixing conflicts on GitHub here https://docs.github.com/en/github/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-on-github or on git command line on your local clone here https://docs.github.com/en/github/collaborating-with-pull-requests/addressing-merge-conflicts/resolving-a-merge-conflict-using-the-command-line .

avatar brianteeman
brianteeman - comment - 25 Jul 2021

@richard67 #34477 (comment)

It was RTC before the language freeze but no one merged it.

avatar richard67 richard67 - change - 25 Jul 2021
Labels Added: Conflicting Files ?
avatar richard67
richard67 - comment - 25 Jul 2021

@korenevskiy The conflict came from recently merged PR #34849 . I've allowed myself to solve it.

avatar richard67
richard67 - comment - 25 Jul 2021

It was RTC before the language freeze but no one merged it.

@brianteeman It was not long before, and I did not merge it because it seems bad practice to me if one sets RTC and then immediately merges.

avatar brianteeman
brianteeman - comment - 25 Jul 2021

not blaming anyone

avatar bembelimen
bembelimen - comment - 23 Aug 2021

TBH this looks for me like a real big band-aid for a bigger problem (the grid?)....especially if you put new positions not more than 3 lines above or below existing positions, which could be used too.

With Cassiopeia it's no problem to make full width pages without the new positions: https://www.joomla.org/4/en/

Here also this new class attribute is implemented for what reasons? to avoid divs? Does not convince me.

avatar korenevskiy
korenevskiy - comment - 26 Aug 2021

TBH this looks for me like a real big band-aid for a bigger problem (the grid?)....especially if you put new positions not more than 3 lines above or below existing positions, which could be used too.

With Cassiopeia it's no problem to make full width pages without the new positions: https://www.joomla.org/4/en/

Here also this new class attribute is implemented for what reasons? to avoid divs? Does not convince me.

Understand that this feature is needed only for individual elements, only for individual modules in full width.
So that the entire site is in normal width. At the same time, the individual modules were full-width.
I have had cases when it was necessary to define an additional alternative HEADER tag. The W3C specification allows multiple HEADER tags only if all but one tag is hidden.
I used different HEADERS for the mobile and desktop versions of the site.
At the same time, the accessibility of the site requires that the HEADER is always before the content, so that the TAB key follows the transition in the correct order.

avatar korenevskiy
korenevskiy - comment - 27 Aug 2021

With Cassiopeia it's no problem to make full width pages without the new positions: https://www.joomla.org/4/en/

please tell me, How do you think it is possible to make a full-width module?

avatar bembelimen
bembelimen - comment - 27 Aug 2021

With Cassiopeia it's no problem to make full width pages without the new positions: https://www.joomla.org/4/en/

please tell me, How do you think it is possible to make a full-width module?

I don't understand your question? What you see on the link are all full width modules.

avatar korenevskiy
korenevskiy - comment - 27 Aug 2021

@bembelimen
You suggest making the site width 100%. And then in each module (without exceptions), put the grid and the width of the module in a separate order.
I suggest not to make these settings.
I suggest that the width of the site should NOT be rubber (static). And only certain modules were rubber-only.

For example, I would have managed by creating another news module in a site with a static width. But my clients do not have the knowledge of setting the width of the module in the site. My clients can simply create a module and delete it.
Therefore, the task is so that all modules have a static width by default. And the width of the entire site was also static, while having a couple of exceptions for special modules with a rubber width.

avatar korenevskiy
korenevskiy - comment - 27 Aug 2021

And also. Thanks to these positions, I can create container modules that will contain other modules. thus creating a new structure of panels and blocks.
@bembelimen
How would you advise me to create a rubber module for a static-width website?

avatar RickR2H
RickR2H - comment - 27 Aug 2021

@bembelimen I think he just want's to escape the grid in total, In the banner position flex is active but set to flex-direction: column. I can see why it could be useful to have some extra positions which aren't affected by the grid,

avatar RickR2H
RickR2H - comment - 27 Aug 2021

@korenevskiy Please fix the conflicts. There has been some changes added in the template layout and styling.

avatar korenevskiy korenevskiy - change - 28 Aug 2021
Labels Added: ? Language Change ? ?
Removed: Conflicting Files ? ? ?
avatar korenevskiy korenevskiy - change - 28 Aug 2021
Labels Added: ? ?
Removed: ? ?
avatar korenevskiy
korenevskiy - comment - 29 Aug 2021

@korenevskiy Please fix the conflicts. There has been some changes added in the template layout and styling.

Fixed.

avatar korenevskiy
korenevskiy - comment - 30 Aug 2021

@bembelimen
Please advise me. How to create a fluid module with a width of 100% in a site with a static width and a static content width?

avatar korenevskiy
korenevskiy - comment - 5 Oct 2021

@RickR2H
What is "Release Lead Decision Queue"?

avatar N6REJ
N6REJ - comment - 5 Oct 2021

remember you can still have divs and break the parent container. Div is simply a block which is a good thing. The difference is wether your using a CLASS which will stay within its parent ID or ID which will be its own container.

avatar bembelimen
bembelimen - comment - 21 Jan 2022

As 4.0 is EOL and 4.1 is now the way to go, this function is easy possible with child template. So as stated above I'm not in favour of this PR and will close it. (see: https://www.youtube.com/watch?v=8lX44gS9QG8 )

avatar bembelimen bembelimen - change - 21 Jan 2022
Status Ready to Commit Closed
Closed_Date 0000-00-00 00:00:00 2022-01-21 13:08:08
Closed_By bembelimen
Labels Added: ? ?
Removed: ? ?
avatar bembelimen bembelimen - close - 21 Jan 2022

Add a Comment

Login with GitHub to post a comment