From b6e9fd99dbea59ebbeaebbb50ecaec56ae361965 Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <mayhemydg@gmail.com>
Date: Wed, 15 Jun 2011 18:42:44 +0200
Subject: [PATCH] Options centering.

---
 4chan_x.user.js | 25 ++++++++++++---
 script.coffee   | 85 +++++++++++++++++++++++++++++--------------------
 2 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/4chan_x.user.js b/4chan_x.user.js
index a435f6a9f..79da6283f 100644
--- a/4chan_x.user.js
+++ b/4chan_x.user.js
@@ -965,11 +965,11 @@
       var arr, checked, description, dialog, hiddenNum, hiddenThreads, html, input, key, li, link, main, obj, overlay, ul, _i, _j, _len, _len2, _ref, _ref2, _ref3;
       hiddenThreads = $.getValue("hiddenThreads/" + g.BOARD + "/", {});
       hiddenNum = Object.keys(g.hiddenReplies).length + Object.keys(hiddenThreads).length;
-      html = "      <div id=floaty>        <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a>      </div>      <div id=credits>        <a href=http://chat.now.im/x/aeos>support throd</a> |        <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |        <a href=http://userscripts.org/scripts/show/51412>uso</a> |        <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>      </div>      <hr>      <div id=main>      </div>      <textarea style='display: none;' name=flavors id=flavors>" + ($.config('flavors')) + "</textarea>      <div style='display: none;' id=time>        <div><input type=text name=time value='" + ($.config('time')) + "'> <span id=timePreview></span></div>        <table>          <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>          <tbody>            <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>            <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>            <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>            <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>            <tr><td>%B</td><td>month, full length</td><td>June</td></tr>            <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>            <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>            <tr><td>%I</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>            <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>            <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>            <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>            <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>            <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>          </tbody>        </table>      </div>    ";
-      dialog = ui.dialog('options', {
-        top: '25%',
-        left: '25%'
-      }, html);
+      html = "      <div class='reply dialog'>        <div id=floaty>          <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a>        </div>        <div id=credits>          <a href=http://chat.now.im/x/aeos>support throd</a> |          <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |          <a href=http://userscripts.org/scripts/show/51412>uso</a> |          <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>        </div>        <hr>        <div id=main>        </div>        <textarea style='display: none;' name=flavors id=flavors>" + ($.config('flavors')) + "</textarea>        <div style='display: none;' id=time>          <div><input type=text name=time value='" + ($.config('time')) + "'> <span id=timePreview></span></div>          <table>            <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>            <tbody>              <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>              <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>              <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>              <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>              <tr><td>%B</td><td>month, full length</td><td>June</td></tr>              <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>              <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>              <tr><td>%I</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>              <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>              <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>              <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>              <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>              <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>            </tbody>          </table>        </div>      </div>    ";
+      dialog = $.el('div', {
+        id: 'options',
+        innerHTML: html
+      });
       main = $('#main', dialog);
       _ref = config.main;
       for (key in _ref) {
@@ -2681,6 +2681,21 @@
 \
       #options {\
         position: fixed;\
+        top: 0;\
+        right: 0;\
+        bottom: 0;\
+        left: 0;\
+        display: -webkit-box;\
+        display: -moz-box;\
+        display: box;\
+        -webkit-box-align: center;\
+        -moz-box-align: center;\
+        box-align: center;\
+        -webkit-box-pack: center;\
+        -moz-box-pack: center;\
+        box-pack: center;\
+      }\
+      #options > div {\
         padding: 5px;\
         min-width: 500px;\
       }\
diff --git a/script.coffee b/script.coffee
index d557618d6..1c680f6a3 100644
--- a/script.coffee
+++ b/script.coffee
@@ -725,43 +725,45 @@ options =
     hiddenThreads = $.getValue "hiddenThreads/#{g.BOARD}/", {}
     hiddenNum = Object.keys(g.hiddenReplies).length + Object.keys(hiddenThreads).length
     html = "
