Skip to:
Content

BuddyPress.org

Ticket #6290: 6290.layout.01.patch

File 6290.layout.01.patch, 10.2 KB (added by imath, 5 years ago)
  • src/bp-core/css/avatar.css

    diff --git src/bp-core/css/avatar.css src/bp-core/css/avatar.css
    index 32dceaa..86a91cc 100644
     
    11div.bp-avatar-status {
    2         clear:both;
    3         margin:1em 0;
     2        clear: both;
     3        margin: 1em 0;
    44}
    55
    66div.bp-avatar-status p.updated {
    div.bp-avatar-status p.error { 
    2121}
    2222
    2323.progress {
     24        background: none;
     25        border: 1px solid #d1d1d1;
    2426        float: right;
    2527        height: 22px;
    26         margin: 6px 10px 0 0;
    27         width: 200px;
    2828        line-height: 2em;
     29        margin: 6px 10px 0 0;
     30        margin-bottom: 2px;
    2931        padding: 0;
    3032        overflow: hidden;
    31         margin-bottom: 2px;
    32         border: 1px solid #d1d1d1;
    33         background: none;
     33        width: 200px;
    3434}
    3535
    3636.bar {
    37         z-index: 9;
     37        background-color: #c3ff88;
    3838        width: 0;
    3939        height: 100%;
    40         background-color: #c3ff88;
     40        z-index: 9;
    4141}
    4242
    4343.bp-uploader-progress div.error {
    44         font-size: 90%;
    45         display: block;
    46         padding: 10px 15px;
    4744        background-color: #fdc;
    4845        border: 1px solid #a00;
    4946        color: #800;
     47        display: block;
     48        font-size: 90%;
     49        padding: 10px 15px;
    5050}
    5151
    5252#bp-uploader-warning, #bp-webcam-message p.warning {
    53         margin:1em 0;
    54         font-size: 90%;
    55         display: block;
    56         padding: 10px 15px;
    5753        background-color: #ffec8b;
    5854        border: 1px solid #fc0;
    5955        color: #440;
     56        display: block;
     57        font-size: 90%;
     58        margin: 1em 0;
     59        padding: 10px 15px;
    6060}
    6161
    6262div.bp-avatar-nav {
    63         clear:both;
    6463        background: transparent;
     64        clear: both;
    6565        margin: 10px 0 10px;
    6666        overflow: hidden;
    6767}
    div.bp-avatar-nav { 
    7272}
    7373
    7474.bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
    75         float: left;
    76         margin: 0;
    77         list-style: none;
    78  }
     75        float: left;
     76        margin: 0;
     77        list-style: none;
     78}
    7979
    8080.avatar-nav-items li a {
    81         display: block;
    82         padding: 5px 10px;
    83         text-decoration: none;
     81        display: block;
     82        padding: 5px 10px;
     83        text-decoration: none;
    8484}
    8585
    8686.avatar-nav-items li.current a {
    8787        background-color: #eee;
    8888        color: #555;
    89         opacity: .8;
    9089        font-weight: bold;
     90        opacity: 0.8;
    9191}
    9292
    9393#drag-drop-area {
    div.bp-avatar-nav { 
    100100}
    101101
    102102.drag-drop-inside p {
    103         display:none;
     103        display: none;
    104104}
    105105
    106106.drag-drop-inside p.drag-drop-buttons {
    107         margin-top:80px;
     107        margin-top: 80px;
    108108        text-align: center;
    109109}
     110
    110111.drag-drop .drag-drop-inside p.drag-drop-buttons {
    111         margin:auto;
     112        margin: auto;
    112113        text-align: auto;
    113114}
    114115
     116.drag-drop #drag-drop-area {
     117        display: table;
     118        height: 100%;
     119        width: 100%;
     120}
     121
    115122.drag-drop .drag-drop-inside {
    116         margin: 70px auto 0;
    117         width: 250px;
     123        display: table-cell;
     124        padding: 40px 0;
     125        text-align: center;
     126        vertical-align: middle;
    118127}
    119128
    120 .drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
     129.drag-drop .drag-drop-inside p,
     130.drag-drop-inside p.drag-drop-buttons {
    121131        display: block;
    122132}
    123133
    div.bp-avatar-nav { 
    128138        text-align: center;
    129139}
    130140
     141.drag-drop-inside p.drag-drop-info {margin-top: 0;}
     142
    131143#avatar-to-crop {
    132         float: left;
    133         margin: 0 20px 20px 0;
     144        margin: 0 auto 20px ;
    134145        text-align: left;
    135146}
     147
     148#bp-webcam-avatar #avatar-to-crop {
     149        float: left;
     150        margin: 0 0 20px;
     151}
     152
     153#avatar-to-crop .jcrop-holder {
     154        margin: 0 auto;
     155}
     156
     157.avatar-crop-management {
     158        clear: left;
     159        overflow: hidden;
     160        padding-top: 20px;
     161        text-align: center;
     162}
     163
     164#bp-webcam-avatar .avatar-crop-management {
     165        clear: none;
     166        float: none;
     167        overflow: visible;
     168        padding-top: 0;
     169        width: auto;
     170}
     171
    136172#avatar-crop-pane {
     173        margin: 0 auto;
    137174        overflow: hidden;
    138175}
    139176
    140 #avatar-crop-actions {
    141         margin: 20px 0;
     177#bp-webcam-avatar #avatar-to-crop {
     178        border: 1px solid #eee;
     179        max-width: 100%;
     180        width: 100%;
     181}
     182
     183@media screen and (min-width: 801px) {
     184        #bp-webcam-avatar #avatar-to-crop {
     185                max-width: 64%;
     186                width: 64%;
     187        }
     188}
     189
     190#avatar-crop-actions a {
     191        display: block;
     192}
     193
     194#bp-webcam-avatar #avatar-crop-actions {
     195        float: left;
     196        margin: 0 0 20px 0;
     197        width: 50%;
     198}
     199
     200#avatar-crop-actions a.button {
     201        margin-top: 10px;
     202}
     203
     204#bp-webcam-avatar #avatar-crop-actions a.button {
     205        display: block;
     206        margin: 0 0 5px;
     207        padding: 4px 0;
     208        width: 100%;
    142209}
    143210
    144211#avatar-to-crop img,
    div.bp-avatar-nav { 
    152219}
    153220
    154221#bp-webcam-avatar video {
    155         float:left;
    156         width:450px;
     222        float: left;
     223        margin-bottom: 0;
     224        max-width: 100%;
     225        width: 100%;
    157226}
    158227
    159228#bp-webcam-avatar #avatar-crop-pane {
    160229        border: 2px dashed #bbb;
     230        clear: left;
     231        float: right;
     232        margin: 0  40px 10px 0;
     233        overflow: hidden;
     234}
     235
     236/**
     237*  Users can define avatar constants with new dimension values
     238*  If they do, we'll ensure the layouts preserved by enforcing a max width
     239*  that matches bp default settings.
     240*/
     241#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     242        max-width: 150px;
     243        max-height: 150px;
     244}
     245
     246#avatar-crop-pane canvas {
     247        height: auto;
     248        width: 100%;
     249        max-width: 100%;
     250}
     251
     252.group-avatar .bp-avatar .avatar-crop-management {
     253        margin-left: 0;
     254        padding-top: 0;
     255        width: auto;
     256}
     257
     258.bp-avatar .avatar-crop-management.adjust {
     259        float: left;
     260        clear: none;
     261        padding-top: 0;
     262}
     263
     264.bp-avatar #avatar-to-crop.adjust {
     265        float: left;
     266        margin-right: 20px;
     267}
     268
     269@media screen and (max-width: 480px) {
     270
     271        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
     272        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     273                float: none;
     274        }
     275
     276        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     277                margin: 0 auto 10px;
     278        }
     279
     280        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
     281                width: auto;
     282        }
     283
     284}
     285
     286@media screen and (min-width: 801px) {
     287
     288        #bp-webcam-avatar .avatar-crop-management {
     289                clear: none;
     290                float: right;
     291        }
     292
     293        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
     294                float: none;
     295                margin: 0 auto 10px;
     296        }
     297
     298        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
     299                float: left;
     300                width: 100%;
     301        }
     302
    161303}
    162304
    163305/** Admin Profile **/
    164306body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
    165307body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
    166         width:95%!important;
    167         height:95%!important;
     308        height: 95% !important;
     309        width: 95% !important;
    168310}
    169311
    170312body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,
    body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent p.warning { 
    174316        display: block;
    175317        padding: 10px 15px;
    176318}
     319
     320.wp-admin #TB_window .bp-avatar #avatar-to-crop {
     321        float: left;
     322        margin: 0;
     323}
     324.wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
     325        margin-bottom: 20px;
     326}
     327@media screen and (min-width: 783px) {
     328
     329        .wp-admin #TB_window .bp-avatar .avatar-crop-management {
     330                clear: none;
     331                float: left;
     332                margin-left: 20px;
     333                padding-top: 0;
     334                text-align: center;
     335
     336        }
     337
     338}
     339
     340.wp-admin #TB_window .bp-avatar #avatar-to-crop video {
     341                width: 100%;
     342        }
     343
     344.wp-admin #TB_window .bp-avatar .avatar-crop-management a.button {
     345        height: auto;
     346        line-height: inherit;
     347}
     348
     349@media screen and (min-width: 810px) {
     350        .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
     351                max-width: none;
     352                width: 76%;
     353        }
     354
     355        .wp-admin #TB_window #bp-webcam-avatar .avatar-crop-management {
     356                max-width: none;
     357                width: auto;
     358        }
     359}
  • src/bp-core/js/avatar.js

    diff --git src/bp-core/js/avatar.js src/bp-core/js/avatar.js
    index 7d592f7..7a18c13 100644
    window.bp = window.bp || {}; 
    494494                initCropper: function() {
    495495                        var self = this,
    496496                                tocrop = this.$el.find( '#avatar-to-crop img' ),
     497                                availableWidth = this.$el.width(),
    497498                                selection = {}, crop_top, crop_bottom, crop_left, crop_right, nh, nw;
    498499
    499500                        if ( ! _.isUndefined( this.options.full_h ) && ! _.isUndefined( this.options.full_w ) ) {
    window.bp = window.bp || {}; 
    503504                        selection.w = this.model.get( 'width' );
    504505                        selection.h = this.model.get( 'height' );
    505506
     507                        /**
     508                         * Make sure the crop preview is at the right of the avatar
     509                         * if the available width allowes it.
     510                         */
     511                        if ( this.options.full_w + selection.w + 20 < availableWidth ) {
     512                                $( '#avatar-to-crop' ).addClass( 'adjust' );
     513                                this.$el.find( '.avatar-crop-management' ).addClass( 'adjust' );
     514                        }
     515
    506516                        if ( selection.h <= selection.w ) {
    507517                                crop_top    = Math.round( selection.h / 4 );
    508518                                nh = nw     = Math.round( selection.h / 2 );
  • src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php

    diff --git src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php
    index 5ac2be1..4368796 100644
     
    1717                </div>
    1818        <# } else { #>
    1919                <div id="avatar-to-crop"></div>
    20                 <div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
    21                 <div id="avatar-crop-actions">
    22                         <a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
    23                         <a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
     20                <div class="avatar-crop-management">
     21                        <div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
     22                        <div id="avatar-crop-actions">
     23                                <a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
     24                                <a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
     25                        </div>
    2426                </div>
    2527        <# } #>
    2628</script>
  • src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php

    diff --git src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php
    index 086632c..274e97e 100644
     
    1414        <div id="avatar-to-crop">
    1515                <img src="{{data.url}}"/>
    1616        </div>
    17         <div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
    18                 <img src="{{data.url}}" id="avatar-crop-preview"/>
    19         </div>
    20         <div id="avatar-crop-actions">
    21                 <a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
     17        <div class="avatar-crop-management">
     18                <div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
     19                        <img src="{{data.url}}" id="avatar-crop-preview"/>
     20                </div>
     21                <div id="avatar-crop-actions">
     22                        <a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
     23                </div>
    2224        </div>
    2325</script>