Ticket #7783: 7783.patch

src/bp-templates/bp-nouveau/buddypress/common/js-templates/invites/index.php

@@ -8 +8 @@
  * @since 3.0.0
  */
 ?>
-<nav class="<?php bp_nouveau_single_item_subnav_classes(); ?>" id="subnav" role="navigation" aria-label="<?php esc_attr_e( 'Group invitations menu', 'buddypress' ); ?>"></nav>
 
 <h2 class="bp-screen-title <?php if ( bp_is_group_create() ) { echo esc_attr( 'creation-step-name' ); } ?>">
         <?php _e( 'Invite Members', 'buddypress' ); ?>
 </h2>
 
-<div class="subnav-filters group-subnav-filters bp-invites-filters"></div>
-<div class="bp-invites-feedback"></div>
-<div class="members bp-invites-content"></div>
+<div id="group-invites-container">
+        <nav class="<?php bp_nouveau_single_item_subnav_classes(); ?>" id="subnav" role="navigation" aria-label="<?php esc_attr_e( 'Group invitations menu', 'buddypress' ); ?>"></nav>
+
+        <div class="group-invites-column">
+                <div class="subnav-filters group-subnav-filters bp-invites-filters"></div>
+                <div class="bp-invites-feedback"></div>
+                <div class="members bp-invites-content"></div>
+        </div>
+</div>
 
 <script type="text/html" id="tmpl-bp-invites-nav">
         <a href="{{data.href}}" class="bp-invites-nav-item" data-nav="{{data.id}}">{{data.name}}</a>

src/bp-templates/bp-nouveau/css/buddypress.css

@@ -438 +438 @@
         margin-top: 0;
 }
 
+@media screen and (min-width: 37.5em) {
+        .buddypress-wrap #group-invites-container {
+                display: grid;
+                grid-template-columns: 25% auto;
+                grid-template-areas: "group-invites-nav group-invites-column";
+        }
+
+        .buddypress-wrap #group-invites-container .bp-invites-nav ul li {
+                display: block;
+                float: none;
+        }
+
+        .buddypress-wrap #group-invites-container .bp-invites-nav {
+                grid-area: group-invites-nav;
+        }
+
+        .buddypress-wrap #group-invites-container .group-invites-column {
+                grid-area: group-invites-column;
+        }
+}
+
 @media screen and (max-width: 46.8em) {
         .buddypress-wrap .single-screen-navs {
                 border: 1px solid #eee;

src/bp-templates/bp-nouveau/js/buddypress-group-invites.js

@@ -465 +465 @@
                         if ( $( this.el ).find( 'span' ).length ) {
                                 $( this.el ).find( 'span' ).html( span_count );
                         } else {
-                                $( this.el ).find( 'a' ).append( $( '<span></span>' ).html( span_count ) );
+                                $( this.el ).find( 'a' ).append( $( '<span></span>' ).html( span_count ).addClass( 'count' ) );
                         }
                 },