From 37d3e96e22956cd749f35ef50ce92e7fcf4f8130 Mon Sep 17 00:00:00 2001
From: andreimarcu <andrei@marcu.net>
Date: Thu, 8 Oct 2015 00:19:22 -0400
Subject: [PATCH] Fix no-javascript fallback ugliness of index page. Fixes #37

---
 static/css/dropzone.css | 33 +++++++++++++++++++++++++++++++++
 static/js/upload.js     |  2 ++
 templates/index.html    |  4 ++--
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/static/css/dropzone.css b/static/css/dropzone.css
index 450084e..a0985e6 100644
--- a/static/css/dropzone.css
+++ b/static/css/dropzone.css
@@ -1,3 +1,36 @@
+#dzone {
+    display: none;
+}
+
+.fallback {
+    background-color: #FAFBFC;
+    padding-top: 40px;
+    padding-bottom: 20px;
+    text-align: center;
+
+    -moz-box-shadow: 1px 1px 1px 1px #ccc;
+    -webkit-box-shadow: 1px 1px 1px 1px #ccc;
+    box-shadow: 1px 1px 1px 1px #ccc;
+}
+
+#fileinput {
+    margin-top: 20px;
+}
+
+#submitbtn {
+    margin-top: 30px;
+    background-color: #FFF;
+    border: 2px solid #556A7F;
+    width: 90px;
+    height: 30px;
+}
+
+#submitbtn:hover {
+    background-color: #556A7F;
+    color: white;
+    border: 2px solid #FAFBFC;
+}
+
 #dropzone { width: 400px;
     margin-left: auto;
     margin-right: auto;
diff --git a/static/js/upload.js b/static/js/upload.js
index 60ef981..d78a641 100644
--- a/static/js/upload.js
+++ b/static/js/upload.js
@@ -2,6 +2,8 @@
 
 Dropzone.options.dropzone = {
 	init: function() {
+		var dzone = document.getElementById("dzone");
+		dzone.style.display = "block";
 	},
 	addedfile: function(file) {
 		var upload = document.createElement("div");
diff --git a/templates/index.html b/templates/index.html
index 4528ae8..2c49272 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,8 +8,8 @@
 <div id="fileupload">
     <form action="/upload" class="dropzone" id="dropzone" method="POST" enctype="multipart/form-data">
         <div class="fallback">
-            <input name="file" type="file" /><br />
-            <input type="submit" value="Upload">
+            <input id="fileinput" name="file" type="file" /><br />
+            <input id="submitbtn" type="submit" value="Upload">
         </div>
 
         <div id="dzone" class="dz-default dz-message">