Skip to:

Opened 3 years ago

Closed 3 years ago

Last modified 3 years 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 3 years ago.
7783.2.patch (2.4 KB) - added by imath 3 years ago.
7783.3.patch (4.4 KB) - added by mercime 3 years ago.
"autoprefixered" css

Download all attachments as: .zip

Change History (12)

3 years ago

#1 @boonebgorges
3 years 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.

3 years ago

#2 @imath
3 years ago

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

#3 @DJPaul
3 years ago

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

#4 @imath
3 years ago

Thanks for your feedback @DJPaul

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

3 years ago

"autoprefixered" css

#5 @mercime
3 years 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.

3 years ago

#7 @imath
3 years 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 3 years ago by imath (previous) (diff)

#8 @imath
3 years 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
3 years 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.