harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slightly improve cropper style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
view/css/mod_profile_photo.css
View File

@ -10,3 +10,11 @@
#profile-photo-submit-wrapper { #profile-photo-submit-wrapper {
clear: both; clear: both;
} }
#profile-photo-wrapper {
height: 300px;
width: 300px;
max-width: 300px;
max-height: 300px;
overflow: hidden;
}

11
view/theme/redbasic/css/style.css
View File

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

4
view/tpl/cropbody.tpl
View File

@ -6,7 +6,7 @@
<img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" /> <img src="{{$image_url}}" id="croppa" class="imgCrop" alt="{{$title}}" />
</div> </div>
<div id="cropimage-preview-wrapper" > <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> </div>
<script type="text/javascript" language="javascript"> <script type="text/javascript" language="javascript">
@ -16,7 +16,7 @@ var image = document.getElementById('croppa');
var cropper = new Cropper(image, { var cropper = new Cropper(image, {
aspectRatio: 1 / 1, aspectRatio: 1 / 1,
viewMode: 1, viewMode: 1,
preview: '.crop-preview', preview: '#profile-photo-wrapper, .crop-preview',
crop: function(e) { crop: function(e) {
$( '#x1' ).val(e.detail.x); $( '#x1' ).val(e.detail.x);
$( '#y1' ).val(e.detail.y); $( '#y1' ).val(e.detail.y);