Skip to:
Content

BuddyPress.org

Changeset 9835


Ignore:
Timestamp:
05/04/2015 12:18:45 PM (11 years ago)
Author:
hnla
Message:

Updates to twentyfourteen companion styles
Addresses:

  • Whats new activity post form elements for better rendering at mobile & small tablet portrait layouts.
  • Updates activity stream list items for better layout in mobile & small tablets.
  • Updates Dir navigation for Mobile screens, render li items at full screen width.

See #6338

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

Legend:

Unmodified
Added
Removed

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

    r9823 r9835  
    8686.directory #buddypress .item-list-tabs ul {
    8787  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
     88@media screen and (max-width: 400px) {
     89  .directory #buddypress .item-list-tabs ul li {
     90    float: none;
     91    overflow: hidden;
     92    width: 100%; } }
    8893@media screen and (min-width: 783px) {
    8994  .directory #buddypress .item-list-tabs ul li.selected {
    … …  
    246251#buddypress form#whats-new-form {
    247252  margin: 40px 0; }
     253  #buddypress form#whats-new-form #whats-new-avatar {
     254    float: none;
     255    margin-bottom: 20px;
     256    text-align: center; }
     257  #buddypress form#whats-new-form #whats-new-content, #buddypress form#whats-new-form p.activity-greeting {
     258    margin-right: 0;
     259    padding-right: 0; }
    248260  #buddypress form#whats-new-form p.activity-greeting {
    249     line-height: inherit; }
     261    clear: right;
     262    line-height: inherit;
     263    margin-bottom: 5px; }
    250264  #buddypress form#whats-new-form textarea#whats-new {
    251265    width: 100%; }
     266  #buddypress form#whats-new-form #whats-new-content.active textarea {
     267    height: auto !important; }
     268  #buddypress form#whats-new-form #whats-new-content.active #whats-new-options {
     269    height: auto !important; }
     270  @media screen and (max-width: 594px) {
     271    #buddypress form#whats-new-form #whats-new-content.active #whats-new-options {
     272      display: flex;
     273      flex-direction: column; }
     274      #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-submit {
     275        order: 2; }
     276        #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-submit input {
     277          width: 100%; }
     278      #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-post-in-box {
     279        order: 1; }
     280        #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-post-in-box select {
     281          margin-top: 5px;
     282          max-width: 100%;
     283          width: 100%; } }
     284  @media screen and (min-width: 594px) {
     285    #buddypress form#whats-new-form #whats-new-avatar {
     286      float: right; }
     287    #buddypress form#whats-new-form #whats-new-content, #buddypress form#whats-new-form p.activity-greeting {
     288      clear: none;
     289      overflow: hidden;
     290      padding-right: 20px; } }
    252291
    253292/**
    … …  
    256295*-------------------------------------------------
    257296*/
     297#buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
     298  float: none;
     299  margin-bottom: 10px;
     300  text-align: center; }
     301  #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar img.avatar {
     302    display: inline;
     303    float: none; }
     304#buddypress .activity-list li.mini .activity-avatar img.avatar {
     305  margin-right: 0; }
     306#buddypress .activity-list li.mini .activity-meta a {
     307  font-size: 12px;
     308  font-size: 0.75rem; }
     309#buddypress .activity-list .activity-content {
     310  margin: 0; }
     311  #buddypress .activity-list .activity-content .activity-header {
     312    margin: -0.5em 0 0; }
     313    #buddypress .activity-list .activity-content .activity-header > p {
     314      line-height: 1.4;
     315      margin-top: -10px; }
     316    #buddypress .activity-list .activity-content .activity-header img.avatar {
     317      margin-bottom: 0 !important;
     318      vertical-align: middle; }
     319  #buddypress .activity-list .activity-content .activity-inner {
     320    margin: 10px 0; }
     321@media screen and (min-width: 400px) {
     322  #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
     323    float: right;
     324    margin: 0 0 0 20px; }
     325    #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar img.avatar {
     326      display: inline;
     327      float: none; }
     328  #buddypress .activity-list li.mini .activity-avatar {
     329    margin: 0 5% 0 10px; }
     330  #buddypress .activity-list .activity-content {
     331    margin-right: 0;
     332    overflow: hidden; } }
     333
    258334/**
    259335*-------------------------------------------------
    … …  
    594670  #buddypress div.dir-search, #buddypress div.message-search {
    595671    clear: none;
    596     float: left;
    597     margin: 0; }
     672    float: left; }
    598673    #buddypress div.dir-search form label, #buddypress div.dir-search form input[type='submit'], #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form label, #buddypress div.message-search form input[type='submit'], #buddypress div.message-search form input[type='text'] {
    599674      width: auto; }

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

    r9823 r9835  
    8686.directory #buddypress .item-list-tabs ul {
    8787  border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
     88@media screen and (max-width: 400px) {
     89  .directory #buddypress .item-list-tabs ul li {
     90    float: none;
     91    overflow: hidden;
     92    width: 100%; } }
    8893@media screen and (min-width: 783px) {
    8994  .directory #buddypress .item-list-tabs ul li.selected {
    … …  
    246251#buddypress form#whats-new-form {
    247252  margin: 40px 0; }
     253  #buddypress form#whats-new-form #whats-new-avatar {
     254    float: none;
     255    margin-bottom: 20px;
     256    text-align: center; }
     257  #buddypress form#whats-new-form #whats-new-content, #buddypress form#whats-new-form p.activity-greeting {
     258    margin-left: 0;
     259    padding-left: 0; }
    248260  #buddypress form#whats-new-form p.activity-greeting {
    249     line-height: inherit; }
     261    clear: left;
     262    line-height: inherit;
     263    margin-bottom: 5px; }
    250264  #buddypress form#whats-new-form textarea#whats-new {
    251265    width: 100%; }
     266  #buddypress form#whats-new-form #whats-new-content.active textarea {
     267    height: auto !important; }
     268  #buddypress form#whats-new-form #whats-new-content.active #whats-new-options {
     269    height: auto !important; }
     270  @media screen and (max-width: 594px) {
     271    #buddypress form#whats-new-form #whats-new-content.active #whats-new-options {
     272      display: flex;
     273      flex-direction: column; }
     274      #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-submit {
     275        order: 2; }
     276        #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-submit input {
     277          width: 100%; }
     278      #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-post-in-box {
     279        order: 1; }
     280        #buddypress form#whats-new-form #whats-new-content.active #whats-new-options #whats-new-post-in-box select {
     281          margin-top: 5px;
     282          max-width: 100%;
     283          width: 100%; } }
     284  @media screen and (min-width: 594px) {
     285    #buddypress form#whats-new-form #whats-new-avatar {
     286      float: left; }
     287    #buddypress form#whats-new-form #whats-new-content, #buddypress form#whats-new-form p.activity-greeting {
     288      clear: none;
     289      overflow: hidden;
     290      padding-left: 20px; } }
    252291
    253292/**
    … …  
    256295*-------------------------------------------------
    257296*/
     297#buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
     298  float: none;
     299  margin-bottom: 10px;
     300  text-align: center; }
     301  #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar img.avatar {
     302    display: inline;
     303    float: none; }
     304#buddypress .activity-list li.mini .activity-avatar img.avatar {
     305  margin-left: 0; }
     306#buddypress .activity-list li.mini .activity-meta a {
     307  font-size: 12px;
     308  font-size: 0.75rem; }
     309#buddypress .activity-list .activity-content {
     310  margin: 0; }
     311  #buddypress .activity-list .activity-content .activity-header {
     312    margin: -0.5em 0 0; }
     313    #buddypress .activity-list .activity-content .activity-header > p {
     314      line-height: 1.4;
     315      margin-top: -10px; }
     316    #buddypress .activity-list .activity-content .activity-header img.avatar {
     317      margin-bottom: 0 !important;
     318      vertical-align: middle; }
     319  #buddypress .activity-list .activity-content .activity-inner {
     320    margin: 10px 0; }
     321@media screen and (min-width: 400px) {
     322  #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
     323    float: left;
     324    margin: 0 20px 0 0; }
     325    #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar img.avatar {
     326      display: inline;
     327      float: none; }
     328  #buddypress .activity-list li.mini .activity-avatar {
     329    margin: 0 10px 0 5%; }
     330  #buddypress .activity-list .activity-content {
     331    margin-left: 0;
     332    overflow: hidden; } }
     333
    258334/**
    259335*-------------------------------------------------
    … …  
    594670  #buddypress div.dir-search, #buddypress div.message-search {
    595671    clear: none;
    596     float: right;
    597     margin: 0; }
     672    float: right; }
    598673    #buddypress div.dir-search form label, #buddypress div.dir-search form input[type='submit'], #buddypress div.dir-search form input[type='text'], #buddypress div.message-search form label, #buddypress div.message-search form input[type='submit'], #buddypress div.message-search form input[type='text'] {
    599674      width: auto; }

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

    r9823 r9835  
    237237                ul {border-bottom: 1px solid $border-med;}
    238238
     239                @media screen and (max-width: 400px) {
     240                        ul {
     241                                li {
     242                                        float: none;
     243                                        overflow: hidden;
     244                                        width: 100%;
     245                                }
     246                        }
     247                }
     248
    239249                @media screen and (min-width: 783px) {
    240250                        ul {
    … …  
    542552                margin: $spacing-val-lg 0;
    543553
     554                #whats-new-avatar {
     555                        float: none;
     556                        margin-bottom: $spacing-val-md;
     557                        text-align: center;
     558                }
     559
     560                #whats-new-content,
     561                p.activity-greeting {
     562                        margin-left: 0;
     563                        padding-left: 0;
     564                }
     565
    544566                // Line-height issue inherited from BP rules, override.
    545567                p.activity-greeting {
     568                        clear: left;
    546569                        line-height: inherit;
     570                        margin-bottom: $spacing-val-xs;
    547571                }
    548572
    … …  
    550574                        width: 100%;
    551575                }
    552         }
    553 }
     576
     577                #whats-new-content.active {
     578                        textarea {
     579                                // !important to override the BP inline fixed height
     580                                height: auto !important;
     581                        }
     582
     583                        #whats-new-options {
     584                                // Have to override the BP fixed height
     585                                height: auto !important;
     586                        }
     587
     588                        @media screen and (max-width: 594px) {
     589                                #whats-new-options {
     590                                        display: flex;
     591                                        flex-direction: column;
     592
     593                                        #whats-new-submit {
     594                                                order: 2;
     595
     596                                                input {
     597                                                        width: 100%;
     598                                                }
     599                                        }
     600
     601                                        #whats-new-post-in-box {
     602                                                order: 1;
     603
     604                                                select {
     605                                                        margin-top: $spacing-val-xs;
     606                                                        max-width: 100%;
     607                                                        width: 100%;
     608                                                }
     609                                        }
     610                                }
     611                        }
     612                } // close whats-new-content.active
     613
     614                @media screen and (min-width: 594px) {
     615                        #whats-new-avatar {
     616                                float: left;
     617                        }
     618
     619                        #whats-new-content,
     620                        p.activity-greeting {
     621                                clear: none;
     622                                overflow: hidden;
     623                                padding-left: $spacing-val-md;
     624                        }
     625                }
     626        } // close form#whats-new-form
     627
     628} // close #buddypress
    554629
    555630/**
    … …  
    558633*-------------------------------------------------
    559634*/
     635
     636#buddypress {
     637        .activity-list {
     638
     639                li.activity-item:not(.mini) {
     640                        .activity-avatar {
     641                                float: none;
     642                                margin-bottom: $spacing-val-sm;
     643                                text-align: center;
     644
     645                                img.avatar {
     646                                        display: inline;
     647                                        float: none;
     648                                }
     649                        }
     650                }
     651
     652                li.mini {
     653                        .activity-avatar {
     654                                img.avatar {
     655                                        margin-left: 0;
     656                                }
     657                        }
     658
     659                        .activity-meta {
     660                                a {@include font-size(12);}
     661                        }
     662                }
     663
     664                .activity-content {
     665                        margin: 0;
     666
     667                        .activity-header {
     668                                margin: -0.5em 0 0;
     669
     670                                > p {
     671                                        line-height: 1.4;
     672                                        margin-top: -$spacing-val-sm;
     673                                }
     674
     675                                // BP adds !important. need to override prop val
     676                                img.avatar {
     677                                        margin-bottom: 0 !important;
     678                                        vertical-align: middle;
     679                                }
     680                        }
     681
     682                        .activity-inner {margin: $spacing-val-sm 0;}
     683                }
     684
     685                @media screen and (min-width: 400px) {
     686                        li.activity-item:not(.mini) {
     687                                .activity-avatar {
     688                                        float: left;
     689                                        margin: 0 $spacing-val-md 0 0;
     690
     691                                        img.avatar {
     692                                                display: inline;
     693                                                float: none;
     694                                        }
     695                                }
     696                        }
     697
     698                        li.mini {
     699                                .activity-avatar {
     700                                        margin: 0 $spacing-val-sm 0 5%;
     701                                }
     702                        }
     703
     704                        .activity-content {
     705                                margin-left: 0;
     706                                overflow: hidden;
     707                        }
     708                }
     709
     710        } // close .activity-list
     711} // close #buddypress
    560712
    561713/**
    … …  
    11381290                        clear: none;
    11391291                        float: right;
    1140                         margin: 0;
    11411292
    11421293                        form {
Note: See TracChangeset for help on using the changeset viewer.