rolandtoth/AdminOnSteroids

Button spacing

gmclelland opened this issue · 14 comments

gmclelland commented

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

buttons

gmclelland commented

That is the bottom buttons on page edit.

rolandtoth commented

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 commented

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 commented

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 commented

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

  • 👍1
rolandtoth commented

Could you check that it's OK now?

gmclelland commented

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?

position

I guess that would be a separate issue?

gmclelland commented

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

rolandtoth commented

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 commented

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

Great job!

rolandtoth commented

Great, thanks!

gmclelland commented

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 commented

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 commented

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

  • 👍1