Skip to:
Content

BuddyPress.org

Opened 17 months ago

Closed 17 months ago

Last modified 17 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
Cc:

Description

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 :

https://cldup.com/J7AP8pCJOO.png

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

Download all attachments as: .zip

Change History (12)

@imath
17 months ago

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

@imath
17 months ago

#2 @imath
17 months ago

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

#3 @DJPaul
17 months ago

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

#4 @imath
17 months ago

Thanks for your feedback @DJPaul

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

https://cldup.com/Vhfjq4aJ9K.png

@mercime
17 months ago

"autoprefixered" css

#5 @mercime
17 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>
	</ul>
</nav>

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


17 months ago

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

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