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

Styling fixes.

Browse Source
This commit is contained in:
Nicolas Stepien 2012-05-03 16:51:01 +02:00
parent 43ecd1c761
commit 8c839754fd
2 changed files with 81 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
4chan_x.user.js
View File

@ -3236,7 +3236,7 @@
} }
qp = UI.el = $.el('div', { qp = UI.el = $.el('div', {
id: 'qp', id: 'qp',
className: 'reply dialog' className: 'reply dialog post'
}); });
$.add(d.body, qp); $.add(d.body, qp);
id = this.hash.slice(2); id = this.hash.slice(2);
@ -3245,11 +3245,11 @@
if (Conf['Quote Highlighting']) { if (Conf['Quote Highlighting']) {
$.addClass(el, 'qphl'); $.addClass(el, 'qphl');
} }
replyID = $.x('ancestor::div[contains(@class,"post")]', this).id; replyID = $.x('ancestor::div[contains(@class,"postContainer")]', this).id.slice(2);
_ref = $$('.quotelink, .backlink', qp); _ref = $$('.quotelink, .backlink', qp);
for (_i = 0, _len = _ref.length; _i < _len; _i++) { for (_i = 0, _len = _ref.length; _i < _len; _i++) {
quote = _ref[_i]; quote = _ref[_i];
if (quote.hash.slice(1) === replyID) { if (quote.hash.slice(2) === replyID) {
$.addClass(quote, 'forwardlink'); $.addClass(quote, 'forwardlink');
} }
} }
@ -3273,7 +3273,7 @@
return $.off(this, 'mouseout click', QuotePreview.mouseout); return $.off(this, 'mouseout click', QuotePreview.mouseout);
}, },
parse: function(req, id) { parse: function(req, id) {
var doc, node, post, qp; var doc, fileInfo, img, node, post, qp;
if (!((qp = UI.el) && qp.textContent === ("Loading " + id + "..."))) { if (!((qp = UI.el) && qp.textContent === ("Loading " + id + "..."))) {
return; return;
} }
@ -3286,10 +3286,15 @@
node = doc.getElementById("p" + id); node = doc.getElementById("p" + id);
qp.innerHTML = node.innerHTML; qp.innerHTML = node.innerHTML;
post = { post = {
el: qp, el: qp
filesize: $('.filesize', qp),
img: $('img[data-md5]', qp)
}; };
if (fileInfo = $('.fileInfo', qp)) {
img = fileInfo.nextElementSibling.firstElementChild;
if (img.alt !== 'File deleted.') {
post.fileInfo = fileInfo;
post.img = img;
}
}
if (Conf['Image Auto-Gif']) { if (Conf['Image Auto-Gif']) {
AutoGif.node(post); AutoGif.node(post);
} }
@ -3780,7 +3785,7 @@
case 'fit screen': case 'fit screen':
klass = 'fitwidth fitheight'; klass = 'fitwidth fitheight';
} }
$('body > form').className = klass; $.id('delform').className = klass;
if (/\bfitheight\b/.test(klass)) { if (/\bfitheight\b/.test(klass)) {
$.on(window, 'resize', ImageExpand.resize); $.on(window, 'resize', ImageExpand.resize);
if (!ImageExpand.style) { if (!ImageExpand.style) {
@ -4192,8 +4197,9 @@
callbacks: [], callbacks: [],
css: '\ css: '\
/* dialog styling */\ /* dialog styling */\
.dialog {\ .dialog.reply {\
border: 1px solid rgba(0,0,0,.25);\ border: 1px solid rgba(0,0,0,.25);\
padding: 0;\
}\ }\
.move {\ .move {\
cursor: move;\ cursor: move;\
@ -4204,28 +4210,26 @@ label, .favicon {\
a[href="javascript:;"] {\ a[href="javascript:;"] {\
text-decoration: none;\ text-decoration: none;\
}\ }\
.warning {\
color: red;\
}\
\ \
.hide_thread_button {\ .hide_thread_button {\
float: left;\ float: left;\
}\ }\
.hide_reply_button.hidden_reply {\
float: none;\
}\
\ \
.hidden_thread ~ *,\ .hidden_thread ~ *,\
.reply[hidden],\ [hidden],\
#content > [name=tab]:not(:checked) + div,\ #content > [name=tab]:not(:checked) + div,\
#updater:not(:hover) > :not(.move),\ #updater:not(:hover) > :not(.move),\
#qp > input, #qp .inline, .forwarded {\ .autohide:not(:hover) > form,\
#qp input, #qp .inline, .forwarded {\
display: none !important;\ display: none !important;\
}\ }\
\ \
h1 {\ h1 {\
text-align: center;\ text-align: center;\
}\ }\
.autohide:not(:hover) > form {\
display: none;\
}\
#qr > .move {\ #qr > .move {\
min-width: 300px;\ min-width: 300px;\
overflow: hidden;\ overflow: hidden;\
@ -4365,6 +4369,8 @@ h1 {\
}\ }\
.field {\ .field {\
border: 1px solid #CCC;\ border: 1px solid #CCC;\
box-sizing: border-box;\
-moz-box-sizing: border-box;\
color: #333;\ color: #333;\
font: 13px sans-serif;\ font: 13px sans-serif;\
margin: 0;\ margin: 0;\
@ -4388,6 +4394,7 @@ textarea.field {\
min-height: 120px;\ min-height: 120px;\
}\ }\
.field:only-child {\ .field:only-child {\
display: block;\
min-width: 100%;\ min-width: 100%;\
}\ }\
.captcha {\ .captcha {\
@ -4397,6 +4404,7 @@ textarea.field {\
text-align: center;\ text-align: center;\
}\ }\
.captcha > img {\ .captcha > img {\
display: block;\
height: 57px;\ height: 57px;\
width: 300px;\ width: 300px;\
}\ }\
@ -4411,41 +4419,21 @@ textarea.field {\
width: 30%;\ width: 30%;\
}\ }\
\ \
.new {\
background: lime;\
}\
.warning {\
color: red;\
}\
.replyhider {\
vertical-align: top;\
}\
\
.filesize + br + a {\
float: left;\
pointer-events: none;\
}\
.fileText:hover .fntrunc,\ .fileText:hover .fntrunc,\
.fileText:not(:hover) .fnfull {\ .fileText:not(:hover) .fnfull {\
display: none;\ display: none;\
}\ }\
img[data-md5], img[data-md5] + img {\
pointer-events: all;\
}\
.fitwidth img[data-md5] + img {\ .fitwidth img[data-md5] + img {\
max-width: 100%;\ max-width: 100%;\
}\ }\
.gecko > .fitwidth img[data-md5] + img,\ \
.presto > .fitwidth img[data-md5] + img {\
width: 100%;\
}\
/* revealed spoilers do not have height/width,\ /* revealed spoilers do not have height/width,\
this fixes "expanded" auto-gifs */\ this fixes "expanded" auto-gifs */\
img[data-md5] {\ .op > div > a > img[data-md5] {\
max-height: 252px;\ max-height: 252px;\
max-width: 252px;\ max-width: 252px;\
}\ }\
input ~ a > img[data-md5] {\ .reply > div > a > img[data-md5] {\
max-height: 127px;\ max-height: 127px;\
max-width: 127px;\ max-width: 127px;\
}\ }\
@ -4498,18 +4486,20 @@ input ~ a > img[data-md5] {\
#options label {\ #options label {\
text-decoration: underline;\ text-decoration: underline;\
}\ }\
#content > div {\ #content {\
height: 450px;\ height: 450px;\
overflow: auto;\ overflow: auto;\
}\ }\
#content textarea {\ #content textarea {\
box-sizing: border-box;\
-moz-box-sizing: border-box;\
margin: 0;\ margin: 0;\
min-height: 100px;\ min-height: 100px;\
resize: vertical;\ resize: vertical;\
width: 100%;\ width: 100%;\
}\ }\
#sauces {\ #sauces {\
height: 320px;\ height: 300px;\
}\ }\
\ \
#updater {\ #updater {\
@ -4522,9 +4512,8 @@ input ~ a > img[data-md5] {\
border: none;\ border: none;\
background: transparent;\ background: transparent;\
}\ }\
\ .new {\
#stats {\ background: lime;\
border: none;\
}\ }\
\ \
#watcher {\ #watcher {\
@ -4548,10 +4537,7 @@ input ~ a > img[data-md5] {\
text-decoration: underline;\ text-decoration: underline;\
}\ }\
\ \
#qp {\ #qp img {\
padding-bottom: 5px;\
}\
#qp > a > img {\
max-height: 300px;\ max-height: 300px;\
max-width: 500px;\ max-width: 500px;\
}\ }\
@ -4561,23 +4547,26 @@ input ~ a > img[data-md5] {\
.inlined {\ .inlined {\
opacity: .5;\ opacity: .5;\
}\ }\
.inline .reply {\ .inline {\
overflow: hidden;\
background-color: rgba(255, 255, 255, 0.15);\ background-color: rgba(255, 255, 255, 0.15);\
border: 1px solid rgba(128, 128, 128, 0.5);\ border: 1px solid rgba(128, 128, 128, 0.5);\
}\ }\
.filetitle, .replytitle, .postername, .commentpostername, .postertrip {\ .inline .post {\
background: none;\ background: none;\
border: none;\
}\ }\
.filter_highlight.thread,\ .filter_highlight.thread,\
.filter_highlight > .reply {\ .filter_highlight > .reply {\
box-shadow: -5px 0 rgba(255,0,0,0.5);\ box-shadow: -5px 0 rgba(255,0,0,0.5);\
}\ }\
.filtered {\ .filtered {\
text-decoration: line-through;\ text-decoration: underline line-through;\
}\ }\
.quotelink.forwardlink,\ .quotelink.forwardlink,\
.backlink.forwardlink {\ .backlink.forwardlink {\
color: #4C4CA9;\ text-decoration: none;\
border-bottom: 1px dashed;\
}\ }\
' '
}; };

