From 96021889ea0792100f16d45a115aee8d2ecb8c58 Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <stepien.nicolas@gmail.com>
Date: Sat, 16 Jun 2012 16:35:25 +0200
Subject: [PATCH] Text input style fixes.

---
 4chan_x.user.js | 24 +++++++++++-------------
 script.coffee   | 24 +++++++++++-------------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index 5b712393b..a64d5f9bd 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -2282,12 +2282,12 @@
     <div class=warning><code>Quote Backlinks</code> are disabled.</div>\
     <ul>\
       Backlink formatting\
-      <li><input type=text name=backlink> : <span id=backlinkPreview></span></li>\
+      <li><input name=backlink class=field> : <span id=backlinkPreview></span></li>\
     </ul>\
     <div class=warning><code>Time Formatting</code> is disabled.</div>\
     <ul>\
       Time formatting\
-      <li><input type=text name=time> : <span id=timePreview></span></li>\
+      <li><input name=time class=field> : <span id=timePreview></span></li>\
       <li>Supported <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</li>\
       <li>Day: %a, %A, %d, %e</li>\
       <li>Month: %m, %b, %B</li>\
@@ -2299,7 +2299,7 @@
     <div class=warning><code>File Info Formatting</code> is disabled.</div>\
     <ul>\
       File Info Formatting\
-      <li><input type=text name=fileInfo> : <span id=fileInfoPreview class=fileText></span></li>\
+      <li><input name=fileInfo class=field> : <span id=fileInfoPreview class=fileText></span></li>\
       <li>Link (with original file name): %l (lowercase L, truncated), %L (untruncated)</li>\
       <li>Original file name: %n (Truncated), %N (Untruncated)</li>\
       <li>Spoiler indicator: %p</li>\
@@ -2355,6 +2355,7 @@
       for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
         ta = _ref1[_i];
         ta.textContent = $.get(ta.name, Conf[ta.name]);
+        ta.className = 'field';
         $.on(ta, 'change', $.cb.value);
       }
       (back = $('[name=backlink]', dialog)).value = $.get('backlink', Conf['backlink']);
@@ -2374,7 +2375,7 @@
       for (key in _ref2) {
         arr = _ref2[key];
         tr = $.el('tr', {
-          innerHTML: "<td>" + arr[1] + "</td><td><input name=" + key + "></td>"
+          innerHTML: "<td>" + arr[1] + "</td><td><input name=" + key + " class=field></td>"
         });
         input = $('input', tr);
         input.value = $.get(key, Conf[key]);
@@ -2471,7 +2472,7 @@
         html += "<div><label title='" + title + "'>" + name + "<input name='" + name + "' type=checkbox " + checked + "></label></div>";
       }
       checked = Conf['Auto Update'] ? 'checked' : '';
-      html += "      <div><label title='Controls whether *this* thread automatically updates or not'>Auto Update This<input name='Auto Update This' type=checkbox " + checked + "></label></div>      <div><label>Interval (s)<input name=Interval value=" + Conf['Interval'] + " type=text></label></div>      <div><input value='Update Now' type=button></div>";
+      html += "      <div><label title='Controls whether *this* thread automatically updates or not'>Auto Update This<input name='Auto Update This' type=checkbox " + checked + "></label></div>      <div><label>Interval (s)<input name=Interval value=" + Conf['Interval'] + " class=field size=4></label></div>      <div><input value='Update Now' type=button></div>";
       dialog = UI.dialog('updater', 'bottom: 0; right: 0;', html);
       this.count = $('#count', dialog);
       this.timer = $('#timer', dialog);
@@ -4575,12 +4576,14 @@ h1 {\
   font: 13px sans-serif;\
   margin: 0;\
   padding: 2px 4px 3px;\
-  width: 30%;\
   -webkit-transition: color .25s, border .25s;\
   -moz-transition: color .25s, border .25s;\
   -o-transition: color .25s, border .25s;\
   transition: color .25s, border .25s;\
 }\
