#1270 Profile Pics uploaded from Android only show 3/4 of picture

#1326 Update all plugins: Croppie from 2.4.0 to 2.6.2

inc/js/classes/BxDolUploader.js

@@ -391,7 +391,7 @@ function BxDolUploaderCrop (sUploaderObject, sStorageObject, sUniqId, options) {
 
         var aExt = ['jpg', 'jpeg', 'png', 'gif'];
 
-        var eCroppie = $("#" + this._sFormContainerId + " .bx-croppie-container").croppie(oOptions);
+        var eCroppie = $("#" + this._sFormContainerId + " .bx-croppie-element").croppie(oOptions);
 
 		$("#" + this._sFormContainerId + ' .bx-crop-rotate').on('click', function(ev) {
 			eCroppie.croppie('rotate', parseInt($(this).data('deg')));
@@ -418,9 +418,9 @@ function BxDolUploaderCrop (sUploaderObject, sStorageObject, sUniqId, options) {
                     eCroppie.croppie('bind', {
                         url: e.target.result
                     });
-                    $("#" + $this._sFormContainerId + " .bx-croppie-container").addClass('ready');
+                    $("#" + $this._sFormContainerId + " .bx-croppie-element").addClass('ready');
                     $("#" + $this._sFormContainerId + " .bx-crop-action").removeClass('bx-btn-disabled');
-                    $("#" + $this._sFormContainerId + " .bx-croppie-container").data('bx-filename', input.files[0].name.replace(/(\.[A-Za-z0-9]+)$/, '.png'));
+                    $("#" + $this._sFormContainerId + " .bx-croppie-element").data('bx-filename', input.files[0].name.replace(/(\.[A-Za-z0-9]+)$/, '.png'));
                 }
                 reader.readAsDataURL(input.files[0]);
             }
@@ -433,7 +433,7 @@ function BxDolUploaderCrop (sUploaderObject, sStorageObject, sUniqId, options) {
             }).then(function(resp) {
                 var fd = new FormData();
 
-                fd.append("f", dataURItoBlob(resp), $("#" + $this._sFormContainerId + " .bx-croppie-container").data('bx-filename'));
+                fd.append("f", dataURItoBlob(resp), $("#" + $this._sFormContainerId + " .bx-croppie-element").data('bx-filename'));
                 $.each(oOptions.bx_form, function (sName) {
                     fd.append(sName, this);
                 });

modules/base/profile/template/css/forms.css

@@ -1,5 +1,5 @@
 @import url(../../../general/template/css/forms.css);
 
-.bx-popup-content-wrapped .bx-croppie-container.bx-base-general-croppie-container {
+.bx-popup-content-wrapped .bx-croppie-element.bx-base-general-croppie-container {
     min-height:190px;
 }

modules/base/profile/template/uploader_form_crop_cover.html

@@ -5,7 +5,7 @@
     <div class="bx-def-padding-sec-bottom bx-croppie-msg"></div>
     <div class="bx-def-padding-sec-bottom" id="__errors_container_id__"></div>
 
-    <div class="bx-croppie-container bx-base-general-croppie-container bx-def-margin-topbottom"></div>
+    <div class="bx-croppie-element bx-base-general-croppie-container bx-def-margin-topbottom"></div>
 
     <div class="bx-def-padding-top bx-clearfix">
         <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-upload bx-btn-primary"><bx_text:_sys_uploader_crop_submit_button /></button>

plugins_public/croppie/croppie.css

@@ -2,63 +2,124 @@
     width: 100%;
     height: 100%;
 }
+
 .croppie-container .cr-image {
-	z-index: -1;
-	position: absolute;
-	top: 0;
-	left: 0;
-	transform-origin: 0 0;
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    max-height: none;
     max-width: none;
 }
+
 .croppie-container .cr-boundary {
-	position: relative;
-	overflow: hidden;
-	margin: 0 auto;
-	z-index: 1;
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    z-index: 1;
     width: 100%;
     height: 100%;
 }
-.croppie-container .cr-viewport {
-	position: absolute;
-	border: 2px solid #fff;
-	margin: auto;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	left: 0;
+
+.croppie-container .cr-viewport,
+.croppie-container .cr-resizer {
+    position: absolute;
+    border: 2px solid #fff;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
     box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
-	z-index: 0;
+    z-index: 0;
+}
+
+.croppie-container .cr-resizer {
+  z-index: 2;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.croppie-container .cr-resizer-vertical,
+.croppie-container .cr-resizer-horisontal {
+  position: absolute;
+  pointer-events: all;
+}
+
+.croppie-container .cr-resizer-vertical::after,
+.croppie-container .cr-resizer-horisontal::after {
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px solid black;
+    background: #fff;
+    width: 10px;
+    height: 10px;
+    content: '';
+}
+
+.croppie-container .cr-resizer-vertical {
+  bottom: -5px;
+  cursor: row-resize;
+  width: 100%;
+  height: 10px;
+}
+
+.croppie-container .cr-resizer-vertical::after {
+    left: 50%;
+    margin-left: -5px;
+}
+
+.croppie-container .cr-resizer-horisontal {
+  right: -5px;
+  cursor: col-resize;
+  width: 10px;
+  height: 100%;
+}
+
+.croppie-container .cr-resizer-horisontal::after {
+    top: 50%;
+    margin-top: -5px;
 }
+
 .croppie-container .cr-original-image {
     display: none;
 }
+
 .croppie-container .cr-vp-circle {
-	border-radius: 50%;
+    border-radius: 50%;
 }
+
 .croppie-container .cr-overlay {
-	z-index: 1;
-	position: absolute;
-	cursor: move;
+    z-index: 1;
+    position: absolute;
+    cursor: move;
+    touch-action: none;
 }
+
 .croppie-container .cr-slider-wrap {
-	width: 75%;
-	margin: 15px auto;
-	text-align: center;
+    width: 75%;
+    margin: 15px auto;
+    text-align: center;
 }
+
 .croppie-result {
-	position: relative; 
-	overflow: hidden;
+    position: relative;
+    overflow: hidden;
 }
+
 .croppie-result img {
-	position: absolute;
+    position: absolute;
 }
+
 .croppie-container .cr-image,
-.croppie-container .cr-overlay, 
+.croppie-container .cr-overlay,
 .croppie-container .cr-viewport {
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
 }
 
 /*************************************/
@@ -68,11 +129,17 @@
 /*************************************/
 
 .cr-slider {
-    -webkit-appearance: none;/*removes default webkit styles*/
-    /*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
-    width: 300px;/*required for proper track sizing in FF*/
+    -webkit-appearance: none;
+/*removes default webkit styles*/
+	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
+    width: 300px;
+/*required for proper track sizing in FF*/
     max-width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background-color: transparent;
 }
+
 .cr-slider::-webkit-slider-runnable-track {
     width: 100%;
     height: 3px;
@@ -80,6 +147,7 @@
     border: 0;
     border-radius: 3px;
 }
+
 .cr-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     border: none;
@@ -89,12 +157,13 @@
     background: #ddd;
     margin-top: -6px;
 }
+
 .cr-slider:focus {
     outline: none;
 }
 /*
 .cr-slider:focus::-webkit-slider-runnable-track {
-    background: #ccc;
+background: #ccc;
 }
 */
 
@@ -105,6 +174,7 @@
     border: 0;
     border-radius: 3px;
 }
+
 .cr-slider::-moz-range-thumb {
     border: none;
     height: 16px;
@@ -115,40 +185,41 @@
 }
 
 /*hide the outline behind the border*/
-.cr-slider:-moz-focusring{
+.cr-slider:-moz-focusring {
     outline: 1px solid white;
     outline-offset: -1px;
 }
 
 .cr-slider::-ms-track {
-    width: 300px;
+    width: 100%;
     height: 5px;
-    background: transparent;/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
-    border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
-    border-width: 6px 0;
-    color: transparent;/*remove default tick marks*/
+    background: transparent;
+/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
+	border-width: 6px 0;
+	color: transparent;/*remove default tick marks*/
 }
 .cr-slider::-ms-fill-lower {
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 10px;
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 10px;
 }
 .cr-slider::-ms-fill-upper {
-    background: rgba(0, 0, 0, 0.5);
-    border-radius: 10px;
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 10px;
 }
 .cr-slider::-ms-thumb {
-    border: none;
-    height: 16px;
-    width: 16px;
-    border-radius: 50%;
-    background: #ddd;
-    margin-top:1px;
+	border: none;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	background: #ddd;
+	margin-top:1px;
 }
 .cr-slider:focus::-ms-fill-lower {
-    background: rgba(0, 0, 0, 0.5);
+	background: rgba(0, 0, 0, 0.5);
 }
 .cr-slider:focus::-ms-fill-upper {
-    background: rgba(0, 0, 0, 0.5);
+	background: rgba(0, 0, 0, 0.5);
 }
 /*******************************************/
 
@@ -156,24 +227,24 @@
 /* Rotation Tools */
 /***********************************/
 .cr-rotate-controls {
-    position: absolute;
-    bottom: 5px;
-    left: 5px;
-    z-index: 1;
+	position: absolute;
+	bottom: 5px;
+	left: 5px;
+	z-index: 1;
 }
 .cr-rotate-controls button {
-    border: 0;
-    background: none;
+	border: 0;
+	background: none;
 }
 .cr-rotate-controls i:before {
-    display: inline-block;
-    font-style: normal;
-    font-weight: 900;
-    font-size: 22px;
+	display: inline-block;
+	font-style: normal;
+	font-weight: 900;
+	font-size: 22px;
 }
 .cr-rotate-l i:before {
-    content: '↺';
+	content: '↺';
 }
 .cr-rotate-r i:before {
-    content: '↻';
+	content: '↻';
 }

studio/template/css/uploaders.css

@@ -2,7 +2,7 @@
 
 
 /*--- Cover crop style ---*/
-.bx-popup-content-wrapped .bx-croppie-container.bx-croppie-container-cover {
+.bx-popup-content-wrapped .bx-croppie-element.bx-croppie-element-cover {
     min-height: 190px;
 }
 
@@ -19,4 +19,4 @@
     float: none;
     display: inline-block;
     vertical-align: top; 
-}
+}

studio/template/uploader_form_crop_cover.html

@@ -5,7 +5,7 @@
     <div class="bx-def-padding-sec-bottom bx-croppie-msg"></div>
     <div class="bx-def-padding-sec-bottom" id="__errors_container_id__"></div>
 
-    <div class="bx-croppie-container bx-croppie-container-cover bx-def-margin-topbottom"></div>
+    <div class="bx-croppie-element bx-croppie-element-cover bx-def-margin-topbottom"></div>
 
     <div class="bx-def-padding-top bx-clearfix">
         <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-upload bx-btn-primary"><bx_text:_sys_uploader_crop_submit_button /></button>

template/css/uploaders.css

@@ -59,7 +59,7 @@
 
 /* crop uploader */
 
-.bx-popup-content-wrapped .bx-croppie-container {
+.bx-popup-content-wrapped .bx-croppie-element {
     padding:0;
     min-height:340px;
 }

template/uploader_form_crop.html

@@ -5,7 +5,7 @@
     <div class="bx-def-padding-sec-bottom bx-croppie-msg"></div>
     <div class="bx-def-padding-sec-bottom" id="__errors_container_id__"></div>
 
-    <div class="bx-croppie-container bx-def-margin-topbottom"></div>
+    <div class="bx-croppie-element bx-def-margin-topbottom"></div>
 
     <div class="bx-def-padding-top bx-clearfix">
         <button class="bx-crop-action bx-btn bx-btn-disabled bx-def-margin-sec-right bx-def-margin-sec-top bx-crop-upload bx-btn-primary"><bx_text:_sys_uploader_crop_submit_button /></button>