Skip to:
Content

BuddyPress.org

Changeset 11713


Ignore:
Timestamp:
10/10/2017 11:07:44 AM (9 years ago)
Author:
hnla
Message:

Add styles for BP widgets

Commit adds styling for BP widgets to display as grid layout & attempts to adjust for various device width views.

Styles split as global & as displayed if added to a generic WP sidebar classed with default widget-area.

N.B .min files omitted as these should be part of future build process, however .rtl included

Location:
trunk/src/bp-templates/bp-nouveau
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-templates/bp-nouveau/common-styles/_bp_widgets.scss

    r11686 r11713  
     1// BP Widgets
     2
     3.buddypress.widget {
     4
     5    .item-options {
     6
     7        @include font-size(14);
     8    }
     9
     10    ul.item-list {
     11
     12        @include flex-box-dir($flex-dir: column);
     13
     14        @include medium-small-up() {
     15
     16            @include flex-box-dir($flex-dir: row, $flex-wrap: wrap);
     17        }
     18
     19        list-style: none;
     20        margin: $marg-sml -2%;
     21        overflow: hidden;
     22
     23        li {
     24            border: 1px solid $bp-border-color;
     25
     26            @include flex-align();
     27            @include box-item-size($grow: 1, $basis: 46%);
     28
     29            @include large-up() {
     30
     31                @include box-item-size($grow: 0, $basis: 20%);
     32            }
     33
     34            margin: 2%;
     35
     36            .item-avatar {
     37                padding: $pad-sml;
     38                text-align: center;
     39
     40                .avatar {
     41                    width: 60%;
     42                }
     43            }
     44
     45            .item {
     46                padding: 0 $pad-sml $pad-sml;
     47
     48
     49                .item-meta {
     50
     51                    @include font-size(12);
     52                    overflow-wrap: break-word;
     53                }
     54            }
     55        } // close li
     56    }
     57}
     58
     59// Are we in a main site sidebar?
     60// while hard to tell width asume that
     61// at large width it's narrow &
     62// adjust the li widths & margins to %
     63// & flex basis to auto for large up.
     64// @todo this may need reviewing & adjusting.
     65
     66// WP default themes use the class '.widget-area'
     67// as a naming convention for the main sidebar
     68// this is the best we can know & style on this class
     69.widget-area {
     70
     71    .buddypress.widget {
     72
     73        ul.item-list {
     74
     75            li {
     76
     77                @include box-item-size($grow: 0, $basis: 46%);
     78                margin: 2% 2% 10px;
     79
     80                @include large-up {
     81
     82                    .avatar {
     83                        width: 100%;
     84                    }
     85                }
     86            }
     87        }
     88
     89        @include large-up() {
     90
     91            ul.item-list {
     92                margin: $marg-sml -2%;
     93                width: 100%;
     94
     95                li {
     96
     97                    @include box-item-size($grow: 0, $basis: auto);
     98                    margin: $marg-sml 2% 1%;
     99                    width: 46%;
     100                }
     101            }
     102        }
     103    }
     104}

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

    r11686 r11713  
    152152}
    153153
    154 dt.section-title {
     154.buddypress-wrap dt.section-title {
    155155    font-size: 18px;
    156156}
    157157
    158158@media screen and (min-width: 46.8em) {
    159     dt.section-title {
     159    .buddypress-wrap dt.section-title {
    160160        font-size: 22px;
    161161    }
    162162}
    163163
    164 .bp-label-text,
    165 .message-threads {
     164.buddypress-wrap .bp-label-text,
     165.buddypress-wrap .message-threads {
    166166    font-size: 13px;
    167167}
    168168
    169169@media screen and (min-width: 46.8em) {
    170     .bp-label-text,
    171     .message-threads {
     170    .buddypress-wrap .bp-label-text,
     171    .buddypress-wrap .message-threads {
    172172        font-size: 16px;
    173173    }
    174174}
    175175
    176 .activity-header {
     176.buddypress-wrap .activity-header {
    177177    font-size: 13px;
    178178}
    179179
    180180@media screen and (min-width: 46.8em) {
    181     .activity-header {
     181    .buddypress-wrap .activity-header {
    182182        font-size: 16px;
    183183    }
    184184}
    185185
    186 .activity-inner {
     186.buddypress-wrap .activity-inner {
    187187    font-size: 15px;
    188188}
    189189
    190190@media screen and (min-width: 46.8em) {
    191     .activity-inner {
     191    .buddypress-wrap .activity-inner {
    192192        font-size: 18px;
    193193    }
    194194}
    195195
    196 #whats-new-post-in {
     196.buddypress-wrap #whats-new-post-in {
    197197    font-size: 16px;
    198198}
    199199
    200 .mini .activity-header,
    201 .acomment-meta {
     200.buddypress-wrap .mini .activity-header,
     201.buddypress-wrap .acomment-meta {
    202202    font-size: 16px;
    203203}
    204204
    205 .dir-component-filters #activity-filter-by {
     205.buddypress-wrap .dir-component-filters #activity-filter-by {
    206206    font-size: 13px;
    207207}
    208208
    209209@media screen and (min-width: 46.8em) {
    210     .dir-component-filters #activity-filter-by {
     210    .buddypress-wrap .dir-component-filters #activity-filter-by {
    211211        font-size: 16px;
    212212    }
    213213}
    214214
    215 .bp-tables-user th {
     215.buddypress-wrap .bp-tables-user th {
    216216    font-size: 13px;
    217217}
    218218
    219219@media screen and (min-width: 46.8em) {
    220     .bp-tables-user th {
     220    .buddypress-wrap .bp-tables-user th {
    221221        font-size: 16px;
    222222    }
    223223}
    224224
    225 .bp-tables-user td {
     225.buddypress-wrap .bp-tables-user td {
    226226    font-size: 12px;
    227227}
    228228
    229229@media screen and (min-width: 46.8em) {
    230     .bp-tables-user td {
     230    .buddypress-wrap .bp-tables-user td {
    231231        font-size: 14px;
    232232    }
    233233}
    234234
    235 .profile-fields th {
     235.buddypress-wrap .profile-fields th {
    236236    font-size: 15px;
    237237}
    238238
    239239@media screen and (min-width: 46.8em) {
    240     .profile-fields th {
     240    .buddypress-wrap .profile-fields th {
    241241        font-size: 18px;
    242242    }
    243243}
    244244
    245 .profile-fields td {
     245.buddypress-wrap .profile-fields td {
    246246    font-size: 13px;
    247247}
    248248
    249249@media screen and (min-width: 46.8em) {
    250     .profile-fields td {
     250    .buddypress-wrap .profile-fields td {
    251251        font-size: 16px;
    252252    }
    253253}
    254254
    255 #notification-select {
     255.buddypress-wrap #notification-select {
    256256    font-size: 12px;
    257257}
    258258
    259259@media screen and (min-width: 46.8em) {
    260     #notification-select {
     260    .buddypress-wrap #notification-select {
    261261        font-size: 14px;
    262262    }
    … …  
    40804080}
    40814081
     4082.buddypress-wrap li.bp-messages,
    40824083.buddypress-wrap .bp-messages.bp-user-messages-feedback {
    40834084    border: 0;
    … …  
    42954296    left: 2%;
    42964297    top: 30px;
     4298}
     4299
     4300.buddypress.widget .item-options {
     4301    font-size: 14px;
     4302}
     4303
     4304.buddypress.widget ul.item-list {
     4305    display: -webkit-flex;
     4306    display: -moz-flex;
     4307    display: -ms-flex;
     4308    display: -o-flex;
     4309    display: flex;
     4310    -webkit-flex-flow: column nowrap;
     4311    -moz-flex-flow: column nowrap;
     4312    -ms-flex-flow: column nowrap;
     4313    -o-flex-flow: column nowrap;
     4314    flex-flow: column nowrap;
     4315    list-style: none;
     4316    margin: 10px -2%;
     4317    overflow: hidden;
     4318}
     4319
     4320@media screen and (min-width: 32em) {
     4321    .buddypress.widget ul.item-list {
     4322        display: -webkit-flex;
     4323        display: -moz-flex;
     4324        display: -ms-flex;
     4325        display: -o-flex;
     4326        display: flex;
     4327        -webkit-flex-flow: row wrap;
     4328        -moz-flex-flow: row wrap;
     4329        -ms-flex-flow: row wrap;
     4330        -o-flex-flow: row wrap;
     4331        flex-flow: row wrap;
     4332    }
     4333}
     4334
     4335.buddypress.widget ul.item-list li {
     4336    border: 1px solid #eee;
     4337    -ms-flex-align: stretch;
     4338    -webkit-align-items: stretch;
     4339    -webkit-box-align: stretch;
     4340    align-items: stretch;
     4341    -webkit-flex: 1 1 46%;
     4342    -moz-flex: 1 1 46%;
     4343    -ms-flex: 1 1 46%;
     4344    -o-flex: 1 1 46%;
     4345    flex: 1 1 46%;
     4346    margin: 2%;
     4347}
     4348
     4349@media screen and (min-width: 75em) {
     4350    .buddypress.widget ul.item-list li {
     4351        -webkit-flex: 0 1 20%;
     4352        -moz-flex: 0 1 20%;
     4353        -ms-flex: 0 1 20%;
     4354        -o-flex: 0 1 20%;
     4355        flex: 0 1 20%;
     4356    }
     4357}
     4358
     4359.buddypress.widget ul.item-list li .item-avatar {
     4360    padding: 0.5em;
     4361    text-align: center;
     4362}
     4363
     4364.buddypress.widget ul.item-list li .item-avatar .avatar {
     4365    width: 60%;
     4366}
     4367
     4368.buddypress.widget ul.item-list li .item {
     4369    padding: 0 0.5em 0.5em;
     4370}
     4371
     4372.buddypress.widget ul.item-list li .item .item-meta {
     4373    font-size: 12px;
     4374    overflow-wrap: break-word;
     4375}
     4376
     4377.widget-area .buddypress.widget ul.item-list li {
     4378    -webkit-flex: 0 1 46%;
     4379    -moz-flex: 0 1 46%;
     4380    -ms-flex: 0 1 46%;
     4381    -o-flex: 0 1 46%;
     4382    flex: 0 1 46%;
     4383    margin: 2% 2% 10px;
     4384}
     4385
     4386@media screen and (min-width: 75em) {
     4387    .widget-area .buddypress.widget ul.item-list li .avatar {
     4388        width: 100%;
     4389    }
     4390}
     4391
     4392@media screen and (min-width: 75em) {
     4393    .widget-area .buddypress.widget ul.item-list {
     4394        margin: 10px -2%;
     4395        width: 100%;
     4396    }
     4397    .widget-area .buddypress.widget ul.item-list li {
     4398        -webkit-flex: 0 1 auto;
     4399        -moz-flex: 0 1 auto;
     4400        -ms-flex: 0 1 auto;
     4401        -o-flex: 0 1 auto;
     4402        flex: 0 1 auto;
     4403        margin: 10px 2% 1%;
     4404        width: 46%;
     4405    }
    42974406}
    42984407

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

    r11686 r11713  
    152152}
    153153
    154 dt.section-title {
     154.buddypress-wrap dt.section-title {
    155155    font-size: 18px;
    156156}
    157157
    158158@media screen and (min-width: 46.8em) {
    159     dt.section-title {
     159    .buddypress-wrap dt.section-title {
    160160        font-size: 22px;
    161161    }
    162162}
    163163
    164 .bp-label-text,
    165 .message-threads {
     164.buddypress-wrap .bp-label-text,
     165.buddypress-wrap .message-threads {
    166166    font-size: 13px;
    167167}
    168168
    169169@media screen and (min-width: 46.8em) {
    170     .bp-label-text,
    171     .message-threads {
     170    .buddypress-wrap .bp-label-text,
     171    .buddypress-wrap .message-threads {
    172172        font-size: 16px;
    173173    }
    174174}
    175175
    176 .activity-header {
     176.buddypress-wrap .activity-header {
    177177    font-size: 13px;
    178178}
    179179
    180180@media screen and (min-width: 46.8em) {
    181     .activity-header {
     181    .buddypress-wrap .activity-header {
    182182        font-size: 16px;
    183183    }
    184184}
    185185
    186 .activity-inner {
     186.buddypress-wrap .activity-inner {
    187187    font-size: 15px;
    188188}
    189189
    190190@media screen and (min-width: 46.8em) {
    191     .activity-inner {
     191    .buddypress-wrap .activity-inner {
    192192        font-size: 18px;
    193193    }
    194194}
    195195
    196 #whats-new-post-in {
     196.buddypress-wrap #whats-new-post-in {
    197197    font-size: 16px;
    198198}
    199199
    200 .mini .activity-header,
    201 .acomment-meta {
     200.buddypress-wrap .mini .activity-header,
     201.buddypress-wrap .acomment-meta {
    202202    font-size: 16px;
    203203}
    204204
    205 .dir-component-filters #activity-filter-by {
     205.buddypress-wrap .dir-component-filters #activity-filter-by {
    206206    font-size: 13px;
    207207}
    208208
    209209@media screen and (min-width: 46.8em) {
    210     .dir-component-filters #activity-filter-by {
     210    .buddypress-wrap .dir-component-filters #activity-filter-by {
    211211        font-size: 16px;
    212212    }
    213213}
    214214
    215 .bp-tables-user th {
     215.buddypress-wrap .bp-tables-user th {
    216216    font-size: 13px;
    217217}
    218218
    219219@media screen and (min-width: 46.8em) {
    220     .bp-tables-user th {
     220    .buddypress-wrap .bp-tables-user th {
    221221        font-size: 16px;
    222222    }
    223223}
    224224
    225 .bp-tables-user td {
     225.buddypress-wrap .bp-tables-user td {
    226226    font-size: 12px;
    227227}
    228228
    229229@media screen and (min-width: 46.8em) {
    230     .bp-tables-user td {
     230    .buddypress-wrap .bp-tables-user td {
    231231        font-size: 14px;
    232232    }
    233233}
    234234
    235 .profile-fields th {
     235.buddypress-wrap .profile-fields th {
    236236    font-size: 15px;
    237237}
    238238
    239239@media screen and (min-width: 46.8em) {
    240     .profile-fields th {
     240    .buddypress-wrap .profile-fields th {
    241241        font-size: 18px;
    242242    }
    243243}
    244244
    245 .profile-fields td {
     245.buddypress-wrap .profile-fields td {
    246246    font-size: 13px;
    247247}
    248248
    249249@media screen and (min-width: 46.8em) {
    250     .profile-fields td {
     250    .buddypress-wrap .profile-fields td {
    251251        font-size: 16px;
    252252    }
    253253}
    254254
    255 #notification-select {
     255.buddypress-wrap #notification-select {
    256256    font-size: 12px;
    257257}
    258258
    259259@media screen and (min-width: 46.8em) {
    260     #notification-select {
     260    .buddypress-wrap #notification-select {
    261261        font-size: 14px;
    262262    }
    … …  
    40804080}
    40814081
     4082.buddypress-wrap li.bp-messages,
    40824083.buddypress-wrap .bp-messages.bp-user-messages-feedback {
    40834084    border: 0;
    … …  
    42954296    right: 2%;
    42964297    top: 30px;
     4298}
     4299
     4300.buddypress.widget .item-options {
     4301    font-size: 14px;
     4302}
     4303
     4304.buddypress.widget ul.item-list {
     4305    display: -webkit-flex;
     4306    display: -moz-flex;
     4307    display: -ms-flex;
     4308    display: -o-flex;
     4309    display: flex;
     4310    -webkit-flex-flow: column nowrap;
     4311    -moz-flex-flow: column nowrap;
     4312    -ms-flex-flow: column nowrap;
     4313    -o-flex-flow: column nowrap;
     4314    flex-flow: column nowrap;
     4315    list-style: none;
     4316    margin: 10px -2%;
     4317    overflow: hidden;
     4318}
     4319
     4320@media screen and (min-width: 32em) {
     4321    .buddypress.widget ul.item-list {
     4322        display: -webkit-flex;
     4323        display: -moz-flex;
     4324        display: -ms-flex;
     4325        display: -o-flex;
     4326        display: flex;
     4327        -webkit-flex-flow: row wrap;
     4328        -moz-flex-flow: row wrap;
     4329        -ms-flex-flow: row wrap;
     4330        -o-flex-flow: row wrap;
     4331        flex-flow: row wrap;
     4332    }
     4333}
     4334
     4335.buddypress.widget ul.item-list li {
     4336    border: 1px solid #eee;
     4337    -ms-flex-align: stretch;
     4338    -webkit-align-items: stretch;
     4339    -webkit-box-align: stretch;
     4340    align-items: stretch;
     4341    -webkit-flex: 1 1 46%;
     4342    -moz-flex: 1 1 46%;
     4343    -ms-flex: 1 1 46%;
     4344    -o-flex: 1 1 46%;
     4345    flex: 1 1 46%;
     4346    margin: 2%;
     4347}
     4348
     4349@media screen and (min-width: 75em) {
     4350    .buddypress.widget ul.item-list li {
     4351        -webkit-flex: 0 1 20%;
     4352        -moz-flex: 0 1 20%;
     4353        -ms-flex: 0 1 20%;
     4354        -o-flex: 0 1 20%;
     4355        flex: 0 1 20%;
     4356    }
     4357}
     4358
     4359.buddypress.widget ul.item-list li .item-avatar {
     4360    padding: 0.5em;
     4361    text-align: center;
     4362}
     4363
     4364.buddypress.widget ul.item-list li .item-avatar .avatar {
     4365    width: 60%;
     4366}
     4367
     4368.buddypress.widget ul.item-list li .item {
     4369    padding: 0 0.5em 0.5em;
     4370}
     4371
     4372.buddypress.widget ul.item-list li .item .item-meta {
     4373    font-size: 12px;
     4374    overflow-wrap: break-word;
     4375}
     4376
     4377.widget-area .buddypress.widget ul.item-list li {
     4378    -webkit-flex: 0 1 46%;
     4379    -moz-flex: 0 1 46%;
     4380    -ms-flex: 0 1 46%;
     4381    -o-flex: 0 1 46%;
     4382    flex: 0 1 46%;
     4383    margin: 2% 2% 10px;
     4384}
     4385
     4386@media screen and (min-width: 75em) {
     4387    .widget-area .buddypress.widget ul.item-list li .avatar {
     4388        width: 100%;
     4389    }
     4390}
     4391
     4392@media screen and (min-width: 75em) {
     4393    .widget-area .buddypress.widget ul.item-list {
     4394        margin: 10px -2%;
     4395        width: 100%;
     4396    }
     4397    .widget-area .buddypress.widget ul.item-list li {
     4398        -webkit-flex: 0 1 auto;
     4399        -moz-flex: 0 1 auto;
     4400        -ms-flex: 0 1 auto;
     4401        -o-flex: 0 1 auto;
     4402        flex: 0 1 auto;
     4403        margin: 10px 2% 1%;
     4404        width: 46%;
     4405    }
    42974406}
    42984407
Note: See TracChangeset for help on using the changeset viewer.