From 9f33b14fa83a1c19df21660cc07139896fbf7dc9 Mon Sep 17 00:00:00 2001
From: Albert Yi <albert@carbonfive.com>
Date: Thu, 14 Jun 2018 17:50:41 -0700
Subject: [PATCH] adjust styling

---
 app/assets/stylesheets/specific/uploads.scss | 10 +++++++---
 app/views/uploads/new.html.erb               |  5 +++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/specific/uploads.scss b/app/assets/stylesheets/specific/uploads.scss
index 21f024005..1cc7bece5 100644
--- a/app/assets/stylesheets/specific/uploads.scss
+++ b/app/assets/stylesheets/specific/uploads.scss
@@ -37,13 +37,17 @@ div#c-uploads {
 
     #filedropzone {
       border: 4px dashed #DDD;
-      padding: 10px;
-      max-width: 700px;
-      min-height: 50px;
+      padding: 0;
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
 
       .placeholder {
         font-style: italic;
         color: #333;
+        height: 100%;
       }
 
       &.error {
diff --git a/app/views/uploads/new.html.erb b/app/views/uploads/new.html.erb
index 9dd3995c6..c576152b8 100644
--- a/app/views/uploads/new.html.erb
+++ b/app/views/uploads/new.html.erb
@@ -33,13 +33,13 @@
           </div>
         <% end %>
 
-        <div class="input">
+        <div class="input fallback">
           <%= f.label :file %>
           <%= f.file_field :file, :size => 50 %>
         </div>
 
         <div class="input" id="filedropzone">
-          <span class="placeholder">Drag and drop a file here</span>
+          <div class="placeholder"><span>Drag and drop a file here</span></div>
         </div>
 
         <div class="input">
@@ -173,6 +173,7 @@
         acceptedFiles: "image/jpeg,image/png,image/gif",
         previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size" data-dz-size></div></div><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div>',
         init: function() {
+          $(".fallback").hide();
           this.on("drop", function(event) {
             $("#filedropzone .placeholder").hide();
           });