Skip to:
Content

BuddyPress.org

Changeset 9799


Ignore:
Timestamp:
04/24/2015 05:17:12 PM (4 years ago)
Author:
imath
Message:

Avatar UI: Improve templates markup and general layout

avatar.css has been improved to maximize a nice display of the avatar UI in latest WordPress default themes and devices. General appearence has been also improved especially the camera view.

Props hnla

See #6290

Location:
trunk/src
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/css/avatar-rtl.css

    r9766 r9799  
    11div.bp-avatar-status {
    2     clear:both;
    3     margin:1em 0;
     2    clear: both;
     3    margin: 1em 0;
    44}
    55
     
    2222
    2323.progress {
     24    background: none;
     25    border: 1px solid #d1d1d1;
    2426    float: left;
    2527    height: 22px;
     28    line-height: 2em;
    2629    margin: 6px 0 0 10px;
     30    margin-bottom: 2px;
     31    padding: 0;
     32    overflow: hidden;
    2733    width: 200px;
    28     line-height: 2em;
    29     padding: 0;
    30     overflow: hidden;
    31     margin-bottom: 2px;
    32     border: 1px solid #d1d1d1;
    33     background: none;
    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;
     
    7373
    7474.bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
    75     float: right;
    76     margin: 0;
    77     list-style: none;
    78  }
     75    float: right;
     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
     
    8787    background-color: #eee;
    8888    color: #555;
    89     opacity: .8;
    9089    font-weight: bold;
     90    opacity: 0.8;
    9191}
    9292
     
    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;
    118 }
    119 
    120 .drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
     123    display: table-cell;
     124    padding: 40px 0;
     125    text-align: center;
     126    vertical-align: middle;
     127}
     128
     129.drag-drop .drag-drop-inside p,
     130.drag-drop-inside p.drag-drop-buttons {
    121131    display: block;
    122132}
     
    129139}
    130140
     141.drag-drop-inside p.drag-drop-info {margin-top: 0;}
     142
    131143#avatar-to-crop {
    132     float: right;
    133     margin: 0 0 20px 20px;
     144    margin: 0 auto 20px ;
    134145    text-align: right;
    135146}
     147
     148#bp-webcam-avatar #avatar-to-crop {
     149    float: right;
     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: right;
     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 {
    137     overflow: hidden;
    138 }
    139 
    140 #avatar-crop-actions {
    141     margin: 20px 0;
     173    margin: 0 auto;
     174    overflow: hidden;
     175}
     176
     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: right;
     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
     
    153220
    154221#bp-webcam-avatar video {
    155     float:right;
    156     width:450px;
     222    float: right;
     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: right;
     231    float: left;
     232    margin: 0  0 10px 40px;
     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-right: 0;
     254    padding-top: 0;
     255    width: auto;
     256}
     257
     258.bp-avatar .avatar-crop-management.adjust {
     259    float: right;
     260    clear: none;
     261    padding-top: 0;
     262}
     263
     264.bp-avatar #avatar-to-crop.adjust {
     265    float: right;
     266    margin-left: 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: left;
     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: right;
     300        width: 100%;
     301    }
     302
    161303}
    162304
     
    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
     
    175317    padding: 10px 15px;
    176318}
     319
     320.wp-admin #TB_window .bp-avatar #avatar-to-crop {
     321    float: right;
     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: right;
     332        margin-right: 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}
  • trunk/src/bp-core/css/avatar.css

    r9766 r9799  
    11div.bp-avatar-status {
    2     clear:both;
    3     margin:1em 0;
     2    clear: both;
     3    margin: 1em 0;
    44}
    55
     
    2222
    2323.progress {
     24    background: none;
     25    border: 1px solid #d1d1d1;
    2426    float: right;
    2527    height: 22px;
     28    line-height: 2em;
    2629    margin: 6px 10px 0 0;
     30    margin-bottom: 2px;
     31    padding: 0;
     32    overflow: hidden;
    2733    width: 200px;
    28     line-height: 2em;
    29     padding: 0;
    30     overflow: hidden;
    31     margin-bottom: 2px;
    32     border: 1px solid #d1d1d1;
    33     background: none;
    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;
     
    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
     
    8787    background-color: #eee;
    8888    color: #555;
    89     opacity: .8;
    9089    font-weight: bold;
     90    opacity: 0.8;
    9191}
    9292
     
    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;
    118 }
    119 
    120 .drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
     123    display: table-cell;
     124    padding: 40px 0;
     125    text-align: center;
     126    vertical-align: middle;
     127}
     128
     129.drag-drop .drag-drop-inside p,
     130.drag-drop-inside p.drag-drop-buttons {
    121131    display: block;
    122132}
     
    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 {
    137     overflow: hidden;
    138 }
    139 
    140 #avatar-crop-actions {
    141     margin: 20px 0;
     173    margin: 0 auto;
     174    overflow: hidden;
     175}
     176
     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
     
    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
     
    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
     
    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}
  • trunk/src/bp-core/js/avatar.js

    r9754 r9799  
    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
     
    503504            selection.w = this.model.get( 'width' );
    504505            selection.h = this.model.get( 'height' );
     506
     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            }
    505515
    506516            if ( selection.h <= selection.w ) {
  • trunk/src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php

    r9785 r9799  
    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    <# } #>
  • trunk/src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php

    r9766 r9799  
    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>
Note: See TracChangeset for help on using the changeset viewer.