From d00d282bff15d37cff7818d39663ad07b3cbee43 Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Tue, 21 Feb 2017 18:54:46 +0100
Subject: [PATCH] client/posts: improve file dropper appearance

---
 client/css/core-forms.styl     | 19 +++++++++----------
 client/css/post-main-view.styl |  2 +-
 client/html/file_dropper.tpl   | 14 ++++++++------
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/client/css/core-forms.styl b/client/css/core-forms.styl
index 58002263..a163718b 100644
--- a/client/css/core-forms.styl
+++ b/client/css/core-forms.styl
@@ -245,11 +245,8 @@ input::-moz-focus-inner
  * File dropper
  */
 .file-dropper-holder
-    display: flex
-    flex-wrap: wrap
     .file-dropper
         display: block
-        width: 100%
         background: $window-color
         border: 3px dashed #eee
         padding: 0.3em 0.5em
@@ -258,14 +255,16 @@ input::-moz-focus-inner
         cursor: pointer
         overflow: hidden
         word-wrap: break-word
-    input
+    .url-holder
+        display: flex
         margin-top: 0.5em
-        margin-right: 0.5em
-        width: auto
-        flex: 1
-    button
-        margin-top: 0.5em
-        width: 8em
+        input, button
+            min-width: 0 /* firefox being sassy */
+            width: auto !important /* don't inherit anything weird */
+        input
+            flex: 1
+        button
+            margin-left: 0.5em
 
 input[type=file]:disabled+.file-dropper
     cursor: default
diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl
index b4d9b8fe..cfebf591 100644
--- a/client/css/post-main-view.styl
+++ b/client/css/post-main-view.styl
@@ -138,7 +138,7 @@
                 margin: 0
                 padding: 0
 
-    label
+    label:not(.file-dropper)
         margin-bottom: 0.3em
         display: block
 
diff --git a/client/html/file_dropper.tpl b/client/html/file_dropper.tpl
index 2ce0ff51..3da2f4f8 100644
--- a/client/html/file_dropper.tpl
+++ b/client/html/file_dropper.tpl
@@ -14,11 +14,13 @@
         <% } %>
     </label>
     <% if (ctx.allowUrls) { %>
-        <input type='text' name='url' placeholder='Alternatively, paste an URL here.'/>
-        <% if (ctx.lock) { %>
-            <button>Confirm</button>
-        <% } else { %>
-            <button>Add URL</button>
-        <% } %>
+        <div class='url-holder'>
+            <input type='text' name='url' placeholder='Alternatively, paste an URL here.'/>
+            <% if (ctx.lock) { %>
+                <button>Confirm</button>
+            <% } else { %>
+                <button>Add URL</button>
+            <% } %>
+        </div>
     <% } %>
 </div>