Skip to:
Content

BuddyPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 5 years ago

#6674 closed enhancement (fixed)

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

Reported by: r-a-y Owned by: r-a-y
Milestone: 2.4 Priority: normal
Severity: normal Version:
Component: Templates Keywords: has-patch
Cc:

Description

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.

Attachments (5)

6674.01.patch (1.9 KB) - added by r-a-y 6 years ago.
6674.02.patch (2.2 KB) - added by imath 6 years ago.
6674-02.patch (5.3 KB) - added by hnla 6 years ago.
Patch addresses standard item-headers empty item-actions in addition to newer cover image headers & moves ruleset to target item-headers generically.
twentysixteen.png (77.9 KB) - added by r-a-y 6 years ago.
6674.03.patch (2.8 KB) - added by r-a-y 6 years ago.

Download all attachments as: .zip

Change History (15)

@r-a-y
6 years ago

#1 @imath
6 years ago

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

@imath
6 years ago

@hnla
6 years ago

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

#2 @hnla
6 years ago

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.

This ticket was mentioned in Slack in #buddypress by r-a-y. View the logs.


6 years ago

#4 @imath
6 years ago

@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
6 years ago

@r-a-y
6 years ago

#5 @r-a-y
6 years ago

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.

Patch also addresses hnla's concern of using overflow: hidden for the #item-buttons DIV. See ticket:6672#comment:7.

Last edited 6 years ago by r-a-y (previous) (diff)

#6 @imath
6 years ago

Looks good to me :)

#7 @hnla
6 years ago

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.

#8 @hnla
6 years ago

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.

#9 @r-a-y
6 years ago

  • Owner set to r-a-y
  • Resolution set to fixed
  • Status changed from new to closed

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.

#10 @DJPaul
5 years ago

  • Component changed from Appearance to Templates
Note: See TracTickets for help on using tickets.