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_project.git/commitdiff_plain/f2ec213d8b9b828c8f81b82349cc103328a5a2e5?ds=inline;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