Changeset 9799
- Timestamp:
- 04/24/2015 05:17:12 PM (10 years ago)
- Location:
- trunk/src
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/bp-core/css/avatar-rtl.css
r9766 r9799 1 1 div.bp-avatar-status { 2 clear: both;3 margin: 1em 0;2 clear: both; 3 margin: 1em 0; 4 4 } 5 5 … … 22 22 23 23 .progress { 24 background: none; 25 border: 1px solid #d1d1d1; 24 26 float: left; 25 27 height: 22px; 28 line-height: 2em; 26 29 margin: 6px 0 0 10px; 30 margin-bottom: 2px; 31 padding: 0; 32 overflow: hidden; 27 33 width: 200px; 28 line-height: 2em;29 padding: 0;30 overflow: hidden;31 margin-bottom: 2px;32 border: 1px solid #d1d1d1;33 background: none;34 34 } 35 35 36 36 .bar { 37 z-index: 9;37 background-color: #c3ff88; 38 38 width: 0; 39 39 height: 100%; 40 background-color: #c3ff88;40 z-index: 9; 41 41 } 42 42 43 43 .bp-uploader-progress div.error { 44 font-size: 90%;45 display: block;46 padding: 10px 15px;47 44 background-color: #fdc; 48 45 border: 1px solid #a00; 49 46 color: #800; 47 display: block; 48 font-size: 90%; 49 padding: 10px 15px; 50 50 } 51 51 52 52 #bp-uploader-warning, #bp-webcam-message p.warning { 53 margin:1em 0;54 font-size: 90%;55 display: block;56 padding: 10px 15px;57 53 background-color: #ffec8b; 58 54 border: 1px solid #fc0; 59 55 color: #440; 56 display: block; 57 font-size: 90%; 58 margin: 1em 0; 59 padding: 10px 15px; 60 60 } 61 61 62 62 div.bp-avatar-nav { 63 clear:both;64 63 background: transparent; 64 clear: both; 65 65 margin: 10px 0 10px; 66 66 overflow: hidden; … … 73 73 74 74 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item { 75 76 77 78 75 float: right; 76 margin: 0; 77 list-style: none; 78 } 79 79 80 80 .avatar-nav-items li a { 81 82 83 81 display: block; 82 padding: 5px 10px; 83 text-decoration: none; 84 84 } 85 85 … … 87 87 background-color: #eee; 88 88 color: #555; 89 opacity: .8;90 89 font-weight: bold; 90 opacity: 0.8; 91 91 } 92 92 … … 101 101 102 102 .drag-drop-inside p { 103 display: none;103 display: none; 104 104 } 105 105 106 106 .drag-drop-inside p.drag-drop-buttons { 107 margin-top: 80px;107 margin-top: 80px; 108 108 text-align: center; 109 109 } 110 110 111 .drag-drop .drag-drop-inside p.drag-drop-buttons { 111 margin: auto;112 margin: auto; 112 113 text-align: auto; 113 114 } 114 115 116 .drag-drop #drag-drop-area { 117 display: table; 118 height: 100%; 119 width: 100%; 120 } 121 115 122 .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 { 121 131 display: block; 122 132 } … … 129 139 } 130 140 141 .drag-drop-inside p.drag-drop-info {margin-top: 0;} 142 131 143 #avatar-to-crop { 132 float: right; 133 margin: 0 0 20px 20px; 144 margin: 0 auto 20px ; 134 145 text-align: right; 135 146 } 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 136 172 #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%; 142 209 } 143 210 … … 153 220 154 221 #bp-webcam-avatar video { 155 float:right; 156 width:450px; 222 float: right; 223 margin-bottom: 0; 224 max-width: 100%; 225 width: 100%; 157 226 } 158 227 159 228 #bp-webcam-avatar #avatar-crop-pane { 160 229 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 161 303 } 162 304 … … 164 306 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent, 165 307 body.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; 168 310 } 169 311 … … 175 317 padding: 10px 15px; 176 318 } 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 1 1 div.bp-avatar-status { 2 clear: both;3 margin: 1em 0;2 clear: both; 3 margin: 1em 0; 4 4 } 5 5 … … 22 22 23 23 .progress { 24 background: none; 25 border: 1px solid #d1d1d1; 24 26 float: right; 25 27 height: 22px; 28 line-height: 2em; 26 29 margin: 6px 10px 0 0; 30 margin-bottom: 2px; 31 padding: 0; 32 overflow: hidden; 27 33 width: 200px; 28 line-height: 2em;29 padding: 0;30 overflow: hidden;31 margin-bottom: 2px;32 border: 1px solid #d1d1d1;33 background: none;34 34 } 35 35 36 36 .bar { 37 z-index: 9;37 background-color: #c3ff88; 38 38 width: 0; 39 39 height: 100%; 40 background-color: #c3ff88;40 z-index: 9; 41 41 } 42 42 43 43 .bp-uploader-progress div.error { 44 font-size: 90%;45 display: block;46 padding: 10px 15px;47 44 background-color: #fdc; 48 45 border: 1px solid #a00; 49 46 color: #800; 47 display: block; 48 font-size: 90%; 49 padding: 10px 15px; 50 50 } 51 51 52 52 #bp-uploader-warning, #bp-webcam-message p.warning { 53 margin:1em 0;54 font-size: 90%;55 display: block;56 padding: 10px 15px;57 53 background-color: #ffec8b; 58 54 border: 1px solid #fc0; 59 55 color: #440; 56 display: block; 57 font-size: 90%; 58 margin: 1em 0; 59 padding: 10px 15px; 60 60 } 61 61 62 62 div.bp-avatar-nav { 63 clear:both;64 63 background: transparent; 64 clear: both; 65 65 margin: 10px 0 10px; 66 66 overflow: hidden; … … 73 73 74 74 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item { 75 76 77 78 75 float: left; 76 margin: 0; 77 list-style: none; 78 } 79 79 80 80 .avatar-nav-items li a { 81 82 83 81 display: block; 82 padding: 5px 10px; 83 text-decoration: none; 84 84 } 85 85 … … 87 87 background-color: #eee; 88 88 color: #555; 89 opacity: .8;90 89 font-weight: bold; 90 opacity: 0.8; 91 91 } 92 92 … … 101 101 102 102 .drag-drop-inside p { 103 display: none;103 display: none; 104 104 } 105 105 106 106 .drag-drop-inside p.drag-drop-buttons { 107 margin-top: 80px;107 margin-top: 80px; 108 108 text-align: center; 109 109 } 110 110 111 .drag-drop .drag-drop-inside p.drag-drop-buttons { 111 margin: auto;112 margin: auto; 112 113 text-align: auto; 113 114 } 114 115 116 .drag-drop #drag-drop-area { 117 display: table; 118 height: 100%; 119 width: 100%; 120 } 121 115 122 .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 { 121 131 display: block; 122 132 } … … 129 139 } 130 140 141 .drag-drop-inside p.drag-drop-info {margin-top: 0;} 142 131 143 #avatar-to-crop { 132 float: left; 133 margin: 0 20px 20px 0; 144 margin: 0 auto 20px ; 134 145 text-align: left; 135 146 } 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 136 172 #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%; 142 209 } 143 210 … … 153 220 154 221 #bp-webcam-avatar video { 155 float:left; 156 width:450px; 222 float: left; 223 margin-bottom: 0; 224 max-width: 100%; 225 width: 100%; 157 226 } 158 227 159 228 #bp-webcam-avatar #avatar-crop-pane { 160 229 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 161 303 } 162 304 … … 164 306 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent, 165 307 body.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; 168 310 } 169 311 … … 175 317 padding: 10px 15px; 176 318 } 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 495 495 var self = this, 496 496 tocrop = this.$el.find( '#avatar-to-crop img' ), 497 availableWidth = this.$el.width(), 497 498 selection = {}, crop_top, crop_bottom, crop_left, crop_right, nh, nw; 498 499 … … 503 504 selection.w = this.model.get( 'width' ); 504 505 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 } 505 515 506 516 if ( selection.h <= selection.w ) { -
trunk/src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php
r9785 r9799 18 18 <# } else { #> 19 19 <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> 24 26 </div> 25 27 <# } #> -
trunk/src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php
r9766 r9799 15 15 <img src="{{data.url}}"/> 16 16 </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> 22 24 </div> 23 25 </script>
Note: See TracChangeset
for help on using the changeset viewer.