Skip to:
Content

BuddyPress.org

Changeset 9905


Ignore:
Timestamp:
06/01/2015 04:39:13 PM (10 years ago)
Author:
hnla
Message:

Update companion styles Group Send Invites screens

In small screen/mobile views the two column invites lists were too compressed horizontally, commit re-factors for stacked views.

Fixes #6468

Location:
trunk/src/bp-templates/bp-legacy/css
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen-rtl.css

    r9903 r9905  
    4242            6.2.1.1 - Management settings screens
    4343            6.2.1.2 - Group members list
     44            6.2.1.3 - Group Send Invites
    4445        6.2.2 - item-body: User Accounts
    4546            6.2.2.1 - classes, pag, filters
    … …  
    11801181
    11811182/**
     1183*-----------------------------------------
     1184* @subsection 6.2.1.3 - Group Send Invites
     1185*-----------------------------------------
     1186*/
     1187.groups.group-invites #item-body .item-list .action {
     1188    margin-bottom: 0;
     1189}
     1190
     1191@media screen and (min-width: 46.25em) {
     1192    .groups.group-invites #buddypress #item-body #message {
     1193        margin-top: 0;
     1194    }
     1195}
     1196
     1197@media screen and (min-width: 55em) {
     1198    .groups.group-invites #buddypress #send-invite-form {
     1199        margin-top: 0;
     1200    }
     1201}
     1202
     1203@media screen and (max-width: 46.25em) {
     1204    .groups.group-invites #item-body .left-menu {
     1205        float: none;
     1206        margin: 10px 0;
     1207    }
     1208    .groups.group-invites #item-body .left-menu #invite-list {
     1209        height: auto;
     1210        width: auto;
     1211    }
     1212    .groups.group-invites #item-body .main-column {
     1213        margin-right: 0;
     1214    }
     1215    .groups.group-invites #item-body .submit input {
     1216        display: inline-block;
     1217        width: 100%;
     1218    }
     1219}
     1220
     1221/**
    11821222*-----------------------------------------------------
    11831223* @subsection 6.2.2 - Item Body User Accounts

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen.css

    r9903 r9905  
    4242            6.2.1.1 - Management settings screens
    4343            6.2.1.2 - Group members list
     44            6.2.1.3 - Group Send Invites
    4445        6.2.2 - item-body: User Accounts
    4546            6.2.2.1 - classes, pag, filters
    … …  
    11801181
    11811182/**
     1183*-----------------------------------------
     1184* @subsection 6.2.1.3 - Group Send Invites
     1185*-----------------------------------------
     1186*/
     1187.groups.group-invites #item-body .item-list .action {
     1188    margin-bottom: 0;
     1189}
     1190
     1191@media screen and (min-width: 46.25em) {
     1192    .groups.group-invites #buddypress #item-body #message {
     1193        margin-top: 0;
     1194    }
     1195}
     1196
     1197@media screen and (min-width: 55em) {
     1198    .groups.group-invites #buddypress #send-invite-form {
     1199        margin-top: 0;
     1200    }
     1201}
     1202
     1203@media screen and (max-width: 46.25em) {
     1204    .groups.group-invites #item-body .left-menu {
     1205        float: none;
     1206        margin: 10px 0;
     1207    }
     1208    .groups.group-invites #item-body .left-menu #invite-list {
     1209        height: auto;
     1210        width: auto;
     1211    }
     1212    .groups.group-invites #item-body .main-column {
     1213        margin-left: 0;
     1214    }
     1215    .groups.group-invites #item-body .submit input {
     1216        display: inline-block;
     1217        width: 100%;
     1218    }
     1219}
     1220
     1221/**
    11821222*-----------------------------------------------------
    11831223* @subsection 6.2.2 - Item Body User Accounts

  • trunk/src/bp-templates/bp-legacy/css/twentyfifteen.scss

    r9899 r9905  
    184184            6.2.1.1 - Management settings screens
    185185            6.2.1.2 - Group members list
     186            6.2.1.3 - Group Send Invites
    186187        6.2.2 - item-body: User Accounts
    187188            6.2.2.1 - classes, pag, filters
    … …  
    12591260*/
    12601261
     1262
    12611263/**
    12621264*-----------------------------------------
    … …  
    14541456        }
    14551457    }
     1458}
     1459
     1460/**
     1461*-----------------------------------------
     1462* @subsection 6.2.1.3 - Group Send Invites
     1463*-----------------------------------------
     1464*/
     1465
     1466.groups.group-invites {
     1467    #item-body {
     1468        .item-list {
     1469            .action {
     1470                margin-bottom: 0;
     1471            }
     1472        }
     1473    }
     1474
     1475    @media screen and (min-width: 46.25em) {
     1476        #buddypress {
     1477            #item-body {
     1478                #message {
     1479                    margin-top: 0;
     1480                }
     1481            }
     1482        }
     1483    }
     1484
     1485    @media screen and (min-width: 55em) {
     1486        #buddypress {
     1487            #send-invite-form { margin-top: 0;}
     1488        }
     1489    }
     1490
     1491    #item-body {
     1492        @media screen and (max-width: 46.25em) {
     1493            .left-menu {
     1494                float: none;
     1495                margin: $spacing-val-sm 0;
     1496
     1497                #invite-list {
     1498                    height: auto;
     1499                    width: auto;
     1500            }
     1501        }
     1502
     1503            .main-column {
     1504                margin-left: 0;
     1505        }
     1506
     1507            .submit {
     1508                input {
     1509                    display: inline-block;
     1510                    width: 100%;
     1511            }
     1512        }
     1513    }
     1514 }
     1515
    14561516}
    14571517

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen-rtl.css

    r9903 r9905  
    957957}
    958958
    959 .send-invites #buddypress #item-body #invite-list {
    960     width: 120px;
    961 }
    962 
    963 .send-invites #buddypress #item-body .main-column {
    964     margin-right: 160px;
     959@media screen and (max-width: 400px) {
     960    .send-invites #buddypress #item-body .left-menu {
     961        float: none;
     962    }
     963    .send-invites #buddypress #item-body .left-menu #invite-list {
     964        height: auto;
     965        width: auto;
     966    }
     967    .send-invites #buddypress #item-body .main-column {
     968        margin-right: 0;
     969    }
    965970}
    966971

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen.css

    r9903 r9905  
    957957}
    958958
    959 .send-invites #buddypress #item-body #invite-list {
    960     width: 120px;
    961 }
    962 
    963 .send-invites #buddypress #item-body .main-column {
    964     margin-left: 160px;
     959@media screen and (max-width: 400px) {
     960    .send-invites #buddypress #item-body .left-menu {
     961        float: none;
     962    }
     963    .send-invites #buddypress #item-body .left-menu #invite-list {
     964        height: auto;
     965        width: auto;
     966    }
     967    .send-invites #buddypress #item-body .main-column {
     968        margin-left: 0;
     969    }
    965970}
    966971

  • trunk/src/bp-templates/bp-legacy/css/twentyfourteen.scss

    r9895 r9905  
    99// font sizing etc. Media queries are used in a modular sense (OOCSS)
    1010// rather than described as blocks to the end of the sheet, this aids ease
    11 // of managing media queries, scalability & flexibility .
     11// of managing media queries, scalability & flexibility.
    1212
    1313// Twentyfourteen Media Queries / Breakpoints
    … …  
    12961296            }
    12971297
    1298             #invite-list {width: 120px;}
    1299             .main-column {margin-left: 160px;}
     1298            @media screen and (max-width: 400px) {
     1299                .left-menu {
     1300                    float: none;
     1301
     1302                    #invite-list {
     1303                        height: auto;
     1304                        width: auto;
     1305                    }
     1306                }
     1307
     1308                .main-column {
     1309                    margin-left: 0;
     1310                }
     1311            }
    13001312
    13011313            li {
Note: See TracChangeset for help on using the changeset viewer.