From: Dan Untenzu <untenzu@webit.de>
Date: Thu, 23 Feb 2017 14:46:07 +0000 (+0100)
Subject: [BUGFIX] Prevent bouncing fileupload field
X-Git-Tag: 3.0.0~4
X-Git-Url: https://git.p6c8.net/jirafeau.git/commitdiff_plain/f2ec213d8b9b828c8f81b82349cc103328a5a2e5?hp=1a6ad62b5b5a5e40fb867e741a896268be39df98

[BUGFIX] Prevent bouncing fileupload field

After a file is selected in the first step of an upload,
the options are shown and the fileupload field is resized
to a much smaller field. In Chrome and other browsers
this field bounces to an area above the form.

Use relative positioning and fixed heights to prevent this
UI glitch.

Refs #71
---

diff --git a/lib/functions.js.php b/lib/functions.js.php
index e952430..0c9a020 100644
--- a/lib/functions.js.php
+++ b/lib/functions.js.php
@@ -261,12 +261,13 @@ function control_selected_file_size(max_size, error_str)
     }
     else
     {
-        document.getElementById('options').style.display = '';
-        document.getElementById('send').style.display = '';
+        // add class to restyle upload form in next step
+        document.getElementById('upload').setAttribute('class', 'file-selected');
+        // display options
+        document.getElementById('options').style.display = 'block';
+        document.getElementById('send').style.display = 'block';
         document.getElementById('error_pop').style.display = 'none';
-        document.getElementById('file_select').style.left = 'inherit';
-        document.getElementById('file_select').style.height = 'inherit';
-        document.getElementById('file_select').style.opacity = '1';
+        document.getElementById('send').focus();
     }
 }
 
diff --git a/media/courgette/style.css.php b/media/courgette/style.css.php
index faa7df3..6035949 100644
--- a/media/courgette/style.css.php
+++ b/media/courgette/style.css.php
@@ -157,16 +157,24 @@ input[type="submit"]:focus {
   text-align: center;
 }
 
+#upload p {
+  margin: 0;
+}
+
 #file_select {
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: relative;
   width: 100%;
-  height: 100%;
+  height: 16em;
   cursor: pointer;
   opacity: 0;
 }
-
+  #upload.file-selected #file_select {
+    opacity: 1;
+    height: 2em;
+  }
+  #upload.file-selected fieldset {
+    background-image: none;
+  }
 
 
 /* ==========================================================================
@@ -197,7 +205,6 @@ input[type="submit"]:focus {
 #options {
   position: relative;
   z-index: 10;
-  background: #efebe9;
   width: 100%;
   height: 90%;
 }
@@ -214,7 +221,7 @@ input[type="submit"]:focus {
 
 #options input[type="submit"] {
   position: relative;
-  left: 11.2em;
+  margin: 1em auto;
 }
 
 /* ==========================================================================
diff --git a/media/elegantish/elegantish.css b/media/elegantish/elegantish.css
index cb18864..14ebfc1 100644
--- a/media/elegantish/elegantish.css
+++ b/media/elegantish/elegantish.css
@@ -150,16 +150,19 @@ input[type="submit"]:focus {
 }
 
 #file_select {
-  position: absolute;
-  top: 0;
-  left: 0;
+  position: relative;
   width: 100%;
-  height: 100%;
+  height: 16em;
   cursor: pointer;
   opacity: 0;
 }
-
-
+#upload.file-selected #file_select {
+  opacity: 1;
+  height: 2em;
+}
+#upload.file-selected fieldset {
+  background-image: none;
+}
 
 /* ==========================================================================
    2 = Copyright