Cover Image: Remove #item-buttons DIV if element has no content for Groups component

[r-a-y]

See ticket:6486#comment:11 and ​some discussion on Slack about this.

Attached patch works around this by removing all whitespace for the #item-buttons DIV for our custom cover-image-header.php template parts and uses the :empty CSS selector to remove the #item-buttons DIV if it is empty.

[imath]

Thanks for this improvement @r-a-y I would only suggest to make sure the user's #item-buttons:empty is also display:none because, else when you display the user's profile groups membership screen you don't have the same layout than the other user's screen. In the first case #item-buttons is not displayed, in all the other cases, it is.

See at the bottom of 6674.02.patch

[hnla]

Patch addresses standard item-headers empty item-actions in addition to newer cover image headers & moves ruleset to target item-headers generically.

[hnla]

oh right imath uploaded while I was preparing a newer patch.

My patch addresses members screens and group screens for both new cover image headers and standard headers to display none the empty item-action divs. Ruleset is changed in position and targets #item-buttons nested under #item-header as body.groups will overlook members screens.

The non cover image empty instances are less critical but still wrong in displaying an empty element.

[imath]

@hnla why do we have some styles relative to Autosize in your patch ?

eg: /* Autosize.js hack for IE10-11 - avoids jumpiness */

I think a lot of new css rules are targeting another ticket.

@r-a-y if think we can commit it making sure empty thing is applied to any single item header.
@hnla correct me if i'm wrong but i think the following css rule is only necessary within your patch

#buddypress #item-header #item-buttons:empty { 
 	display: none; 
}

[r-a-y]

Thanks imath and hnla.

I ran into an issue where if you're on your own member profile with a cover image, that the "active" timestamp would be truncated.

03.patch adjusts a few of the cover image inline styles to fix this.

[imath]

Looks good to me :)

[hnla]

My main concern was to address the item-buttons in normal headers, not just the cover-image ones, also I moved the ruleset from body.groups further in to the global header tokens so we would be sure we had styles applied for groups or members.

Not sure what if anything went wrong with my patch autosize?

...going to check r-a-y's patch which I'm sure is fine.

[hnla]

The only thing would be adding the same markup whitespace closing for standard headers so we can display: none those as well, however they aren't a visual layout issue as such, just poor form to output any markup that is empty, but can live with for now.

This is ready to commit.

[r-a-y]

In 10296:

Cover Image: Remove empty #item-buttons DIV with CSS.

To remove the empty #item-buttons DIV with CSS we have to remove all
whitespace from the DIV and then use the :empty CSS selector.

The other CSS declarations are some improvements with spacing and clearing
regarding the cover image block.

Hat-tip hnla, imath.

Fixes #6674.