BP Nouveau: group invites layout suggestion

[imath]

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)

[boonebgorges]

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.

[imath]

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

[DJPaul]

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

[imath]

Thanks for your feedback @DJPaul

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

[mercime]

"autoprefixered" css

[mercime]

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>
	</ul>
</nav>

[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.

[imath]

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

[hnla]

@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.