Upload page seperated, styled and Javscript-pimped

Actual upload is not yet working.

app/assets/javascripts/application.js

@@ -37,3 +37,21 @@ load_reviews = function() {
     }
   );
 };
+
+// Initialize the upload form.
+upload_form_init = function() {
+  // Disable the submit button until files are selected.
+  $('#file-submit').hide();
+
+  // Install event handler to notice when files were selected.
+  $('#file').on('change', upload_form_files_selected);
+};
+
+upload_form_files_selected = function() {
+  no_files = this.files.length;
+  if (no_files > 0) {
+    $('#file-label').html(no_files+" files selected");
+    $('#file-select-button').addClass('success');
+    $('#file-submit').fadeIn('slow');
+  }
+};

app/assets/stylesheets/_settings.scss

@@ -804,6 +804,20 @@ a.black
   color: #808080;
 }
 
+.bigpanel
+{
+  background-color: $light-gray;
+  border-radius: 10px;
+  padding: 1em 1em 0.1em 1em;
+  margin-bottom: 1em;
+}
+
+.subtitle
+{
+  font-size: 120%;
+  color: #808080;
+}
+
 .packagepage
 {
   h1
@@ -811,11 +825,6 @@ a.black
     margin-bottom: 0;
   }
 
-  .subtitle
-  {
-    font-size: 120%;
-    color: #808080;
-  }
 
   /* Description of a screenshot (e.g. the situation when the screenshot was taken) */
   .imgcaption
@@ -832,13 +841,6 @@ a.black
     color: #808080;
   }
 
-  .bigpanel
-  {
-    background-color: $light-gray;
-    border-radius: 10px;
-    padding: 1em 1em 0.1em 1em;
-    margin-bottom: 1em;
-  }
 
   .comment
   {
@@ -897,3 +899,17 @@ a.black
 {
   line-height: 120%;
 }
+
+/* Hide the file upload button to just show the styleable label */
+/* display: none will not work - this is the workaround */
+.hidden-inputfile {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+.inputfile + label {
+  cursor: pointer; /* "hand" cursor */
+}