HTML uplader: only display the progress bar and results when needed

Signed-off-by: Felix Paul Kühne <fkuehne@videolan.org>

Resources/web/index.html

@@ -13,16 +13,16 @@
         $('#fileupload').fileupload({
           dataType: 'json',
           done: function (e, data) {
+            $('#progress').hide();
             $.each(data.files, function (index, file) {
-              $('<p/>').text(file.name).appendTo(document.body);
+              $('<li/>').text(file.name).appendTo($('#uploads ul'));
             });
+            $('#uploads').show();
           },
           progressall: function (e, data) {
+            $('#progress').show();
             var progress = parseInt(data.loaded / data.total * 100, 10);
-            $('#progress .bar').css(
-            'width',
-            progress + '%'
-            );
+            $('#progress .bar').css('width', progress + '%');
           }
         });
       });
@@ -40,16 +40,15 @@
         <div id="appIcon"></div>
         <h1>VLC for iOS</h1>
       </header>
-      <div id="progress">
-        <div class="bar" style="width: 0%;"></div>
+      <div id="progress" style="display: none;">
+        <div class="bar" style="width: 50%;"></div>
       </div>
       <form>
         <input id="fileupload" type="file" name="files[]" data-url="upload.json" multiple>
       </form>
-      <div class="uploads">
+      <div id="uploads" style="display: none;">
         <p>So far you have uploaded:</p>
         <ul>
-          <li>Blabla (XMB)</li>
         </ul>
       </div>
       <footer>

Resources/web/style.css

@@ -55,7 +55,7 @@ header h1 {
   background-image: linear-gradient(top, rgb(234, 171, 103), rgb(214, 112, 0));
 }
 
-form {
+form,#uploads {
   text-align: center;
   margin: 2em;
 }