Skip to:

Opened 19 months ago

Closed 19 months ago

Last modified 19 months ago

#7783 closed defect (bug) (fixed)

BP Nouveau: group invites layout suggestion

Reported by: imath Owned by: imath
Milestone: 3.0 Priority: normal
Severity: normal Version:
Component: Templates Keywords: has-patch commit


For the Group Invites UI, It seems weird to me to have the "Invite Members" title under the UI nav to switch between Friends/Members/Send invites screens.

I suggest to move it over the nav and to reorganize the UI in two columns :

  • left > nav
  • right > members selection / Invites sending.

Here's a screenshot of my suggestion :

Also, there was a missing 'count' class to the span that I added to the patch that can be committed separately (for the buddypress-group-invites.js file)

Attachments (3)

7783.patch (3.1 KB) - added by imath 19 months ago.
7783.2.patch (2.4 KB) - added by imath 19 months ago.
7783.3.patch (4.4 KB) - added by mercime 19 months ago.
"autoprefixered" css

Download all attachments as: .zip

Change History (12)

19 months ago

#1 @boonebgorges
19 months ago

Oops, I implemented part of 7783.patch in [12025]. See #7787, which is similar to this ticket in spirit.

If we go with the suggestion made by @imath here - which I agree makes a lot of sense - then we can close #7787 as a duplicate.

19 months ago

#2 @imath
19 months ago

Ahah, no problem :) I just added 7783.2.patch that removes this part of the patch ;)

#3 @DJPaul
19 months ago

I like the screenshots on this ticket of the design change.

#4 @imath
19 months ago

Thanks for your feedback @DJPaul

@hnla, we'll also need to improve the pagination layout on mobile i (& @mercime) think:

19 months ago

"autoprefixered" css

#5 @mercime
19 months ago

7783.3.patch just added vendor prefixes based on last 2 browser versions as an example for #7791 using gulp in a project.

Noticed that we have empty links rendered in the Group Invitations Menu

<nav class="bp-navs bp-subnavs no-ajax group-subnav bp-invites-nav" id="subnav" role="navigation" aria-label="Group invitations menu">
	<ul class="subnav">
		<li class="current"><a href="#" class="bp-invites-nav-item" data-nav="friends">My Friends</a></li>
		<li><a href="#" class="bp-invites-nav-item" data-nav="members">All Members</a></li>
		<li class="pending"><a href="#" class="bp-invites-nav-item" data-nav="invited">Pending Invites</a></li>

This ticket was mentioned in Slack in #buddypress by imath. View the logs.

19 months ago

#7 @imath
19 months ago

  • Keywords commit added; dev-feedback removed
  • Owner changed from hnla to imath

Thanks @mercime for the updated patch. I'm going to close this ticket, but i don't forget we need to work on empty links and mobile layout. I think these 2 areas still need to be improved for the Messages UI. So I'll open a new ticket to improve them for these two Backbone based UI.

Last edited 19 months ago by imath (previous) (diff)

#8 @imath
19 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 12040:

BP Nouveau: display the Group Invites UI navigation vertically

On desktop screens, the Group Invites UI navigation is now displayed vertically at the left of the friends/members list or the send invites form. This new position makes it easier to navigate between the different screens and improve the visibility of the send invites navigation item.

Props mercime, boonebgorges.

Fixes #7783
Fixes #7787

#9 @hnla
19 months ago

@imath @mercime
You'll need to pay attention to the styles if making these sorts of changes. The left column needs to ensure it's not picking up styles applied for the vert or tabbed navs.

Note: See TracTickets for help on using tickets.