From d0da46ab82e388420491d1303ecc785792576035 Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Mon, 31 Oct 2011 18:54:20 +0100 Subject: [PATCH] -1 div required to center properly (options & firstrun) --- 4chan_x.user.js | 180 +++++++++++++++++++++++----------------------- script.coffee | 188 +++++++++++++++++++++++------------------------- 2 files changed, 182 insertions(+), 186 deletions(-) diff --git a/4chan_x.user.js b/4chan_x.user.js index 109014712..fc3fb2a5d 100644 --- a/4chan_x.user.js +++ b/4chan_x.user.js @@ -1221,84 +1221,83 @@ var arr, back, checked, description, dialog, hiddenNum, hiddenThreads, input, key, li, obj, overlay, ta, time, ul, _i, _j, _len, _len2, _ref, _ref2, _ref3; dialog = $.el('div', { id: 'options', + className: 'reply dialog', innerHTML: '\ -
\ -
\ -
\ - 4chan X\ - | Issues\ - | Donate\ -
\ -
\ - \ - | \ - | \ - | \ - | \ -
\ +
\ +
\ + 4chan X\ + | Issues\ + | Donate\
\ -
\ -
\ - \ -
\ - \ - \ - \ -
\ - Use regular expressions, one per line.
\ - For example, /weeaboo/i will filter posts containing `weeaboo` case-insensitive.\ -

Name:

\ -

Tripcode:

\ -

E-mail:

\ -

Subject:

\ -

Comment:

\ -

Filename:

\ -

Image MD5:

\ -
\ - \ -
\ -
    \ - Backlink formatting\ -
  • :
    • \ -
\ -
    \ - Time formatting\ -
  • :
    • \ -
  • Supported format specifiers:
    • \ -
  • Day: %a, %A, %d, %e
    • \ -
  • Month: %m, %b, %B
    • \ -
  • Year: %y
    • \ -
  • Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P
    • \ -
  • Minutes: %M
    • \ -
\ -
\ - \ -
\ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ - \ -
ActionsKeybinds
Close Options or QR
Quick spoiler
Open QR with post number inserted
Open QR without post number inserted
Submit post
Select next reply
Select previous reply
See next thread
See previous thread
Jump to the next page
Jump to the previous page
Jump to page 0
Open thread in current tab
Open thread in new tab
Expand thread
Watch thread
Hide thread
Expand selected image
Expand all images
Update now
Reset the unread count to 0
\ -
\ +
\ + \ + | \ + | \ + | \ + | \ +
\ +
\ +
\ +
\ + \ +
\ + \ + \ + \ +
\ + Use regular expressions, one per line.
\ + For example, /weeaboo/i will filter posts containing `weeaboo` case-insensitive.\ +

Name:

\ +

Tripcode:

\ +

E-mail:

\ +

Subject:

\ +

Comment:

\ +

Filename:

\ +

Image MD5:

\ +
\ + \ +
\ +
    \ + Backlink formatting\ +
  • :
    • \ +
\ +
    \ + Time formatting\ +
  • :
    • \ +
  • Supported format specifiers:
    • \ +
  • Day: %a, %A, %d, %e
    • \ +
  • Month: %m, %b, %B
    • \ +
  • Year: %y
    • \ +
  • Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P
    • \ +
  • Minutes: %M
    • \ +
\ +
\ + \ +
\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +
ActionsKeybinds
Close Options or QR
Quick spoiler
Open QR with post number inserted
Open QR without post number inserted
Submit post
Select next reply
Select previous reply
See next thread
See previous thread
Jump to the next page
Jump to the previous page
Jump to page 0
Open thread in current tab
Open thread in new tab
Expand thread
Watch thread
Hide thread
Expand selected image
Expand all images
Update now
Reset the unread count to 0
\
\
' }); @@ -1344,19 +1343,13 @@ input.value = conf[input.name]; $.bind(input, 'keydown', options.keybind); } - /* - Two parent divs are necessary to center on all browsers. - - Only one when Firefox and Opera will support flexboxes correctly. - https://bugzilla.mozilla.org/show_bug.cgi?id=579776 - */ overlay = $.el('div', { id: 'overlay' }); $.bind(overlay, 'click', function() { return $.rm(overlay); }); - $.bind(dialog.firstElementChild, 'click', function(e) { + $.bind(dialog, 'click', function(e) { return e.stopPropagation(); }); $.add(overlay, dialog); @@ -3002,7 +2995,12 @@ dialog = $.el('div', { id: 'overlay', className: 'firstrun', - innerHTML: "

Click the 4chan X buttons for options; they are at the top and bottom of the page.

Updater options are in the updater dialog in replies at the bottom-right corner of the window.

If you don't see the buttons, try disabling your userstyles.

" + innerHTML: '\ +
\ +

Click the 4chan X buttons for options; they are at the top and bottom of the page.

\ +

Updater options are in the updater dialog in replies at the bottom-right corner of the window.

\ +

If you don\'t see the buttons, try disabling your userstyles.

\ +
' }); $.add(d.body, dialog); return $.bind(window, 'click', firstRun.close); @@ -3253,21 +3251,25 @@ }\ \ #overlay {\ - display: table;\ position: fixed;\ top: 0;\ left: 0;\ height: 100%;\ width: 100%;\ + text-align: center;\ background: rgba(0,0,0,.5);\ }\ - #options {\ - display: table-cell;\ + #overlay::before {\ + content: "";\ + display: inline-block;\ + height: 100%;\ vertical-align: middle;\ }\ - #options .dialog {\ - margin: auto;\ + #options {\ + display: inline-block;\ padding: 5px;\ + text-align: left;\ + vertical-align: middle;\ width: 500px;\ }\ #credits {\ diff --git a/script.coffee b/script.coffee index 8b5445afa..81e9a2749 100644 --- a/script.coffee +++ b/script.coffee @@ -865,84 +865,82 @@ options = $.replace home, a dialog: -> - dialog = $.el 'div', id: 'options', innerHTML: ' -
-
-
- 4chan X - | Issues - | Donate -
-
- - | - | - | - | -
+ dialog = $.el 'div', id: 'options', className: 'reply dialog', innerHTML: ' +
+
+ 4chan X + | Issues + | Donate
-
-
- -
- - - -
- Use regular expressions, one per line.
- For example, /weeaboo/i will filter posts containing `weeaboo` case-insensitive. -

Name:

-

Tripcode:

-

E-mail:

-

Subject:

-

Comment:

-

Filename:

-

Image MD5:

-
- -
-
    - Backlink formatting -
  • :
    • -
-
    - Time formatting -
  • :
    • -
  • Supported format specifiers:
    • -
  • Day: %a, %A, %d, %e
    • -
  • Month: %m, %b, %B
    • -
  • Year: %y
    • -
  • Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P
    • -
  • Minutes: %M
    • -
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
ActionsKeybinds
Close Options or QR
Quick spoiler
Open QR with post number inserted
Open QR without post number inserted
Submit post
Select next reply
Select previous reply
See next thread
See previous thread
Jump to the next page
Jump to the previous page
Jump to page 0
Open thread in current tab
Open thread in new tab
Expand thread
Watch thread
Hide thread
Expand selected image
Expand all images
Update now
Reset the unread count to 0
-
+
+ + | + | + | + | +
+
+
+
+ +
+ + + +
+ Use regular expressions, one per line.
+ For example, /weeaboo/i will filter posts containing `weeaboo` case-insensitive. +

Name:

+

Tripcode:

+

E-mail:

+

Subject:

+

Comment:

+

Filename:

+

Image MD5:

+
+ +
+
    + Backlink formatting +
  • :
    • +
+
    + Time formatting +
  • :
    • +
  • Supported format specifiers:
    • +
  • Day: %a, %A, %d, %e
    • +
  • Month: %m, %b, %B
    • +
  • Year: %y
    • +
  • Hour: %k, %H, %l (lowercase L), %I (uppercase i), %p, %P
    • +
  • Minutes: %M
    • +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
ActionsKeybinds
Close Options or QR
Quick spoiler
Open QR with post number inserted
Open QR without post number inserted
Submit post
Select next reply
Select previous reply
See next thread
See previous thread
Jump to the next page
Jump to the previous page
Jump to page 0
Open thread in current tab
Open thread in new tab
Expand thread
Watch thread
Hide thread
Expand selected image
Expand all images
Update now
Reset the unread count to 0
' @@ -983,15 +981,9 @@ options = input.value = conf[input.name] $.bind input, 'keydown', options.keybind - ### - Two parent divs are necessary to center on all browsers. - - Only one when Firefox and Opera will support flexboxes correctly. - https://bugzilla.mozilla.org/show_bug.cgi?id=579776 - ### overlay = $.el 'div', id: 'overlay' $.bind overlay, 'click', -> $.rm overlay - $.bind dialog.firstElementChild, 'click', (e) -> e.stopPropagation() + $.bind dialog, 'click', (e) -> e.stopPropagation() $.add overlay, dialog $.add d.body, overlay @@ -2258,14 +2250,12 @@ firstRun = dialog = $.el 'div', id: 'overlay' className: 'firstrun' - innerHTML: " -
-
-

Click the 4chan X buttons for options; they are at the top and bottom of the page.

-

Updater options are in the updater dialog in replies at the bottom-right corner of the window.

-

If you don't see the buttons, try disabling your userstyles.

-
-
" + innerHTML: ' +
+

Click the 4chan X buttons for options; they are at the top and bottom of the page.

+

Updater options are in the updater dialog in replies at the bottom-right corner of the window.

+

If you don\'t see the buttons, try disabling your userstyles.

+
' $.add d.body, dialog $.bind window, 'click', firstRun.close @@ -2506,21 +2496,25 @@ Main = } #overlay { - display: table; position: fixed; top: 0; left: 0; height: 100%; width: 100%; + text-align: center; background: rgba(0,0,0,.5); } - #options { - display: table-cell; + #overlay::before { + content: ""; + display: inline-block; + height: 100%; vertical-align: middle; } - #options .dialog { - margin: auto; + #options { + display: inline-block; padding: 5px; + text-align: left; + vertical-align: middle; width: 500px; } #credits {