Skip to:
Content

BuddyPress.org

Changeset 9894


Ignore:
Timestamp:
05/23/2015 06:54:57 PM (11 years ago)
Author:
hnla
Message:

Update twentyfourteen & twentyfifteen activity comments

Update improves the activity items list comments for both companion stylesheets.

At narrow width mobile screens nested comments of any depth greater than two were looking squeezed due to compounded left margin indents, commit provides a better mobile small screen experience.
See #6449 Props mercime

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

    r9876 r9894  
    428428  background: none; }
    429429  .activity-permalink #buddypress #activity-stream li.activity-item {
    430     padding: 20px; }
     430    padding: 20px 0; }
    431431  .activity-permalink #buddypress #activity-stream li.mini .activity-header {
    432432    font-size: 16px;
    … …  
    457457      #buddypress #activity-stream .activity-comments > ul {
    458458        margin-right: 70px; } }
     459    #buddypress #activity-stream .activity-comments > ul ul {
     460      margin-right: 1%;
     461      padding-right: 0; }
     462      @media screen and (min-width: 30em) {
     463        #buddypress #activity-stream .activity-comments > ul ul {
     464          margin-right: 1%;
     465          padding-right: 1em; } }
     466    #buddypress #activity-stream .activity-comments > ul ul li {
     467      border-right: 1px solid #eaeaea;
     468      border-top: 0;
     469      padding-right: 0.2em; }
     470    #buddypress #activity-stream .activity-comments > ul .acomment-meta {
     471      border-bottom: 1px solid #eaeaea;
     472      font-style: italic; }
     473    @media screen and (max-width: 38.75em) {
     474      #buddypress #activity-stream .activity-comments > ul .acomment-avatar {
     475        display: block;
     476        text-align: center; }
     477        #buddypress #activity-stream .activity-comments > ul .acomment-avatar a, #buddypress #activity-stream .activity-comments > ul .acomment-avatar img.avatar {
     478          display: inline;
     479          float: none; }
     480      #buddypress #activity-stream .activity-comments > ul .acomment-content, #buddypress #activity-stream .activity-comments > ul .acomment-meta, #buddypress #activity-stream .activity-comments > ul .acomment-options {
     481        margin: 5px; }
     482      #buddypress #activity-stream .activity-comments > ul .acomment-content {
     483        padding: 0 10px; } }
    459484  #buddypress #activity-stream .activity-comments .ac-reply-avatar {
    460485    display: none; }

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

    r9876 r9894  
    428428  background: none; }
    429429  .activity-permalink #buddypress #activity-stream li.activity-item {
    430     padding: 20px; }
     430    padding: 20px 0; }
    431431  .activity-permalink #buddypress #activity-stream li.mini .activity-header {
    432432    font-size: 16px;
    … …  
    457457      #buddypress #activity-stream .activity-comments > ul {
    458458        margin-left: 70px; } }
     459    #buddypress #activity-stream .activity-comments > ul ul {
     460      margin-left: 1%;
     461      padding-left: 0; }
     462      @media screen and (min-width: 30em) {
     463        #buddypress #activity-stream .activity-comments > ul ul {
     464          margin-left: 1%;
     465          padding-left: 1em; } }
     466    #buddypress #activity-stream .activity-comments > ul ul li {
     467      border-left: 1px solid #eaeaea;
     468      border-top: 0;
     469      padding-left: 0.2em; }
     470    #buddypress #activity-stream .activity-comments > ul .acomment-meta {
     471      border-bottom: 1px solid #eaeaea;
     472      font-style: italic; }
     473    @media screen and (max-width: 38.75em) {
     474      #buddypress #activity-stream .activity-comments > ul .acomment-avatar {
     475        display: block;
     476        text-align: center; }
     477        #buddypress #activity-stream .activity-comments > ul .acomment-avatar a, #buddypress #activity-stream .activity-comments > ul .acomment-avatar img.avatar {
     478          display: inline;
     479          float: none; }
     480      #buddypress #activity-stream .activity-comments > ul .acomment-content, #buddypress #activity-stream .activity-comments > ul .acomment-meta, #buddypress #activity-stream .activity-comments > ul .acomment-options {
     481        margin: 5px; }
     482      #buddypress #activity-stream .activity-comments > ul .acomment-content {
     483        padding: 0 10px; } }
    459484  #buddypress #activity-stream .activity-comments .ac-reply-avatar {
    460485    display: none; }

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

    r9876 r9894  
    2121// @media screen and (min-width: 87.6875em)
    2222
    23 // Mixins and Variabals
     23// Mixins and Variables
    2424
    2525// Common margin values
    … …  
    870870
    871871                        li.activity-item {
    872                                 padding: $spacing-val-md;
     872                                padding: $spacing-val-md 0;
    873873                        }
    874874
    … …  
    912912                                        margin-left: 70px;
    913913                                }
    914                         }
     914
     915                                ul {
     916                                        // all nested ul margins & padding flattened initially
     917                                        margin-left: 1%;
     918                                        padding-left: 0;
     919
     920                                        @media screen and (min-width: 30em) {
     921                                                margin-left: 1%;
     922                                                padding-left: 1em;
     923                                        }
     924                                }
     925
     926                                ul li {
     927                                        border-left: 1px solid $border-light;
     928                                        border-top: 0;
     929                                        padding-left: 0.2em;
     930                                }
     931
     932                                .acomment-meta {border-bottom: 1px solid $border-light; font-style: italic;}
     933
     934                                // Display the user avatar stacked up to 30em
     935                                // reduce/widen the content margins
     936                                @media screen and (max-width: 38.75em) {
     937                                        .acomment-avatar {
     938                                                display: block;
     939                                                text-align: center;
     940
     941                                                a,
     942                                                img.avatar {display: inline; float: none;}
     943                                        }
     944
     945                                        .acomment-content,
     946                                        .acomment-meta,
     947                                        .acomment-options {
     948                                                margin: $spacing-val-xs;
     949                                        }
     950
     951                                        .acomment-content {padding: 0 $spacing-val-sm;}
     952                                } // close @media
     953
     954                        } // close the ul li comments construct
    915955
    916956                        .ac-reply-avatar {display: none;}

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

    r9880 r9894  
    354354  #buddypress .activity-list .activity-content .activity-inner {
    355355    margin: 10px 0; }
    356 @media screen and (min-width: 400px) {
     356@media screen and (min-width: 594px) {
    357357  #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
    358358    float: right;
    … …  
    367367    overflow: hidden; } }
    368368
     369body.activity-permalink #buddypress {
     370  background: transparent; }
     371  @media screen and (max-width: 760px) {
     372    body.activity-permalink #buddypress .activity-list li .activity-content, body.activity-permalink #buddypress .activity-list li .activity-comments {
     373      margin-right: 0; } }
     374
    369375/**
    370376*-------------------------------------------------
    … …  
    373379*/
    374380#buddypress .activity .activity-comments {
    375   border-right: 1px solid rgba(0, 0, 0, 0.1);
     381  margin-right: 0;
    376382  margin-top: 5px; }
     383  @media screen and (min-width: 594px) {
     384    #buddypress .activity .activity-comments {
     385      margin-right: 70px; } }
    377386  #buddypress .activity .activity-comments ul {
    378387    background: rgba(247, 247, 247, 0.6);
    379388    margin: 30px 2px 0 0; }
     389  #buddypress .activity .activity-comments ul ul {
     390    border-right: 1px solid rgba(0, 0, 0, 0.1);
     391    padding-right: 2%; }
     392  @media screen and (max-width: 400px) {
     393    #buddypress .activity .activity-comments .acomment-avatar {
     394      display: block;
     395      text-align: center; }
     396      #buddypress .activity .activity-comments .acomment-avatar a, #buddypress .activity .activity-comments .acomment-avatar img.avatar {
     397        display: inline;
     398        float: none; }
     399    #buddypress .activity .activity-comments .acomment-content, #buddypress .activity .activity-comments .acomment-meta, #buddypress .activity .activity-comments .acomment-options {
     400      margin: 5px; }
     401    #buddypress .activity .activity-comments .acomment-content {
     402      padding: 0 10px; } }
    380403  #buddypress .activity .activity-comments .ac-form input[type="submit"], #buddypress .activity .activity-comments .ac-form .ac-reply-cancel {
    381404    color: rgba(43, 43, 43, 0.8);

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

    r9880 r9894  
    354354  #buddypress .activity-list .activity-content .activity-inner {
    355355    margin: 10px 0; }
    356 @media screen and (min-width: 400px) {
     356@media screen and (min-width: 594px) {
    357357  #buddypress .activity-list li.activity-item:not(.mini) .activity-avatar {
    358358    float: left;
    … …  
    367367    overflow: hidden; } }
    368368
     369body.activity-permalink #buddypress {
     370  background: transparent; }
     371  @media screen and (max-width: 760px) {
     372    body.activity-permalink #buddypress .activity-list li .activity-content, body.activity-permalink #buddypress .activity-list li .activity-comments {
     373      margin-left: 0; } }
     374
    369375/**
    370376*-------------------------------------------------
    … …  
    373379*/
    374380#buddypress .activity .activity-comments {
    375   border-left: 1px solid rgba(0, 0, 0, 0.1);
     381  margin-left: 0;
    376382  margin-top: 5px; }
     383  @media screen and (min-width: 594px) {
     384    #buddypress .activity .activity-comments {
     385      margin-left: 70px; } }
    377386  #buddypress .activity .activity-comments ul {
    378387    background: rgba(247, 247, 247, 0.6);
    379388    margin: 30px 0 0 2px; }
     389  #buddypress .activity .activity-comments ul ul {
     390    border-left: 1px solid rgba(0, 0, 0, 0.1);
     391    padding-left: 2%; }
     392  @media screen and (max-width: 400px) {
     393    #buddypress .activity .activity-comments .acomment-avatar {
     394      display: block;
     395      text-align: center; }
     396      #buddypress .activity .activity-comments .acomment-avatar a, #buddypress .activity .activity-comments .acomment-avatar img.avatar {
     397        display: inline;
     398        float: none; }
     399    #buddypress .activity .activity-comments .acomment-content, #buddypress .activity .activity-comments .acomment-meta, #buddypress .activity .activity-comments .acomment-options {
     400      margin: 5px; }
     401    #buddypress .activity .activity-comments .acomment-content {
     402      padding: 0 10px; } }
    380403  #buddypress .activity .activity-comments .ac-form input[type="submit"], #buddypress .activity .activity-comments .ac-form .ac-reply-cancel {
    381404    color: rgba(43, 43, 43, 0.8);

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

    r9880 r9894  
    2323//@media screen and (min-width: 1110px)
    2424
    25 // Mixins and Variabals
     25// Mixins and Variables
    2626
    2727// Common margin values
    … …  
    776776                }
    777777
    778                 @media screen and (min-width: 400px) {
     778                @media screen and (min-width: 594px) {
    779779                        li.activity-item:not(.mini) {
    780780                                .activity-avatar {
    … …  
    804804} // close #buddypress
    805805
     806// Activity Single Item 'Permalink' Page
     807body.activity-permalink {
     808        #buddypress {
     809                // remove user account faux column background
     810                background: transparent;
     811
     812                .activity-list {
     813                        li {
     814                                @media screen and (max-width: 760px) {
     815                                        .activity-content,
     816                                        .activity-comments {
     817                                                margin-left: 0;
     818                                        }
     819                                }
     820                        }
     821                }
     822        }
     823}
     824
    806825/**
    807826*-------------------------------------------------
    … …  
    813832        .activity {
    814833                .activity-comments {
    815                         border-left: 1px solid $border-light;
     834                //      border-left: 1px solid $border-light;
     835                        margin-left: 0;
    816836                        margin-top: 5px;
     837
     838                        @media screen and (min-width: 594px) {
     839                                margin-left: 70px;
     840                        }
    817841
    818842                        ul {
    … …  
    820844                                margin: 30px 0 0 2px;
    821845                        }
     846
     847                        ul ul {
     848                                border-left: 1px solid $border-light;
     849                                padding-left: 2%;
     850                        }
     851
     852                        // Display the user avatar stacked up to 594px
     853                        // reduce/widen the content margins
     854                        @media screen and (max-width: 400px) {
     855                                .acomment-avatar {
     856                                        display: block;
     857                                        text-align: center;
     858
     859                                        a,
     860                                        img.avatar {display: inline; float: none;}
     861                                }
     862
     863                                .acomment-content,
     864                                .acomment-meta,
     865                                .acomment-options {
     866                                        margin: $spacing-val-xs;
     867                                }
     868
     869                                .acomment-content {padding: 0 $spacing-val-sm;}
     870                        } // close @media
    822871
    823872                        .ac-form {
Note: See TracChangeset for help on using the changeset viewer.