Ticket #6290: 6290.layout.01.patch

src/bp-core/css/avatar.css

@@ -1 +1 @@
 div.bp-avatar-status {
-        clear:both;
-        margin:1em 0;
+        clear: both;
+        margin: 1em 0;
 }
 
 div.bp-avatar-status p.updated {
@@ -21 +21 @@
 }
 
 .progress {
+        background: none;
+        border: 1px solid #d1d1d1;
         float: right;
         height: 22px;
-        margin: 6px 10px 0 0;
-        width: 200px;
         line-height: 2em;
+        margin: 6px 10px 0 0;
+        margin-bottom: 2px;
         padding: 0;
         overflow: hidden;
-        margin-bottom: 2px;
-        border: 1px solid #d1d1d1;
-        background: none;
+        width: 200px;
 }
 
 .bar {
-        z-index: 9;
+        background-color: #c3ff88;
         width: 0;
         height: 100%;
-        background-color: #c3ff88;
+        z-index: 9;
 }
 
 .bp-uploader-progress div.error {
-        font-size: 90%;
-        display: block;
-        padding: 10px 15px;
         background-color: #fdc;
         border: 1px solid #a00;
         color: #800;
+        display: block;
+        font-size: 90%;
+        padding: 10px 15px;
 }
 
 #bp-uploader-warning, #bp-webcam-message p.warning {
-        margin:1em 0;
-        font-size: 90%;
-        display: block;
-        padding: 10px 15px;
         background-color: #ffec8b;
         border: 1px solid #fc0;
         color: #440;
+        display: block;
+        font-size: 90%;
+        margin: 1em 0;
+        padding: 10px 15px;
 }
 
 div.bp-avatar-nav {
-        clear:both;
         background: transparent;
+        clear: both;
         margin: 10px 0 10px;
         overflow: hidden;
 }
@@ -72 +72 @@
 }
 
 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
-        float: left;
-        margin: 0;
-        list-style: none;
- }
+        float: left;
+        margin: 0;
+        list-style: none;
+}
 
 .avatar-nav-items li a {
-        display: block;
-        padding: 5px 10px;
-        text-decoration: none;
+        display: block;
+        padding: 5px 10px;
+        text-decoration: none;
 }
 
 .avatar-nav-items li.current a {
         background-color: #eee;
         color: #555;
-        opacity: .8;
         font-weight: bold;
+        opacity: 0.8;
 }
 
 #drag-drop-area {
@@ -100 +100 @@
 }
 
 .drag-drop-inside p {
-        display:none;
+        display: none;
 }
 
 .drag-drop-inside p.drag-drop-buttons {
-        margin-top:80px;
+        margin-top: 80px;
         text-align: center;
 }
+
 .drag-drop .drag-drop-inside p.drag-drop-buttons {
-        margin:auto;
+        margin: auto;
         text-align: auto;
 }
 
+.drag-drop #drag-drop-area {
+        display: table;
+        height: 100%;
+        width: 100%;
+}
+
 .drag-drop .drag-drop-inside {
-        margin: 70px auto 0;
-        width: 250px;
+        display: table-cell;
+        padding: 40px 0;
+        text-align: center;
+        vertical-align: middle;
 }
 
-.drag-drop .drag-drop-inside p, .drag-drop-inside p.drag-drop-buttons {
+.drag-drop .drag-drop-inside p,
+.drag-drop-inside p.drag-drop-buttons {
         display: block;
 }
 
@@ -128 +138 @@
         text-align: center;
 }
 
+.drag-drop-inside p.drag-drop-info {margin-top: 0;}
+
 #avatar-to-crop {
-        float: left;
-        margin: 0 20px 20px 0;
+        margin: 0 auto 20px ;
         text-align: left;
 }
+
+#bp-webcam-avatar #avatar-to-crop {
+        float: left;
+        margin: 0 0 20px;
+}
+
+#avatar-to-crop .jcrop-holder {
+        margin: 0 auto;
+}
+
+.avatar-crop-management {
+        clear: left;
+        overflow: hidden;
+        padding-top: 20px;
+        text-align: center;
+}
+
+#bp-webcam-avatar .avatar-crop-management {
+        clear: none;
+        float: none;
+        overflow: visible;
+        padding-top: 0;
+        width: auto;
+}
+
 #avatar-crop-pane {
+        margin: 0 auto;
         overflow: hidden;
 }
 
-#avatar-crop-actions {
-        margin: 20px 0;
+#bp-webcam-avatar #avatar-to-crop {
+        border: 1px solid #eee;
+        max-width: 100%;
+        width: 100%;
+}
+
+@media screen and (min-width: 801px) {
+        #bp-webcam-avatar #avatar-to-crop {
+                max-width: 64%;
+                width: 64%;
+        }
+}
+
+#avatar-crop-actions a {
+        display: block;
+}
+
+#bp-webcam-avatar #avatar-crop-actions {
+        float: left;
+        margin: 0 0 20px 0;
+        width: 50%;
+}
+
+#avatar-crop-actions a.button {
+        margin-top: 10px;
+}
+
+#bp-webcam-avatar #avatar-crop-actions a.button {
+        display: block;
+        margin: 0 0 5px;
+        padding: 4px 0;
+        width: 100%;
 }
 
 #avatar-to-crop img,
@@ -152 +219 @@
 }
 
 #bp-webcam-avatar video {
-        float:left;
-        width:450px;
+        float: left;
+        margin-bottom: 0;
+        max-width: 100%;
+        width: 100%;
 }
 
 #bp-webcam-avatar #avatar-crop-pane {
         border: 2px dashed #bbb;