91
script.coffee
View File

@ -2488,16 +2488,16 @@ QuotePreview =
return if /\binlined\b/.test @className return if /\binlined\b/.test @className
qp = UI.el = $.el 'div', qp = UI.el = $.el 'div',
id: 'qp' id: 'qp'
className: 'reply dialog' className: 'reply dialog post'
$.add d.body, qp $.add d.body, qp
id = @hash[2..] id = @hash[2..]
if el = $.id "p#{id}" if el = $.id "p#{id}"
qp.innerHTML = el.innerHTML qp.innerHTML = el.innerHTML
$.addClass el, 'qphl' if Conf['Quote Highlighting'] $.addClass el, 'qphl' if Conf['Quote Highlighting']
replyID = $.x('ancestor::div[contains(@class,"post")]', @).id replyID = $.x('ancestor::div[contains(@class,"postContainer")]', @).id[2..]
for quote in $$ '.quotelink, .backlink', qp for quote in $$ '.quotelink, .backlink', qp
if quote.hash[1..] is replyID if quote.hash[2..] is replyID
$.addClass quote, 'forwardlink' $.addClass quote, 'forwardlink'
else else
qp.textContent = "Loading #{id}..." qp.textContent = "Loading #{id}..."
@ -2524,9 +2524,12 @@ QuotePreview =
node = doc.getElementById "p#{id}" node = doc.getElementById "p#{id}"
qp.innerHTML = node.innerHTML qp.innerHTML = node.innerHTML
post = post =
el: qp el: qp
filesize: $ '.filesize', qp if fileInfo = $ '.fileInfo', qp
img: $ 'img[data-md5]', qp img = fileInfo.nextElementSibling.firstElementChild
if img.alt isnt 'File deleted.'
post.fileInfo = fileInfo
post.img = img
if Conf['Image Auto-Gif'] if Conf['Image Auto-Gif']
AutoGif.node post AutoGif.node post
if Conf['Time Formatting'] if Conf['Time Formatting']
@ -2879,7 +2882,7 @@ ImageExpand =
klass = 'fitheight' klass = 'fitheight'
when 'fit screen' when 'fit screen'
klass = 'fitwidth fitheight' klass = 'fitwidth fitheight'
$('body > form').className = klass $.id('delform').className = klass
if /\bfitheight\b/.test klass if /\bfitheight\b/.test klass
$.on window, 'resize', ImageExpand.resize $.on window, 'resize', ImageExpand.resize
unless ImageExpand.style unless ImageExpand.style
@ -3201,8 +3204,9 @@ Main =
callbacks: [] callbacks: []
css: ' css: '
/* dialog styling */ /* dialog styling */
.dialog { .dialog.reply {
border: 1px solid rgba(0,0,0,.25); border: 1px solid rgba(0,0,0,.25);
padding: 0;
} }
.move { .move {
cursor: move; cursor: move;
@ -3213,28 +3217,26 @@ label, .favicon {
a[href="javascript:;"] { a[href="javascript:;"] {
text-decoration: none; text-decoration: none;
} }
.warning {
color: red;
}
.hide_thread_button { .hide_thread_button {
float: left; float: left;
} }
.hide_reply_button.hidden_reply {
float: none;
}
.hidden_thread ~ *, .hidden_thread ~ *,
.reply[hidden], [hidden],
#content > [name=tab]:not(:checked) + div, #content > [name=tab]:not(:checked) + div,
#updater:not(:hover) > :not(.move), #updater:not(:hover) > :not(.move),
#qp > input, #qp .inline, .forwarded { .autohide:not(:hover) > form,
#qp input, #qp .inline, .forwarded {
display: none !important; display: none !important;
} }
h1 { h1 {
text-align: center; text-align: center;
} }
.autohide:not(:hover) > form {
display: none;
}
#qr > .move { #qr > .move {
min-width: 300px; min-width: 300px;
overflow: hidden; overflow: hidden;
@ -3374,6 +3376,8 @@ h1 {
} }
.field { .field {
border: 1px solid #CCC; border: 1px solid #CCC;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #333; color: #333;
font: 13px sans-serif; font: 13px sans-serif;
margin: 0; margin: 0;
@ -3397,6 +3401,7 @@ textarea.field {
min-height: 120px; min-height: 120px;
} }
.field:only-child { .field:only-child {
display: block;
min-width: 100%; min-width: 100%;
} }
.captcha { .captcha {
@ -3406,6 +3411,7 @@ textarea.field {
text-align: center; text-align: center;
} }
.captcha > img { .captcha > img {
display: block;
height: 57px; height: 57px;
width: 300px; width: 300px;
} }
@ -3420,41 +3426,21 @@ textarea.field {
width: 30%; width: 30%;
} }
.new {
background: lime;
}
.warning {
color: red;
}
.replyhider {
vertical-align: top;
}
.filesize + br + a {
float: left;
pointer-events: none;
}
.fileText:hover .fntrunc, .fileText:hover .fntrunc,
.fileText:not(:hover) .fnfull { .fileText:not(:hover) .fnfull {
display: none; display: none;
} }
img[data-md5], img[data-md5] + img {
pointer-events: all;
}
.fitwidth img[data-md5] + img { .fitwidth img[data-md5] + img {
max-width: 100%; max-width: 100%;
} }
.gecko > .fitwidth img[data-md5] + img,
.presto > .fitwidth img[data-md5] + img {
width: 100%;
}
/* revealed spoilers do not have height/width, /* revealed spoilers do not have height/width,
this fixes "expanded" auto-gifs */ this fixes "expanded" auto-gifs */
img[data-md5] { .op > div > a > img[data-md5] {
max-height: 252px; max-height: 252px;
max-width: 252px; max-width: 252px;
} }
input ~ a > img[data-md5] { .reply > div > a > img[data-md5] {
max-height: 127px; max-height: 127px;
max-width: 127px; max-width: 127px;
} }
@ -3507,18 +3493,20 @@ input ~ a > img[data-md5] {
#options label { #options label {
text-decoration: underline; text-decoration: underline;
} }
#content > div { #content {
height: 450px; height: 450px;
overflow: auto; overflow: auto;
} }
#content textarea { #content textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 0; margin: 0;
min-height: 100px; min-height: 100px;
resize: vertical; resize: vertical;
width: 100%; width: 100%;
} }
#sauces { #sauces {
height: 320px; height: 300px;
} }
#updater { #updater {
@ -3531,9 +3519,8 @@ input ~ a > img[data-md5] {
border: none; border: none;
background: transparent; background: transparent;
} }
.new {
#stats { background: lime;
border: none;
} }
#watcher { #watcher {
@ -3557,10 +3544,7 @@ input ~ a > img[data-md5] {
text-decoration: underline; text-decoration: underline;
} }
#qp { #qp img {
padding-bottom: 5px;
}
#qp > a > img {
max-height: 300px; max-height: 300px;
max-width: 500px; max-width: 500px;
} }
@ -3570,23 +3554,26 @@ input ~ a > img[data-md5] {
.inlined { .inlined {
opacity: .5; opacity: .5;
} }
.inline .reply { .inline {
overflow: hidden;
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(128, 128, 128, 0.5); border: 1px solid rgba(128, 128, 128, 0.5);
} }
.filetitle, .replytitle, .postername, .commentpostername, .postertrip { .inline .post {
background: none; background: none;
border: none;
} }
.filter_highlight.thread, .filter_highlight.thread,
.filter_highlight > .reply { .filter_highlight > .reply {
box-shadow: -5px 0 rgba(255,0,0,0.5); box-shadow: -5px 0 rgba(255,0,0,0.5);
} }
.filtered { .filtered {
text-decoration: line-through; text-decoration: underline line-through;
} }
.quotelink.forwardlink, .quotelink.forwardlink,
.backlink.forwardlink { .backlink.forwardlink {
color: #4C4CA9; text-decoration: none;
border-bottom: 1px dashed;
} }
' '