Changeset 12040

Timestamp:

05/02/2018 05:09:31 PM (6 years ago)

Author:

imath

Message:

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

Location:

trunk/src/bp-templates/bp-nouveau

Files:

• buddypress/common/js-templates/invites/index.php (modified) (2 diffs)
• css/buddypress-rtl.css (modified) (1 diff)
• css/buddypress.css (modified) (1 diff)
• sass/_nouveau_invites.scss (modified) (1 diff)

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

@@ -9 +9 @@
  */
 ?>
-<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' ); } ?>">
@@ -15 +14 @@
 </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">

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

@@ -2639 +2639 @@
         float: right;
         width: auto;
+    }
+}
+
+@media screen and (min-width: 37.5em) {
+    .buddypress-wrap #group-invites-container {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-columns: 25% auto;
+        grid-template-columns: 25% auto;
+        grid-template-areas: "group-invites-nav group-invites-column";
+    }
+    .buddypress-wrap #group-invites-container .bp-invites-nav {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+        grid-area: group-invites-nav;
+    }
+    .buddypress-wrap #group-invites-container .bp-invites-nav li {
+        display: block;
+        float: none;
+    }
+    .buddypress-wrap #group-invites-container .group-invites-column {
+        -ms-grid-row: 1;
+        -ms-grid-column: 2;
+        grid-area: group-invites-column;
     }
 }

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

@@ -2639 +2639 @@
         float: left;
         width: auto;
+    }
+}
+
+@media screen and (min-width: 37.5em) {
+    .buddypress-wrap #group-invites-container {
+        display: -ms-grid;
+        display: grid;
+        -ms-grid-columns: 25% auto;
+        grid-template-columns: 25% auto;
+        grid-template-areas: "group-invites-nav group-invites-column";
+    }
+    .buddypress-wrap #group-invites-container .bp-invites-nav {
+        -ms-grid-row: 1;
+        -ms-grid-column: 1;
+        grid-area: group-invites-nav;
+    }
+    .buddypress-wrap #group-invites-container .bp-invites-nav li {
+        display: block;
+        float: none;
+    }
+    .buddypress-wrap #group-invites-container .group-invites-column {
+        -ms-grid-row: 1;
+        -ms-grid-column: 2;
+        grid-area: group-invites-column;
     }
 }

trunk/src/bp-templates/bp-nouveau/sass/_nouveau_invites.scss

@@ -144 +144 @@
 }
 
+@media screen and (min-width: 37.5em) {
+
+    .buddypress-wrap {
+
+        #group-invites-container {
+            display: -ms-grid;
+            display: grid;
+            -ms-grid-columns: 25% auto;
+            grid-template-columns: 25% auto;
+            grid-template-areas: "group-invites-nav group-invites-column";
+
+            .bp-invites-nav {
+                -ms-grid-row: 1;
+                -ms-grid-column: 1;
+                grid-area: group-invites-nav;
+
+                li {
+                    display: block;
+                    float: none;
+                }
+            }
+
+            .group-invites-column {
+                -ms-grid-row: 1;
+                -ms-grid-column: 2;
+                grid-area: group-invites-column;
+            }
+        }
+    }
+
+}
+