+        clear: left;
+        float: right;
+        margin: 0  40px 10px 0;
+        overflow: hidden;
+}
+
+/**
+*  Users can define avatar constants with new dimension values
+*  If they do, we'll ensure the layouts preserved by enforcing a max width
+*  that matches bp default settings.
+*/
+#bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+        max-width: 150px;
+        max-height: 150px;
+}
+
+#avatar-crop-pane canvas {
+        height: auto;
+        width: 100%;
+        max-width: 100%;
+}
+
+.group-avatar .bp-avatar .avatar-crop-management {
+        margin-left: 0;
+        padding-top: 0;
+        width: auto;
+}
+
+.bp-avatar .avatar-crop-management.adjust {
+        float: left;
+        clear: none;
+        padding-top: 0;
+}
+
+.bp-avatar #avatar-to-crop.adjust {
+        float: left;
+        margin-right: 20px;
+}
+
+@media screen and (max-width: 480px) {
+
+        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions,
+        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+                float: none;
+        }
+
+        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+                margin: 0 auto 10px;
+        }
+
+        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions  {
+                width: auto;
+        }
+
+}
+
+@media screen and (min-width: 801px) {
+
+        #bp-webcam-avatar .avatar-crop-management {
+                clear: none;
+                float: right;
+        }
+
+        #bp-webcam-avatar .avatar-crop-management #avatar-crop-pane {
+                float: none;
+                margin: 0 auto 10px;
+        }
+
+        #bp-webcam-avatar .avatar-crop-management #avatar-crop-actions {
+                float: left;
+                width: 100%;
+        }
+
 }
 
 /** Admin Profile **/
 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent,
 body.profile_page_bp-profile-edit.modal-open #TB_ajaxContent {
-        width:95%!important;
-        height:95%!important;
+        height: 95% !important;
+        width: 95% !important;
 }
 
 body.users_page_bp-profile-edit.modal-open #TB_ajaxContent p.updated,
@@ -174 +316 @@
         display: block;
         padding: 10px 15px;
 }
+
+.wp-admin #TB_window .bp-avatar #avatar-to-crop {
+        float: left;
+        margin: 0;
+}
+.wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
+        margin-bottom: 20px;
+}
+@media screen and (min-width: 783px) {
+
+        .wp-admin #TB_window .bp-avatar .avatar-crop-management {
+                clear: none;
+                float: left;
+                margin-left: 20px;
+                padding-top: 0;
+                text-align: center;
+
+        }
+
+}
+
+.wp-admin #TB_window .bp-avatar #avatar-to-crop video {
+                width: 100%;
+        }
+
+.wp-admin #TB_window .bp-avatar .avatar-crop-management a.button {
+        height: auto;
+        line-height: inherit;
+}
+
+@media screen and (min-width: 810px) {
+        .wp-admin #TB_window .bp-avatar #bp-webcam-avatar #avatar-to-crop {
+                max-width: none;
+                width: 76%;
+        }
+
+        .wp-admin #TB_window #bp-webcam-avatar .avatar-crop-management {
+                max-width: none;
+                width: auto;
+        }
+}

src/bp-core/js/avatar.js

@@ -494 +494 @@
                 initCropper: function() {
                         var self = this,
                                 tocrop = this.$el.find( '#avatar-to-crop img' ),
+                                availableWidth = this.$el.width(),
                                 selection = {}, crop_top, crop_bottom, crop_left, crop_right, nh, nw;
 
                         if ( ! _.isUndefined( this.options.full_h ) && ! _.isUndefined( this.options.full_w ) ) {
@@ -503 +504 @@
                         selection.w = this.model.get( 'width' );
                         selection.h = this.model.get( 'height' );
 
+                        /**
+                         * Make sure the crop preview is at the right of the avatar
+                         * if the available width allowes it.
+                         */
+                        if ( this.options.full_w + selection.w + 20 < availableWidth ) {
+                                $( '#avatar-to-crop' ).addClass( 'adjust' );
+                                this.$el.find( '.avatar-crop-management' ).addClass( 'adjust' );
+                        }
+
                         if ( selection.h <= selection.w ) {
                                 crop_top    = Math.round( selection.h / 4 );
                                 nh = nw     = Math.round( selection.h / 2 );

src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/camera.php

@@ -17 +17 @@
                 </div>
         <# } else { #>
                 <div id="avatar-to-crop"></div>
-                <div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
-                <div id="avatar-crop-actions">
-                        <a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
-                        <a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
+                <div class="avatar-crop-management">
+                        <div id="avatar-crop-pane" class="avatar" style="width:{{data.w}}px; height:{{data.h}}px"></div>
+                        <div id="avatar-crop-actions">
+                                <a class="button avatar-webcam-capture" href="#"><?php esc_html_e( 'Capture', 'buddypress' );?></a>
+                                <a class="button avatar-webcam-save" href="#"><?php esc_html_e( 'Save', 'buddypress' );?></a>
+                        </div>
                 </div>
         <# } #>
 </script>

src/bp-templates/bp-legacy/buddypress/assets/_attachments/avatars/crop.php

@@ -14 +14 @@
         <div id="avatar-to-crop">
                 <img src="{{data.url}}"/>
         </div>
-        <div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
-                <img src="{{data.url}}" id="avatar-crop-preview"/>
-        </div>
-        <div id="avatar-crop-actions">
-                <a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
+        <div class="avatar-crop-management">
+                <div id="avatar-crop-pane" class="avatar" style="width:{{data.full_w}}px; height:{{data.full_h}}px">
+                        <img src="{{data.url}}" id="avatar-crop-preview"/>
+                </div>
+                <div id="avatar-crop-actions">
+                        <a class="button avatar-crop-submit" href="#"><?php esc_html_e( 'Crop Image', 'buddypress' ); ?></a>
+                </div>
         </div>
 </script>