AdvancedCustomFields / acf

Advanced Custom Fields
http://advancedcustomfields.com/
835 stars 170 forks source link

More space for group editing #712

Open justinkruit opened 1 year ago

justinkruit commented 1 year ago

The new layout is alright, but the "Reducing the Vertical Height of the Field Settings" fix has the opposite effect with the new sticky headers. On a 1920x1080 screen it's not even possible sometimes to see all the fields nicely. Please consider removing the sticky from .acf-admin-toolbar and .acf-headerbar. Even if only the sticky is being removed from .acf-admin-toolbar (since these are just shortcuts and not needed when editing the group) it woud create more needed space.

image image

justinkruit commented 1 year ago

And for people that want a quick fix for this, I included this css to my admin interface to make it a bit cleaner.

#wpcontent .acf-admin-toolbar {
  position: unset;
}
.acf-headerbar-field-editor {
  top: 32px;
  min-height: 0;
}
polevaultweb commented 1 year ago

Thanks @justinkruit - we'll get this improved in the next release.

Humanify-nl commented 1 year ago

I have to agree that having a double top bar of 144 pixels that takes almost 7,5% off the screen real estate is indeed a bit overkill.

And for people that want a quick fix for this, I included this css to my admin interface to make it a bit cleaner.

#wpcontent .acf-admin-toolbar {
  position: unset;
}
.acf-headerbar-field-editor {
  top: 32px;
  min-height: 0;
}

Your code didn't do it for me as the .acf-headerbar-field-editor is not there on other views, like the main groups screen. I'd say target the second bar with .acf-headerbar for a uniform solution.

This is my code in sass, with the wp var for admin bar so it scales correctly on mobile ( I'm not 100% sure if this is for theme.json themes only ).

#wpcontent {

    .acf-admin-toolbar {
        position: unset;
    }
    .acf-headerbar {
        top: var(--wp-admin--admin-bar--height);
        min-height: 0;
    }
}
black-eye commented 1 year ago

+1