mirror_php/Jirafeau
1
0
Fork 0
mirror of https://gitlab.com/mojo42/Jirafeau.git synced 2025-01-18 05:18:38 +01:00
Code Issues Projects Releases Wiki Activity

[BUGFIX] Prevent bouncing fileupload field

Browse Source 
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
This commit is contained in:
Dan Untenzu 2017-02-23 15:46:07 +01:00 committed by Jerome Jutteau
parent 1a6ad62b5b
commit f2ec213d8b
3 changed files with 29 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
lib/functions.js.php
View File

@ -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();
}
}

21
media/courgette/style.css.php
View File

@ -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;
}
/* ==========================================================================

15
media/elegantish/elegantish.css
View File

@ -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