Update JCrop and make cropping less painful

ivatar/ivataraccount/templates/crop_photo.html

@@ -8,7 +8,6 @@
 
 {% block content %}
 <style>
-
 </style>
 <h1>{% trans 'Crop photo' %}</h1>
 
@@ -37,6 +36,7 @@ function updateCoords(c) {
     $('#w').val(c.w);
     $('#h').val(c.h);
 };
+
 function checkCoords() {
     if (parseInt($('#w').val())) return true;
     alert('Please select a crop region then press submit.');
@@ -44,11 +44,28 @@ function checkCoords() {
 };
 </script>
 <script type="text/javascript">
+    /// TODO: This needs to be reworked!
+    /// Should be some reasonable function of distance of the image to the
+    /// left and right screen border  or so.
+    var windowwidth = $(window).width();
+    var usewidth = windowwidth - 60;
+    if(windowwidth < 400) {
+      usewidth = windowwidth - 60;
+    }
+    if(windowwidth > 800) {
+      usewidth = windowwidth - 100;
+    }
+    if(windowwidth > 1200) {
+      usewidth = windowwidth - 400;
+    }
+
     jQuery(function($){
         $('#cropbox').Jcrop({
             onSelect: updateCoords,
-bgOpacity:1,
-bgColor:'transparent'
+            bgOpacity: .2,
+            bgColor: 'transparent',
+            boxWidth: usewidth,
+            aspectRatio: 80 / 80,
       });
     });
 </script>

ivatar/ivataraccount/views.py

@@ -695,10 +695,10 @@ class CropPhotoView(TemplateView):
         '''
         photo = self.model.objects.get(pk=kwargs['pk'], user=request.user)  # pylint: disable=no-member
         dimensions = {
-            'x': int(request.POST['x']),
-            'y': int(request.POST['y']),
-            'w': int(request.POST['w']),
-            'h': int(request.POST['h'])
+            'x': int(float(request.POST['x'])),
+            'y': int(float(request.POST['y'])),
+            'w': int(float(request.POST['w'])),
+            'h': int(float(request.POST['h'])),
         }
         email = openid = None
         if 'email' in request.POST:

ivatar/static/css/jcrop.css

@@ -1,2 +1,2 @@
-/* jquery.Jcrop.min.css v0.9.12 (build:20140524) */
-.jcrop-holder{direction:ltr;text-align:left;-ms-touch-action:none}.jcrop-hline,.jcrop-vline{background:#fff url(/static/img/Jcrop.gif);font-size:0;position:absolute}.jcrop-vline{height:100%;width:1px!important}.jcrop-vline.right{right:0}.jcrop-hline{height:1px!important;width:100%}.jcrop-hline.bottom{bottom:0}.jcrop-tracker{height:100%;width:100%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}.jcrop-handle{background-color:#333;border:1px #eee solid;width:7px;height:7px;font-size:1px}.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0}.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px}.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%}.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%}.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0}.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0}.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0}.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px}.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%}.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px}.jcrop-dragbar.ord-n{margin-top:-4px}.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px}.jcrop-dragbar.ord-e{margin-right:-4px;right:0}.jcrop-dragbar.ord-w{margin-left:-4px}.jcrop-light .jcrop-hline,.jcrop-light .jcrop-vline{background:#fff;filter:alpha(opacity=70)!important;opacity:.7!important}.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#fff;border-radius:3px}.jcrop-dark .jcrop-hline,.jcrop-dark .jcrop-vline{background:#000;filter:alpha(opacity=70)!important;opacity:.7!important}.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#fff;border-color:#000;border-radius:3px}.solid-line .jcrop-hline,.solid-line .jcrop-vline{background:#fff}.jcrop-holder img,img.jcrop-preview{max-width:none}
+/* jquery.Jcrop.min.css v0.9.15 (build:20180819) */
+.jcrop-holder{direction:ltr;text-align:left;-ms-touch-action:none}.jcrop-hline,.jcrop-vline{background:#fff url(Jcrop.gif);font-size:0;position:absolute}.jcrop-vline{height:100%;width:1px!important}.jcrop-vline.right{right:0}.jcrop-hline{height:1px!important;width:100%}.jcrop-hline.bottom{bottom:0}.jcrop-tracker{height:100%;width:100%;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none}.jcrop-handle{background-color:#333;border:1px #eee solid;width:7px;height:7px;font-size:1px}.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0}.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px}.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%}.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%}.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0}.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0}.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0}.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px}.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%}.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px}.jcrop-dragbar.ord-n{margin-top:-4px}.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px}.jcrop-dragbar.ord-e{margin-right:-4px;right:0}.jcrop-dragbar.ord-w{margin-left:-4px}.jcrop-light .jcrop-hline,.jcrop-light .jcrop-vline{background:#fff;filter:alpha(opacity=70)!important;opacity:.7!important}.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#fff;border-radius:3px}.jcrop-dark .jcrop-hline,.jcrop-dark .jcrop-vline{background:#000;filter:alpha(opacity=70)!important;opacity:.7!important}.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#fff;border-color:#000;border-radius:3px}.solid-line .jcrop-hline,.solid-line .jcrop-vline{background:#fff}.jcrop-holder img,img.jcrop-preview{max-width:none}

templates/base.html

@@ -1,6 +1,7 @@
 {% load static %}
 {% load i18n %}<!DOCTYPE HTML>
 {% include 'header.html' %}
+{% block header %}{% endblock header %}
 <title>{{ site_name }} :: {% block title %}{% trans 'Freeing the Web, one face at a time!' %}{% endblock title %}</title>
 
 {% spaceless %}