Module chrome without card header - edit icon overlaps dropdown buttons and texts about cassiopeia HOT 19 OPEN

I am now preparing an eclipse project of this Cassiopea stuff.
I may look at things tomorrow.

from cassiopeia.

Oops.

from cassiopeia.

I would prefer that the edit symbol is always visible , not only on hover.

from cassiopeia.

Ping @infograf768 : Could you check @chmst 's previous comment?

from cassiopeia.

I don't remember if we had a discussion on this when it was implemented.
I sort of think that it should behave like the article or contact and be present when user can edit.
But, in some cases, it would break the display so much that I have mixed feelings.

the best solution may be to display the tooltip up, at the top limit of the module. Not sure we can. And, in any case not sure either our frontend tooltips are a11y.

from cassiopeia.

For now the tooltip placement is "auto"
If we modify to "top", we will get (mobile screencapture)

It's automatically contained in the window btw.

from cassiopeia.

As far as I understand, the problem is not the tool tip but the icon. It overlaps the metismenu toggle when using a metismenu in the sidebar, e.g. by moding the "Main Menu Blog" module to there.

from cassiopeia.

That's a totally other issue.

from cassiopeia.

I nevertheless suggest to change tip placement as the issue of the tip covering up the first link in other types of modules is present. (In 3.x it is set to top by default)
Also, we have a huge margin-left for the <ul> in the modules in general we should get rid of and I could not find where that comes from.

I could solve it by using (for LTR). But it has to be more specific as this mod-list is used in other modules and breaks them.

.mod-list {
    margin-left: -2rem;
}

To solve the overlap problem, some changes in the css will make it

.btn.jmodedit
{
  z-index: 1001;
  display: block;
  position: absolute;
  top: -1rem; // proposal
  right: -1rem; // proposal
}
html[dir=rtl] .btn.jmodedit
{
    right: auto;
    left: -1rem; //proposal
}

This gives (modified css a bit vs the animated gif below)

and use

I remark that the submenu is hardly differentiated from its parent.

Note

With metismenu we have lost the edit menu item possibility.

from cassiopeia.

The edit buttons are added via frontendediting.js. This makes changes difficult. And in my opinion it is not userfreindly that the edit button is visible only with hover.

A good an simple and a11y solution could be (in core as this is rendering modules): If editing a module is possible: Add a new line on top of the module, containig the edit icon + edit label as in articles and contacts.

If this is not possible, adding some more padding-top to a metismenu in the sidebars could do it too.

from cassiopeia.

Same issue here on small screen: It is not possible to open the menu - the edit button is nearyl invisible on the dark background.

from cassiopeia.

If this is not possible, adding some more padding-top to a metismenu in the sidebars could do it too.

I am afraid it is the only way to go. But it should be done only when frontendediting is set.
I saw no way for now to render an edit icon without the js. And no way to integrate menu item edit when using metismenu.

from cassiopeia.

@chmst
Only way I found is to totally get rid of the js, modifying the layout and also the chromes.

Proof of concept (did not correct all css)

from cassiopeia.

If we add a div (100% width) bove the module content, it looks like this:

from cassiopeia.

We could get rid of the part of the js concerning the edit module and modify frontediting_modules.php. This would work with the card chrome in the side positions but would fail with the system chromes.

from cassiopeia.

We must get rid of the jQuery part at least in the frontend, as this is not accessible. It is not about chromes but about the layout in cms. Added label joomla-cms

from cassiopeia.

It is not only vertical menu but every module without card header. Must be solved in joomla cms and imho it is a release blocker. But this is soething I cannot decide.

from cassiopeia.

I am not sure if it is cassiopeia or core but terrible wrong

from cassiopeia.

https://issues.joomla.org/tracker/joomla-cms/30639

from cassiopeia.