-      <div id=floaty>
-        <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a>
-      </div>
-      <div id=credits>
-        <a href=http://chat.now.im/x/aeos>support throd</a> |
-        <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |
-        <a href=http://userscripts.org/scripts/show/51412>uso</a> |
-        <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>
-      </div>
-      <hr>
-      <div id=main>
-      </div>
-      <textarea style='display: none;' name=flavors id=flavors>#{$.config 'flavors'}</textarea>
-      <div style='display: none;' id=time>
-        <div><input type=text name=time value='#{$.config 'time'}'> <span id=timePreview></span></div>
-        <table>
-          <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>
-          <tbody>
-            <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>
-            <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>
-            <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>
-            <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>
-            <tr><td>%B</td><td>month, full length</td><td>June</td></tr>
-            <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>
-            <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>
-            <tr><td>%I</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>
-            <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>
-            <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>
-            <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>
-            <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>
-            <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>
-          </tbody>
-        </table>
+      <div class='reply dialog'>
+        <div id=floaty>
+          <a name=main>main</a> | <a name=flavors>sauce</a> | <a name=time>time</a>
+        </div>
+        <div id=credits>
+          <a href=http://chat.now.im/x/aeos>support throd</a> |
+          <a href=https://github.com/aeosynth/4chan-x/issues>github</a> |
+          <a href=http://userscripts.org/scripts/show/51412>uso</a> |
+          <a href=https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=2DBVZBUAM4DHC&lc=US&item_name=Aeosynth&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted>donate</a>
+        </div>
+        <hr>
+        <div id=main>
+        </div>
+        <textarea style='display: none;' name=flavors id=flavors>#{$.config 'flavors'}</textarea>
+        <div style='display: none;' id=time>
+          <div><input type=text name=time value='#{$.config 'time'}'> <span id=timePreview></span></div>
+          <table>
+            <caption>Format specifiers <a href=http://en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>(source)</a></caption>
+            <tbody>
+              <tr><th>Specifier</th><th>Description</th><th>Values/Example</th></tr>
+              <tr><td>%a</td><td>weekday, abbreviated</td><td>Sat</td></tr>
+              <tr><td>%A</td><td>weekday, full</td><td>Saturday</td></tr>
+              <tr><td>%b</td><td>month, abbreviated</td><td>Jun</td></tr>
+              <tr><td>%B</td><td>month, full length</td><td>June</td></tr>
+              <tr><td>%d</td><td>day of the month, zero padded</td><td>03</td></tr>
+              <tr><td>%H</td><td>hour (24 hour clock) zero padded</td><td>13</td></tr>
+              <tr><td>%I</td><td>hour (12 hour clock) zero padded</td><td>02</td></tr>
+              <tr><td>%m</td><td>month, zero padded</td><td>06</td></tr>
+              <tr><td>%M</td><td>minutes, zero padded</td><td>54</td></tr>
+              <tr><td>%p</td><td>upper case AM or PM</td><td>PM</td></tr>
+              <tr><td>%P</td><td>lower case am or pm</td><td>pm</td></tr>
+              <tr><td>%y</td><td>two digit year</td><td>00-99</td></tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     "
 
-    dialog = ui.dialog 'options', top: '25%', left: '25%', html
+    dialog = $.el 'div', id: 'options', innerHTML: html
     main = $('#main', dialog)
     for key, obj of config.main
       ul = $.el 'ul',
@@ -2049,6 +2051,21 @@ main =
 
       #options {
         position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: -webkit-box;
+        display: -moz-box;
+        display: box;
+        -webkit-box-align: center;
+        -moz-box-align: center;
+        box-align: center;
+        -webkit-box-pack: center;
+        -moz-box-pack: center;
+        box-pack: center;
+      }
+      #options > div {
         padding: 5px;
         min-width: 500px;
       }