From 705cbc05da31eaf9066e1f3f02577187241294ce Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <mayhemydg@gmail.com>
Date: Fri, 30 Dec 2011 04:39:46 +0100
Subject: [PATCH] Dealing with inputs' width in a fixed position element is
 such a pain in the ass.

---
 4chan_x.user.js | 33 +++++++++++++++++++++++++++++++--
 script.coffee   | 34 ++++++++++++++++++++++++++++++++--
 2 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index 045cdce69..d51472e8e 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -1253,6 +1253,29 @@
   min-width: 300px;\
   text-align: right;\
 }\
+.fields > input {\
+  border: 1px solid #AAA;\
+  margin: 0;\
+  padding: 2px 4px 3px;\
+  width: 100px;\
+}\
+#form > textarea {\
+  font-family: sans-serif;\
+  border-color: #AAA;\
+  border-width: 1px 0;\
+  margin: 0;\
+  padding: 2px 4px 3px;\
+  min-height: 120px;\
+  width: 100%;\
+}\
+.captcha {\
+  background: #FFF;\
+  text-align: center;\
+}\
+.captcha > img {\
+  height: 57px;\
+  width: 300px;\
+}\
 </style>\
 \
 <div class=move>\
@@ -1260,8 +1283,14 @@
   <a class=close>⨯</a>\
 </div>\
 <div id=form>\
-  <input name=name><input name=email><input name=subject>\
-  <textarea></textarea>\
+  <div class=fields>\
+    <input name=name title=Name placeholder=Name>\
+    <input name=email title=E-mail placeholder=E-mail>\
+    <input name=subject title=Subject placeholder=Subject>\
+  </div>\
+  <textarea title=Comment placeholder=Comment></textarea>\
+  <div class=captcha><img></div>\
+  <input name=captcha title=Verification placeholder=Verification>\
 </div>');
       $.on($('#autohide', qr.el), 'click', qr.hide);
       $.on($('.close', qr.el), 'click', qr.close);
diff --git a/script.coffee b/script.coffee
index 903c46298..521d19233 100644
--- a/script.coffee
+++ b/script.coffee
@@ -887,6 +887,7 @@ qr =
     if this.checked
       $.addClass qr.el, 'autohide'
     else
+
       $.removeClass qr.el, 'autohide'
 
   close: ->
@@ -922,6 +923,29 @@ qr =
   min-width: 300px;
   text-align: right;
 }
+.fields > input {
+  border: 1px solid #AAA;
+  margin: 0;
+  padding: 2px 4px 3px;
+  width: 100px;
+}
+#form > textarea {
+  font-family: sans-serif;
+  border-color: #AAA;
+  border-width: 1px 0;
+  margin: 0;
+  padding: 2px 4px 3px;
+  min-height: 120px;
+  width: 100%;
+}
+.captcha {
+  background: #FFF;
+  text-align: center;
+}
+.captcha > img {
+  height: 57px;
+  width: 300px;
+}
 </style>
 
 <div class=move>
@@ -929,8 +953,14 @@ qr =
   <a class=close>⨯</a>
 </div>
 <div id=form>
-  <input name=name><input name=email><input name=subject>
-  <textarea></textarea>
+  <div class=fields>
+    <input name=name title=Name placeholder=Name>
+    <input name=email title=E-mail placeholder=E-mail>
+    <input name=subject title=Subject placeholder=Subject>
+  </div>
+  <textarea title=Comment placeholder=Comment></textarea>
+  <div class=captcha><img></div>
+  <input name=captcha title=Verification placeholder=Verification>
 </div>'
     $.on $('#autohide', qr.el), 'click', qr.hide
     $.on $('.close', qr.el),    'click', qr.close