uploads
Something we've gotten quite a lot of feedback on is that the boxes for uploading new files and / or creating new folders in the file storage isn't obvious. People have a tendency to not see or ignore the "new file" and "create folder" boxes, and don't understand why they have to click the boxes to open them.
And, when thinking about it, I don't know why they should have to click these boxes to open them either. In addition the alignment of these boxes has been changed in newer ATutor versions, so this is what meets you in the file stoarage tool when using the default (and also Redux) theme:
So, two boxes, not aligned, which the user will have to click to open before they can start creating folders or files.
I created a patch that changes this. This patch does a few things:
- Removes the boxes completely, and wraps the two boxes in two fieldsets instead, which also blends better in with ATutors' way of doing forms, and are more in line with accessibility guidelines.
- Earlier this, technically, was one form. To make it validate it is now two forms - one for creating folders and one for uploading files.
- The inline javascript is removes, as well as the javascript "body onload" states.
- A few lines are added to the CSS, to make it look better.
In the default theme the end result is the following:

Now the boxes are always open, and wrapped in fieldsets. This solution takes up a tiny bit more screen estate (37 pixels more in height to be exact), but will probably be less confusing for the users. In addition, the file_storage/index.php is around 80 lines shorter!
The patch adds the neccessary styles to the default theme, and the next version of the Redux theme will have this included by default. If you wish to use it in other themes, please add the following to your themes' CSS file:
.file-storage-uploads {
padding: 10px;
margin: 0 auto;
margin-bottom: 40px;
display: table;
}
fieldset.file-storage-new-folder {
float: left;
margin-right: 30px;
padding: 10px;
border: 1px solid #E0E0E0;
}
fieldset.file-storage-new-file {
float: left;
padding: 10px;
border: 1px solid #E0E0E0;
width: 40%;
}Patch is tested in IE 5.5+, Firefox 2 and Opera 9 with no side effects so far, please post additional test results or other comments below!