+#qr .field:not(#dump) {\
+  width: 30%;\
+}\
 .field:-moz-placeholder,\
 .field:hover:-moz-placeholder {\
   color: #AAA;\
@@ -4593,7 +4596,7 @@ h1 {\
 textarea.field {\
   min-height: 120px;\
 }\
-.field:only-child {\
+#qr .field:only-child {\
   display: block;\
   min-width: 100%;\
 }\
@@ -4702,9 +4705,7 @@ body.unscroll {\
   overflow: auto;\
 }\
 #content textarea {\
-  box-sizing: border-box;\
-  -moz-box-sizing: border-box;\
-  margin: 0;\
+  font-family: monospace;\
   min-height: 100px;\
   resize: vertical;\
   width: 100%;\
@@ -4716,9 +4717,6 @@ body.unscroll {\
 #updater {\
   text-align: right;\
 }\
-#updater input[type=text] {\
-  width: 50px;\
-}\
 #updater:not(:hover) {\
   border: none;\
   background: transparent;\
diff --git a/script.coffee b/script.coffee
index ec6388328..7179421b9 100644
--- a/script.coffee
+++ b/script.coffee
@@ -1749,12 +1749,12 @@ Options =
     <div class=warning><code>Quote Backlinks</code> are disabled.</div>
     <ul>
       Backlink formatting
-      <li><input type=text name=backlink> : <span id=backlinkPreview></span></li>
+      <li><input name=backlink class=field> : <span id=backlinkPreview></span></li>
     </ul>
     <div class=warning><code>Time Formatting</code> is disabled.</div>
     <ul>
       Time formatting
-      <li><input type=text name=time> : <span id=timePreview></span></li>
+      <li><input name=time class=field> : <span id=timePreview></span></li>
       <li>Supported <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</li>
       <li>Day: %a, %A, %d, %e</li>
       <li>Month: %m, %b, %B</li>
@@ -1766,7 +1766,7 @@ Options =
     <div class=warning><code>File Info Formatting</code> is disabled.</div>
     <ul>
       File Info Formatting
-      <li><input type=text name=fileInfo> : <span id=fileInfoPreview class=fileText></span></li>
+      <li><input name=fileInfo class=field> : <span id=fileInfoPreview class=fileText></span></li>
       <li>Link (with original file name): %l (lowercase L, truncated), %L (untruncated)</li>
       <li>Original file name: %n (Truncated), %N (Untruncated)</li>
       <li>Spoiler indicator: %p</li>
@@ -1816,6 +1816,7 @@ Options =
     #filter & sauce
     for ta in $$ 'textarea', dialog
       ta.textContent = $.get ta.name, Conf[ta.name]
+      ta.className   = 'field'
       $.on ta, 'change', $.cb.value
 
     #rice
@@ -1836,7 +1837,7 @@ Options =
     #keybinds
     for key, arr of Config.hotkeys
       tr = $.el 'tr',
-        innerHTML: "<td>#{arr[1]}</td><td><input name=#{key}></td>"
+        innerHTML: "<td>#{arr[1]}</td><td><input name=#{key} class=field></td>"
       input = $ 'input', tr
       input.value = $.get key, Conf[key]
       $.on input, 'keydown', Options.keybind
@@ -1917,7 +1918,7 @@ Updater =
     checked = if Conf['Auto Update'] then 'checked' else ''
     html += "
       <div><label title='Controls whether *this* thread automatically updates or not'>Auto Update This<input name='Auto Update This' type=checkbox #{checked}></label></div>
-      <div><label>Interval (s)<input name=Interval value=#{Conf['Interval']} type=text></label></div>
+      <div><label>Interval (s)<input name=Interval value=#{Conf['Interval']} class=field size=4></label></div>
       <div><input value='Update Now' type=button></div>"
 
     dialog = UI.dialog 'updater', 'bottom: 0; right: 0;', html
@@ -3515,12 +3516,14 @@ h1 {
   font: 13px sans-serif;
   margin: 0;
   padding: 2px 4px 3px;
-  width: 30%;
   -webkit-transition: color .25s, border .25s;
   -moz-transition: color .25s, border .25s;
   -o-transition: color .25s, border .25s;
   transition: color .25s, border .25s;
 }
+#qr .field:not(#dump) {
+  width: 30%;
+}
 .field:-moz-placeholder,
 .field:hover:-moz-placeholder {
   color: #AAA;
@@ -3533,7 +3536,7 @@ h1 {
 textarea.field {
   min-height: 120px;
 }
-.field:only-child {
+#qr .field:only-child {
   display: block;
   min-width: 100%;
 }
@@ -3642,9 +3645,7 @@ body.unscroll {
   overflow: auto;
 }
 #content textarea {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  margin: 0;
+  font-family: monospace;
   min-height: 100px;
   resize: vertical;
   width: 100%;
@@ -3656,9 +3657,6 @@ body.unscroll {
 #updater {
   text-align: right;
 }
-#updater input[type=text] {
-  width: 50px;
-}
 #updater:not(:hover) {
   border: none;
   background: transparent;