Skip to:
Content

BuddyPress.org

Changeset 9905


Ignore:
Timestamp:
06/01/2015 04:39:13 PM (11 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.