Skip to:
Content

BuddyPress.org

Changeset 12040


Ignore:
Timestamp:
05/02/2018 05:09:31 PM (2 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:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/invites/index.php

    r12032 r12040  
    99 */
    1010?>
    11 <nav class="<?php bp_nouveau_single_item_subnav_classes(); ?>" id="subnav" role="navigation" aria-label="<?php esc_attr_e( 'Group invitations menu', 'buddypress' ); ?>"></nav>
    1211
    1312<h2 class="bp-screen-title <?php if ( bp_is_group_create() ) { echo esc_attr( 'creation-step-name' ); } ?>">
     
    1514</h2>
    1615
    17 <div class="subnav-filters group-subnav-filters bp-invites-filters"></div>
    18 <div class="bp-invites-feedback"></div>
    19 <div class="members bp-invites-content"></div>
     16<div id="group-invites-container">
     17
     18    <nav class="<?php bp_nouveau_single_item_subnav_classes(); ?>" id="subnav" role="navigation" aria-label="<?php esc_attr_e( 'Group invitations menu', 'buddypress' ); ?>"></nav>
     19
     20    <div class="group-invites-column">
     21        <div class="subnav-filters group-subnav-filters bp-invites-filters"></div>
     22        <div class="bp-invites-feedback"></div>
     23        <div class="members bp-invites-content"></div>
     24    </div>
     25
     26</div>
    2027
    2128<script type="text/html" id="tmpl-bp-invites-nav">
  • trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css

    r12013 r12040  
    26392639        float: right;
    26402640        width: auto;
     2641    }
     2642}
     2643
     2644@media screen and (min-width: 37.5em) {
     2645    .buddypress-wrap #group-invites-container {
     2646        display: -ms-grid;
     2647        display: grid;
     2648        -ms-grid-columns: 25% auto;
     2649        grid-template-columns: 25% auto;
     2650        grid-template-areas: "group-invites-nav group-invites-column";
     2651    }
     2652    .buddypress-wrap #group-invites-container .bp-invites-nav {
     2653        -ms-grid-row: 1;
     2654        -ms-grid-column: 1;
     2655        grid-area: group-invites-nav;
     2656    }
     2657    .buddypress-wrap #group-invites-container .bp-invites-nav li {
     2658        display: block;
     2659        float: none;
     2660    }
     2661    .buddypress-wrap #group-invites-container .group-invites-column {
     2662        -ms-grid-row: 1;
     2663        -ms-grid-column: 2;
     2664        grid-area: group-invites-column;
    26412665    }
    26422666}
  • trunk/src/bp-templates/bp-nouveau/css/buddypress.css

    r12013 r12040  
    26392639        float: left;
    26402640        width: auto;
     2641    }
     2642}
     2643
     2644@media screen and (min-width: 37.5em) {
     2645    .buddypress-wrap #group-invites-container {
     2646        display: -ms-grid;
     2647        display: grid;
     2648        -ms-grid-columns: 25% auto;
     2649        grid-template-columns: 25% auto;
     2650        grid-template-areas: "group-invites-nav group-invites-column";
     2651    }
     2652    .buddypress-wrap #group-invites-container .bp-invites-nav {
     2653        -ms-grid-row: 1;
     2654        -ms-grid-column: 1;
     2655        grid-area: group-invites-nav;
     2656    }
     2657    .buddypress-wrap #group-invites-container .bp-invites-nav li {
     2658        display: block;
     2659        float: none;
     2660    }
     2661    .buddypress-wrap #group-invites-container .group-invites-column {
     2662        -ms-grid-row: 1;
     2663        -ms-grid-column: 2;
     2664        grid-area: group-invites-column;
    26412665    }
    26422666}
  • trunk/src/bp-templates/bp-nouveau/sass/_nouveau_invites.scss

    r11686 r12040  
    144144}
    145145
     146@media screen and (min-width: 37.5em) {
     147
     148    .buddypress-wrap {
     149
     150        #group-invites-container {
     151            display: -ms-grid;
     152            display: grid;
     153            -ms-grid-columns: 25% auto;
     154            grid-template-columns: 25% auto;
     155            grid-template-areas: "group-invites-nav group-invites-column";
     156
     157            .bp-invites-nav {
     158                -ms-grid-row: 1;
     159                -ms-grid-column: 1;
     160                grid-area: group-invites-nav;
     161
     162                li {
     163                    display: block;
     164                    float: none;
     165                }
     166            }
     167
     168            .group-invites-column {
     169                -ms-grid-row: 1;
     170                -ms-grid-column: 2;
     171                grid-area: group-invites-column;
     172            }
     173        }
     174    }
     175
     176}
     177
Note: See TracChangeset for help on using the changeset viewer.