Improve Frontend Editing UI/UX including nested elements

Created on 27 March 2024, 9 months ago
Updated 29 April 2024, 8 months ago

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.

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇵🇹Portugal bbruno Poland

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024