Skip to:
Content

BuddyPress.org

Ticket #6291: twentyfifteen-comp-style.13.patch

File twentyfifteen-comp-style.13.patch, 8.3 KB (added by hnla, 6 years ago)

Address Single Groups - item-header responsive breakpoint layout, ibasic pass to style item-body content screens, update navigation to mirror user account vert nav style.

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

     
    1111// of managing media queries, scalability & flexibility .
    1212
    1313// Twentyfifteen Media Queries / Breakpoints
    14 // @media screen and (min-width: 22em) // Additional for xtra small mobile
     14// @media screen and (max-width: 22em) // Additional for xtra small mobile only
     15// @media screen and (max-width: 30em) // Additional small only
    1516// @media screen and (min-width: 38.75em)
    1617// @media screen and (min-width: 46.25em)
    1718// @media screen and (min-width: 55em)
     
    3334        font-size: ($font-size * 1px);
    3435        font-size: $rem-font-value + rem;
    3536}
     37
     38// Border border-radius mixins
     39// To allow mixins to pass cscc-lint tests we will not provide vendor prefix
     40// until such time as exemption lists can be built for the scss-lint.yml
     41
     42@mixin border-radius($radius) {
     43//      -webkit-border-radius: $radius;
     44//      -moz-border-radius: $radius;
     45//      -ms-border-radius: $radius;
     46        border-radius: $radius;
     47        background-clip: padding-box;
     48}
     49
     50@mixin border-top-radius($radius) {
     51//      -webkit-border-top-right-radius: $radius;
     52        border-top-right-radius: $radius;
     53//      -webkit-border-top-left-radius: $radius;
     54        border-top-left-radius: $radius;
     55        background-clip: padding-box;
     56}
     57
     58@mixin border-right-radius($radius) {
     59//      -webkit-border-bottom-right-radius: $radius;
     60        border-bottom-right-radius: $radius;
     61//      -webkit-border-top-right-radius: $radius;
     62        border-top-right-radius: $radius;
     63        background-clip: padding-box;
     64}
     65
     66@mixin border-bottom-radius($radius) {
     67//      -webkit-border-bottom-right-radius: $radius;
     68        border-bottom-right-radius: $radius;
     69//      -webkit-border-bottom-left-radius: $radius;
     70        border-bottom-left-radius: $radius;
     71        background-clip: padding-box;
     72}
     73
     74@mixin border-left-radius($radius) {
     75//      -webkit-border-bottom-left-radius: $radius;
     76        border-bottom-left-radius: $radius;
     77//      -webkit-border-top-left-radius: $radius;
     78        border-top-left-radius: $radius;
     79        background-clip: padding-box;
     80}
     81
     82// Box sizing
     83
     84@mixin box-model($box-model) {
     85//      -webkit-box-sizing: $box-model;
     86//      -moz-box-sizing: $box-model;
     87        box-sizing: $box-model;
     88}
     89
    3690// Variabals: color definitions
    3791$content-background: #fff;
    3892$light-background:   #f7f7f7;
     
    76130        4.4 - Blogs Loop
    771315.0 - Directories - Members, Groups, Blogs, Forums
    781326.0 - Single Group Screens
     133 6.1 - Item-header
     134 6.2 - Management settings screens
     135 6.3 - Group members list
    791367.0 - Single User Account Screens
    80137        7.1 - Notifications
    81138        7.2 - Private Messaging Threads
     
    307364// are being used.
    308365
    309366@media screen and (min-width: 55em) {
    310         .bp-user #buddypress {
     367        /*.bp-user*/ #buddypress {
    311368                background: $light-background;
    312369
    313370                #item-header,
     
    484541                                        }
    485542                                        // Provisionally lets keep the 'action' div
    486543                                        //position but inline-block the buttons
     544
    487545                                        @media screen and (min-width: 38.75em) {
    488546                                                // keep buttons to a row small tablet up
    489547                                                margin: 0 $spacing-val-sm $spacing-val-sm 0;
    490548                                                width: auto;
    491549                                        } // close @media
     550
    492551                                        @media screen and (min-width: 59.6875em) {
    493552                                                // take buttons to block to stack them when floated right
    494553                                                clear: right;
     
    683742                                }
    684743                        }
    685744                }
    686 /*
    687                 li {
    688                         .item {
    689                                 .update {
    690                                         border-left: 1px solid rgba($border-color, .4);
     745
     746        } // close #members-list
     747} //close #BuddyPress
     748
     749/**
     750*-------------------------------------------------------------------------------
     751* @section 6.0 - Single Group Screens
     752*-------------------------------------------------------------------------------
     753*/
     754
     755
     756        /**
     757        *------------------------------------------------------
     758        * @subsection 6.1 - item-header
     759        *------------------------------------------------------
     760        */
     761
     762.groups {
     763        #buddypress {
     764
     765                // Move visual flow of avatar & item-actions at narrow width,
     766                // avatar first after group title
     767                @media screen and (max-width: 38.75em) {
     768                        div#item-header {
     769                                display: flex;
     770                                flex-direction: column;
     771
     772                                #item-header-avatar {
     773                                        order: 1;
     774                                        text-align: center;
     775
     776                                        a {
     777                                                border-bottom: 0;
     778
     779                                                img {
     780                                                        display: inline-block;
     781                                                        float: none;
     782                                                }
     783                                        }
     784                                }
     785
     786                                #item-header-content {order: 2;}
     787
     788                                #item-actions {order: 3;}
     789                        }
     790                } // close @media
     791
     792                div#item-header {
     793
     794                        div#item-actions {
     795                                margin: 0;
     796                                width: 100%;
     797
     798                                @media screen and (min-width: 38.75em) {
     799                                        clear: none;
     800                                        float: right;
     801                                        width: 50%;
     802                                }
     803
     804                                h3 {
     805                                        background: $dark-background;
     806                                        color: $content-background;
     807                                        @include font-size(14);
     808
     809                                        @media screen and (min-width: 46.25em) {
     810                                                @include font-size(16);
     811                                        }
     812                                        padding: 0.2em;
     813                                }
     814                        } // close item-actions
     815
     816                        @media screen and (min-width: 46.25em) {
     817
     818                                #item-header-avatar,
     819                                #item-header-content {
     820                                        float: left;
     821                                }
     822
     823                                #item-header-avatar {
     824                                        width: 21%;
     825                                }
     826
     827                                #item-header-content {
     828                                        margin-left: 4%;
     829                                        width: 40%;
     830                                }
     831
     832                                div#item-actions {
     833                                        float: right;
     834                                        width: 28%;
     835                                }
     836
     837                        } // close @media
     838
     839                } // close #item-header
     840        } // close #buddypress
     841} // close .groups
     842
     843/**
     844*-------------------------------------------------------
     845* @subsection 6.2 - Management settings screens
     846*-------------------------------------------------------
     847*/
     848
     849        // headings settings screens & general global settings styles
     850.groups {
     851        #group-settings-form {
     852                h4 {
     853                        background: $dark-background;
     854                        color: $content-background;
     855                        padding: 0.2em;
     856                }
     857        }
     858}
     859
     860.groups.edit-details {
     861        #group-settings-form {
     862
     863                label {
     864                        background: $dark-background;
     865                        @include border-top-radius(4px);
     866                        color: $content-background;
     867                        display: inline-block;
     868                        margin-bottom: 0;
     869                        padding: 0.2em;
     870                        width: 80%;
     871
     872                        @media screen and (min-width: 38.75em) {
     873                                width: 40%;
     874                        }
     875
     876                }
     877
     878                textarea + p label {
     879                        background: none;
     880                        color: inherit;
     881                        @include font-size(14);
     882                        width: auto;
     883                }
     884
     885        }
     886} // close .groups.edit-details
     887
     888.groups.group-settings {
     889        #group-settings-form {
     890
     891                div.radio label {
     892                        border: 1px solid $border-light;
     893                        padding: 0.2em;
     894
     895                        ul {
     896                                color: rgba($body-text, 0.6);
     897                                @include font-size(14);
     898                        }
     899                }
     900
     901        }
     902} // close .groups.group-settings
     903
     904.groups.manage-members {
     905        #group-settings-form {
     906                .item-list {
     907                        li {
     908                                border-bottom: 1px solid $border-light;
     909
     910                                img,
     911                                h5 {
     912                                        float: left;
     913
     914                                        > a {border-bottom: 0;}
     915                                }
     916
     917                                span.small {
     918                                        clear: left;
    691919                                        display: block;
    692                                         margin: .5em 0;
    693                                         padding-left: .3em;
     920                                        float: none;
     921                                        margin-top: $spacing-val-sm;
     922
     923                                        a {
     924                                                display: inline-block;
     925                                                margin: $spacing-val-xs 0;
     926                                                width: 100%;
     927
     928                                                @media screen and (min-width: 38.75em) {
     929                                                        width: auto;
     930                                                }
     931                                        }
    694932                                }
     933
     934                                h5 {
     935                                        margin: 0;
     936                                }
     937
    695938                        }
    696939                }
     940        }
     941} // close .groups.manage-members
     942
     943/**
     944*------------------------------------------------------
     945* @subsection 6.3 - Group Members list
     946*------------------------------------------------------
    697947*/
    698         } // close #members-list
    699 } //close #BuddyPress
    700948
     949// Massage the members search for groups nav specifically
     950.groups.group-members {
     951        #subnav {
     952                li {
     953                        @media screen and (max-width: 38.75em) {
     954                                background: #fff;
     955                                padding: $spacing-val-md 0;
     956                        }
     957                        width: 100%;
     958
     959                        #search-members-form {
     960                                float: right;
     961
     962                                @media screen and (max-width: 38.75em) {
     963                                        margin: 0;
     964                                        width: 100%;
     965
     966                                        label {
     967                                                input[type="text"] {width: 100%;}
     968                                        }
     969                                }
     970
     971                                margin: $spacing-val-xs $spacing-val-xs 0 0;
     972                        }
     973                }
     974        }
     975}
     976
    701977/**
    702978*-------------------------------------------------------------------------------
    703979* @section 7.0 - Single User Account Screens
     
    9051181        }
    9061182
    9071183        div.dir-search,
    908         div.message-search {
     1184        div.message-search,
     1185        li.groups-members-search
     1186         {
    9091187                float: none;
    9101188                margin: $spacing-val-sm 0;
    9111189
     
    9541232        // Shift the search parent to the right and allow to shrinkwrap
    9551233        @media screen and (min-width: 38.75em) {
    9561234                div.dir-search,
    957                 div.message-search {
     1235                div.message-search,
     1236                li.groups-members-search {
    9581237                        float: right;
    9591238                        margin-bottom: 5px !important;
    9601239