slightly improve cropper style

This commit is contained in:
Mario Vavti 2018-02-12 11:06:21 +01:00
parent 9e2424ee76
commit 571a9642a5
3 changed files with 14 additions and 11 deletions

View file

@ -9,4 +9,12 @@
#profile-photo-submit-wrapper {
clear: both;
}
}
#profile-photo-wrapper {
height: 300px;
width: 300px;
max-width: 300px;
max-height: 300px;
overflow: hidden;
}

View file

@ -381,14 +381,9 @@ footer {
margin: 15px 0px;
}
#cropimage-wrapper, #cropimage-preview-wrapper {
float: left;
padding: 30px;
}
#crop-image-form {
margin-top: 30px;
clear: both;
#cropimage-wrapper,
#cropimage-preview-wrapper {
margin-bottom: 10px;
}
.fn {

View file

@ -6,7 +6,7 @@
<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
</div>
<div id="cropimage-preview-wrapper" >
<div id="previewWrap" class="crop-preview" style="height: 300px; width: 300px; max-width: 300px; max-height: 300px; overflow: hidden;"></div>
<div id="previewWrap" class="crop-preview d-lg-none" style="height: 300px; width: 300px; max-width: 300px; max-height: 300px; overflow: hidden;"></div>
</div>
<script type="text/javascript" language="javascript">
@ -16,7 +16,7 @@ var image = document.getElementById('croppa');
var cropper = new Cropper(image, {
aspectRatio: 1 / 1,
viewMode: 1,
preview: '.crop-preview',
preview: '#profile-photo-wrapper, .crop-preview',
crop: function(e) {
$( '#x1' ).val(e.detail.x);
$( '#y1' ).val(e.detail.y);