diff --git src/bp-core/css/avatar.css src/bp-core/css/avatar.css
index 32dceaa..86a91cc 100644
|
|
|
1 | 1 | div.bp-avatar-status { |
2 | | clear:both; |
3 | | margin:1em 0; |
| 2 | clear: both; |
| 3 | margin: 1em 0; |
4 | 4 | } |
5 | 5 | |
6 | 6 | div.bp-avatar-status p.updated { |
… |
… |
div.bp-avatar-status p.error { |
21 | 21 | } |
22 | 22 | |
23 | 23 | .progress { |
| 24 | background: none; |
| 25 | border: 1px solid #d1d1d1; |
24 | 26 | float: right; |
25 | 27 | height: 22px; |
26 | | margin: 6px 10px 0 0; |
27 | | width: 200px; |
28 | 28 | line-height: 2em; |
| 29 | margin: 6px 10px 0 0; |
| 30 | margin-bottom: 2px; |
29 | 31 | padding: 0; |
30 | 32 | overflow: hidden; |
31 | | margin-bottom: 2px; |
32 | | border: 1px solid #d1d1d1; |
33 | | background: none; |
| 33 | width: 200px; |
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; |
67 | 67 | } |
… |
… |
div.bp-avatar-nav { |
72 | 72 | } |
73 | 73 | |
74 | 74 | .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 | } |
79 | 79 | |
80 | 80 | .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; |
84 | 84 | } |
85 | 85 | |
86 | 86 | .avatar-nav-items li.current a { |
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 | |
93 | 93 | #drag-drop-area { |
… |
… |
div.bp-avatar-nav { |
100 | 100 | } |
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; |
| 123 | display: table-cell; |
| 124 | padding: 40px 0; |
| 125 | text-align: center; |
| 126 | vertical-align: middle; |
118 | 127 | } |
119 | 128 | |
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 { |
121 | 131 | display: block; |
122 | 132 | } |
123 | 133 | |
… |
… |
div.bp-avatar-nav { |
128 | 138 | text-align: center; |
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 { |
| 173 | margin: 0 auto; |
137 | 174 | overflow: hidden; |
138 | 175 | } |
139 | 176 | |
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%; |
142 | 209 | } |
143 | 210 | |
144 | 211 | #avatar-to-crop img, |
… |
… |
div.bp-avatar-nav { |
152 | 219 | } |
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 | |
163 | 305 | /** Admin Profile **/ |
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 | |
170 | 312 | body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated, |
… |
… |
body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent p.warning { |
174 | 316 | display: block; |
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 | } |
diff --git src/bp-core/js/avatar.js src/bp-core/js/avatar.js
index 7d592f7..7a18c13 100644
|
|
window.bp = window.bp || {}; |
494 | 494 | initCropper: function() { |
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 | |
499 | 500 | if ( ! _.isUndefined( this.options.full_h ) && ! _.isUndefined( this.options.full_w ) ) { |
… |
… |
window.bp = window.bp || {}; |
503 | 504 | selection.w = this.model.get( 'width' ); |
504 | 505 | selection.h = this.model.get( 'height' ); |
505 | 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 | } |
| 515 | |
506 | 516 | if ( selection.h <= selection.w ) { |
507 | 517 | crop_top = Math.round( selection.h / 4 ); |
508 | 518 | nh = nw = Math.round( selection.h / 2 ); |
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
|
|
|
17 | 17 | </div> |
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 | <# } #> |
26 | 28 | </script> |
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
|
|
|
14 | 14 | <div id="avatar-to-crop"> |
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> |