Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Description
The primary goal of this issue is to improve on the last change to the Frontend Editing hover styling.
Make outline more subtle and fix visible accessibility text
The hover styling should be kept subtle and to a minimum in order to leave the content exactly as it is, to simply provide a hint of what can be done.
This includes making the outline thinner, as well as keeping the design similar to the rest of the UI
Fix outline for nested elements
When elements are nested, the outline causes a "jiggle", causing the inner paragraphs to move. It would be optimal to prevent any sort of shift in content when moving around the page.
Fix outline for parent elements
With a lot of nesting, there are too many outlines. Only the current outline should be highlighted, the outer ones should be more subtle and less visible. We also need to prevent all editing icons from being visible inside a nested paragraph. Only the currently highlighted paragraph should be focused.
| Comment | File | Size | Author |
|---|---|---|---|
| #18 | Embedded-Paragrpahs-still-jiggling.gif | 284.54 KB | SirClickalot |
| #2 | nested-outline.png | 152.99 KB | bbruno |
| #2 | font-end-editing-jiggle.gif | 102.08 KB | bbruno |
Issue fork frontend_editing-3436377
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
bbruno CreditAttribution: bbruno at 1xINTERNET commentedComment #3
bbruno CreditAttribution: bbruno at 1xINTERNET commentedComment #4
bbruno CreditAttribution: bbruno at 1xINTERNET commentedComment #5
bramvandenbulcke CreditAttribution: bramvandenbulcke commentedI agree with the remarks.
The plus icons at the top and bottom of the element are certainly an improvement. Also the icons are nicer than the 1.5x icons. But the 'jiggle' (elements moving) when hovering over the elements is annoying.
Comment #7
bbruno CreditAttribution: bbruno at 1xINTERNET commentedComment #8
bbruno CreditAttribution: bbruno at 1xINTERNET commentedComment #10
a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commentedComment #11
SirClickalotI have noticed that latest release (1.61) we are still seeing plenty of 'jiggling' with embedded Paragraphs...
Comment #12
a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commentedComment #13
bbruno CreditAttribution: bbruno at 1xINTERNET commentedComment #15
bbruno CreditAttribution: bbruno at 1xINTERNET commentedRemoved the what seems to be unnecessary
margin: 0;styling for nested elements which could be causing 'jiggling' if the element already had an existing margin applied to it.Comment #16
a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commentedLooks like it was the problem, I have merged the MR and it will be added to the next release.
Comment #18
SirClickalotI don't think this is entirely fixed, it's better, but not fixed.
Here is a recording of 1.62 in action (showing the new default editing bounds colour)...
I think the residual jiggling is because the
.common-actions-containercontainer has either a bottom-padding or a bottom-margin or something like that whereas it should simply 'appear' over the underlaying markup and not attempt to push anything out of the way.I have highlighted the first line to accentuated that it seems to be the main body of the paragraph that is affected as opposed to the title.
I appreciate that some might see this is fine tuning but we think it's really important that any front-end editing tools never change the appearance of the underlying content even a tiny bit!
Comment #19
a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commentedComment #20
SirClickalotI have looked into this a bit deeper and I can confirm now that I think it is actually to the theming of the
div.add-paragraphs.Deleting that
divfrom that markup under browser inspection completely removes all remnants of 'jiggling'!Comment #22
bbruno CreditAttribution: bbruno at 1xINTERNET commentedThanks SirClickalot for that last comment, it helped with reaching a possible solution since we can not replicate your issue. Updated the MR with a fix that should hopefully sort this out. Up for review.
Comment #24
a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commentedMR was merged, SirClickalot please verify if this helps. You can use 1.x-dev version of the module to check that, no release was done yet.
Comment #25
SirClickalotConfirmed, all fixed, no more jiggling!
Thank you
Comment #26
a.dmitriiev CreditAttribution: a.dmitriiev as a volunteer and at 1xINTERNET commented