Button spacing

[gmclelland]

Just noticed the latest versions seems to make the buttons to close together.

[gmclelland]

That is the bottom buttons on page edit.

[rolandtoth]

Could you post a CSS snippet to fix? I don't have ProDraft (I guess it's that on the image you posted). Or is it another example where I can have look?

[gmclelland]

Yes, I am using ProDrafts. Looks like this might be an issue in adminThemeUikit, not AOS. When I disable AOS everything looks okay.

I noticed in /AdminThemeUikit/uikit/custom/pw/pw-jquery-ui-custom.lesspw-jquery-ui-custom.less in the AdminThemeUikit module it has the following:

// buttons with dropdown, consist of two .ui-buttons right next to each other: main + toggle
button.ui-button.pw-button-dropdown-main {
  // main button
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0 !important;
}

If I comment out the margin-right statement, everything looks good even with AOS enabled.

I'll need to check this some more.

[gmclelland]

It looks the only way to fix this is to add the following to AOS's css:

/* override AdminThemeUiKit css so the page edit hover dropdown buttons don't touch together */
.hoverDropdown .AdminThemeUikit button.ui-button.pw-button-dropdown-main {
  margin-right:10px !important;
}

/* override the rule above so page edit head hover dropdown buttons don't space out to much */
.hoverDropdown .AdminThemeUikit #pw-content-head-buttons .ui-button {
  margin-right: 0 !important;
}

I don't like using !important, but it was the only way to override AdminThemeUikit's !important

[rolandtoth]

I have added your code (unreleased yet), thanks, I hope it will fix this.

[rolandtoth]

Could you check that it's OK now?

[gmclelland]

The horizontal spacing of the buttons looks good. However, I did notice when you hover the buttons the additional button popup opens in the wrong position. Hmm... I thought that issue was recently fixed in AOS?

I guess that would be a separate issue?

[gmclelland]

FYI.. The issue with the button panel positioning is happening other sites that don't have ProDrafts installed.

[rolandtoth]

Coud you try replacing styles\aos.min.css from the repo? I could see the issue on the "Save" + "Save and keep unpublished" button combo (with Uikit theme) and this fix seem to solve this.

[gmclelland]

I downloaded and replaced the whole module from the newest commit on github and the problem went away.

Great job!

[rolandtoth]

Great, thanks!

[gmclelland]

I spoke too soon. It works in AdminThemeUikit and Reno, but in the "Default" classic theme the button panel is position the same as in my screenshot in this issue.

*Edit. This happens even on site that doesn't use ProDrafts.

[rolandtoth]

The issue was there for the Uikit theme too but appeared only if there was enough space on the left to the button for the menu. Try to zoom out a lot and see. Unfortunately the positioning is made by JavaScript so I couldn't properly override it with CSS.

I think I've applied a better fix now, please download again. I kept the separator line in front of the toggle part which was previously made hidden to make the button narrower a bit. The reason I removed this now is that this way it's easier to see that the menu origins from that part of the button, so it does not look out of place when it opens to the right (eg. in the Uikit theme when there's no space to the left). It's also better this way as the the module doesn't alter the original button design.

[gmclelland]

Just checked all 3 themes, that worked. I like how you updated it to use the default button styling.