Skip to:
Content

BuddyPress.org

Changeset 9835


Ignore:
Timestamp:
05/04/2015 12:18:45 PM (10 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.