Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

-1 div required to center properly (options & firstrun)

Browse Source
This commit is contained in:
Nicolas Stepien 2011-10-31 18:54:20 +01:00
parent 6e0dadd5ec
commit d0da46ab82
2 changed files with 182 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
4chan_x.user.js
View File

@ -1221,9 +1221,9 @@
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: '\
<div class="reply dialog">\
<div id=optionsbar>\
<div id=optionsbar>\
<div id=credits>\
<a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a>\
| <a target=_blank href=https://github.com/aeosynth/4chan-x/issues>Issues</a>\
@ -1236,9 +1236,9 @@
| <label for=rice_tab>Rice</label>\
| <label for=keybinds_tab>Keybinds</label>\
</div>\
</div>\
<hr>\
<div id=content>\
</div>\
<hr>\
<div id=content>\
<input type=radio name=tab hidden id=main_tab checked>\
<div id=main></div>\
<input type=radio name=tab hidden id=flavors_tab>\
@ -1299,7 +1299,6 @@
<tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr>\
</tbody></table>\
</div>\
</div>\
</div>'
});
_ref = config.main;
@ -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: " <div id=options> <div class='reply dialog'> <p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p> <p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p> <p>If you don't see the buttons, try disabling your userstyles.</p> </div> </div>"
innerHTML: '\
<div id=options class="reply dialog">\
<p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p>\
<p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p>\
<p>If you don\'t see the buttons, try disabling your userstyles.</p>\
</div>'
});
$.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 {\

44
script.coffee
View File

@ -865,9 +865,8 @@ options =
$.replace home, a
dialog: ->
dialog = $.el 'div', id: 'options', innerHTML: '
<div class="reply dialog">
<div id=optionsbar>
dialog = $.el 'div', id: 'options', className: 'reply dialog', innerHTML: '
<div id=optionsbar>
<div id=credits>
<a target=_blank href=http://aeosynth.github.com/4chan-x/>4chan X</a>
| <a target=_blank href=https://github.com/aeosynth/4chan-x/issues>Issues</a>
@ -880,9 +879,9 @@ options =
| <label for=rice_tab>Rice</label>
| <label for=keybinds_tab>Keybinds</label>
</div>
</div>
<hr>
<div id=content>
</div>
<hr>
<div id=content>
<input type=radio name=tab hidden id=main_tab checked>
<div id=main></div>
<input type=radio name=tab hidden id=flavors_tab>
@ -943,7 +942,6 @@ options =
<tr><td>Reset the unread count to 0</td><td><input name=unreadCountTo0></td></tr>
</tbody></table>
</div>
</div>
</div>'
#main
@ -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: "
<div id=options>
<div class='reply dialog'>
innerHTML: '
<div id=options class="reply dialog">
<p>Click the <strong>4chan X</strong> buttons for options; they are at the top and bottom of the page.</p>
<p>Updater options are in the updater dialog in replies at the bottom-right corner of the window.</p>
<p>If you don't see the buttons, try disabling your userstyles.</p>
</div>
</div>"
<p>If you don\'t see the buttons, try disabling your userstyles.</p>
</div>'
$.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 {