Fix column resizing

pfnet · Jan 31, 2017 · 963e2da · 963e2da
1 parent dccef27
commit 963e2da
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -30,7 +30,8 @@
     <script src="paints_chainer.js?ver3"></script>
     <!-- fileend -->
     <style>
-     .container-fluid { margin-left: auto; margin-right: auto; width: 1250px !important; }
+     .container-fluid, .row-fluid { margin-left: auto; margin-right: auto; }
+     .container-fluid { width: 1066px !important; }
      .wColorPicker-palettes-holder { white-space: nowrap; } /* wColorPicker workaround for Firefox */
     </style>
   </head>
@@ -65,12 +66,12 @@
 
       <div id="img_pane" class="row-fluid" style="display:none">
         <div class="span6">
-          <div id="wPaint" style="position:relative; float:left; width:512px; height:512px; background-color:rgba(0,0,255,0); margin:2px; border:solid 1px;">
-            <img id="background" style="max-width:512px; max-height:512px;">
+          <div id="wPaint" style="position:relative; background-color:rgba(0,0,255,0); width:512px; height:512px; margin:2px; border:solid 1px">
+            <img id="background" style="max-width:512px; max-height:512px">
           </div>
         </div>
-        <div class="span6">
-          <img id="output" style="float:right; margin:2px; max-width:512px; max-height:512px; border:solid 1px;" src="">
+        <div class="span6" style="margin-left:30px">
+          <img id="output" style="display:none; max-width:512px; max-height:512px; margin:2px; border:solid 1px">
         </div>
       </div>
 

diff --git a/paints_chainer.js b/paints_chainer.js
@@ -49,22 +49,14 @@ $(function () {
     set_file(file);
   });
 
-  $('#output').bind('load', function () {
-    $('#output')
-      .height($('#background').height())
-      .width($('#background').width());
-    $('#img_pane')
-      .width($('#output').width() * 2.3 + 24)
-      .height($('#output').height() + 20);
-  });
-
   $('#background').load(function () {
     $('#wPaint')
       .width($('#background').width())
-      .height($('#background').height());
-
-    $('#wPaint').wPaint('resize');
-
+      .height($('#background').height())
+      .wPaint('resize');
+    var wPaintOuterWidth = $('#wPaint').outerWidth(true);
+    $('#img_pane .span6').width(wPaintOuterWidth);
+    $('#img_pane').width(wPaintOuterWidth * 2 + 30);
     colorize(uniqueid()); // update image_id
   });
 
@@ -99,8 +91,8 @@ $(function () {
         console.log('uploaded');
         $('#painting_status').hide();
         var now = new Date().getTime();
-        $('#output').attr('src', '/images/out/' + image_id + '_0.jpg?' + now);
-        $('#output_min').attr('src', '/images/out_min/' + image_id + '_0.png?' + now);
+        $('#output').attr('src', '/images/out/' + image_id + '_0.jpg?' + now).show();
+        $('#output_min').attr('src', '/images/out_min/' + image_id + '_0.png?' + now).show();
       },
       error: function () {
         $('#painting_status').attr('class', 'text-error').text('SERVER ERROR').show();