Clean up References Dialog edit modal styling

backdrop-contrib / gin

Admin theme with a strong focus on improving the Editorial Experience.

https://backdropcms.org/project/gin

GNU General Public License v2.0

5 stars 2 forks source link

Clean up References Dialog edit modal styling #114

Open olafgrabienski opened 4 months ago

olafgrabienski commented 4 months ago

In the content edit form, when I add or edit another content item using References Dialog, the sidebar panel on the primary content edit form is rendered above the References Dialog overlay, making it unclear to which form the sidebar belongs (see screenshots below).

Changing z-index for the sidebar from 103 to 100 fixes the issue for me:

.gin--edit-form .edit-form--sidebar.page-wrapper .layout-region-node-secondary {
  z-index: 100;
}

(Some parts of commit https://github.com/backdrop-contrib/gin/commit/254bdb792d0a0301ea06e8660ce85b66df208358 look related.)

Expected behavior:

Actual behavior:

laryn commented 3 months ago

@olafgrabienski Is this sidebar z-index still an issue with the most recent code? It does look like References Dialog needs some cleanup as well, in terms of dialogs (size, placement, etc.)

Other notes about References Dialog:

Maybe we need to make sure the "sidebar edit details" don't apply within modals, it's messing the bottom of the modal edit display
There are some icons in use with RD that should be adjusted to use SVG and make sure they work with dark mode
RD should make modals display better in terms of size and placement (they display poorly with Seven as well)

olafgrabienski commented 3 months ago

Just tested: with the current code the issue is fixed for me, great!

And I agree, the display of References Dialog could need some love.

Maybe we need to make sure the "sidebar edit details" don't apply within modals (...)

Are you referring to the vertical tabs (Publishing actions, Authoring information, ...)? Those should stay, in my opinion, but I'm sure they can be styled in a more pleasant way.