erp5_document_scanner: Improve gadget

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/gadget_document_scanner.css.css

@@ -3,7 +3,7 @@
   font-size: 19px;
 }
 
-.video, .photo, .output {
+.video, .photo, .camera-output {
   width: auto !important;
   height: 360px;
   filter: brightness(1);
@@ -14,18 +14,23 @@
   filter: brightness(1);
 }
 
-.output {
+.camera-output {
   float: right;
 }
 
-.camera {
+.camera-input {
   float: left;
   padding-right: 0;
   max-width: 50%;
 }
 
-.camera, .output {
+.camera-input, .camera-output {
+  display: inline-block;
+}
+
+.camera {
   display: inline-block;
+  padding-top: 2em;
 }
 
 .startbutton, .crop-button {

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/gadget_document_scanner.html.html

@@ -15,13 +15,13 @@
         <option value="">--------</option>
       </select>
     </div>
-    <div style="display: inline-block;">
-      <div class="camera">
+    <div class="camera">
+      <div class="camera-input">
     	  <video class="video">Webcam is not available</video>
     	  <button type="button" class="startbutton">Take a picture!</button>
       </div>
       <canvas class="canvas"></canvas>
-  		<div class="output" style="display: none;">
+      <div class="camera-output" style="display:none">
     	  <img class="photo" alt="Photo">
         <input class="photoInput" type="hidden">
         <button class="crop-button">Crop</button>

erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/gadget_document_scanner.js.js

@@ -118,7 +118,7 @@
     //grayscale(canvas, canvas);
     //contrastImage(canvas, canvas, 10);
 
-    gadget.querySelector(".output").style.display = "";
+    gadget.querySelector(".camera-output").style.display = "";
     if (cropper) {
       cropper.destroy();
     }