Fix no-javascript fallback ugliness of index page. Fixes #37

andreimarcu · Oct 8, 2015 · 37d3e96 · 37d3e96
1 parent ed6ce1d
commit 37d3e96
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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">