diff --git a/inc/config.php b/inc/config.php index 5f9b7130..6be2519c 100644 --- a/inc/config.php +++ b/inc/config.php @@ -1254,7 +1254,7 @@ $config['embedding'] = [ [ '/^https?:\/\/(\w+\.)?youtube\.com\/watch\?v=([a-zA-Z0-9\-_]{10,11})?$/i', - '' + '' ], [ '/^https?:\/\/(\w+\.)?vimeo\.com\/(\d{2,10})(\?.+)?$/i', diff --git a/js/auto-reload.js b/js/auto-reload.js index b9cf3e23..8b6e286c 100644 --- a/js/auto-reload.js +++ b/js/auto-reload.js @@ -139,7 +139,12 @@ $(document).ready(function(){ var poll = function(manualUpdate) { stop_auto_update(); - $('#update_secs').text(_("Updating...")); + let isScreenSmall = window.matchMedia('(max-width: 48em)').matches; + if (isScreenSmall) { + $('#update_secs').text('...'); + } else { + $('#update_secs').text(_('Updating...')); + } $.ajax({ url: document.location, diff --git a/js/expand.js b/js/expand.js index 4dde131b..8727ea91 100644 --- a/js/expand.js +++ b/js/expand.js @@ -20,7 +20,7 @@ $(document).ready(function() { let doExpand = function() { $(this) - .html($(this).text().replace(_("Click reply to view."), '' + _("Click to expand") + '.')) + .html($(this).text().concat(' ' + _('Click to expand') + '.')) .find('a').click(window.expandFun = function() { let thread = $(this).parents('[id^="thread_"]'); $.ajax({ @@ -35,7 +35,8 @@ $(document).ready(function() { if (lastExpanded) { $(this).addClass('expanded').insertAfter(lastExpanded).before('
'); } else { - $(this).addClass('expanded').insertAfter(thread.find('div.post:first')).after('
'); + let opBr = thread.find('div.post').first().next(); + $(this).addClass('expanded').insertAfter(opBr).after('
'); } lastExpanded = $(this); $(document).trigger('new_post', this); diff --git a/js/hide-images.js b/js/hide-images.js index 4fdad891..66d9b354 100644 --- a/js/hide-images.js +++ b/js/hide-images.js @@ -16,7 +16,7 @@ $(document).ready(function(){ $('').appendTo($('head')); - + if (!localStorage.hiddenimages) localStorage.hiddenimages = '{}'; @@ -47,9 +47,9 @@ $(document).ready(function(){ if (!hidden_data[board]) { hidden_data[board] = {}; // id : timestamp } - - var replacement = $(''+_('File')+' ('+_('hide')+'): '); - + + var replacement = $(''); + replacement.find('a').click(function() { if (hidden_data[board][id]) { hidden_data[board][id]['ts'] = Math.round(Date.now() / 1000); @@ -59,36 +59,36 @@ $(document).ready(function(){ hidden_data[board][id] = {ts: Math.round(Date.now() / 1000), index: [index]}; } store_data(); - - var show_link = $(''+_('show')+'').click(function() { + + var show_link = $('').click(function() { var i = hidden_data[board][id]['index'].indexOf(index); if (i > -1) hidden_data[board][id]['index'].splice(i,1); - + if (hidden_data[board][id]['index'].length === 0) delete hidden_data[board][id]; store_data(); - + $(img) .removeClass('hidden') .attr('src', $(img).data('orig')); $(this).prev().show(); $(this).remove(); }); - + $(this).hide().after(show_link); - + if ($(img).parent().data('expanded') == 'true') { $(img).parent().click(); } - + $(img) .data('orig', img.src) .attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==') .addClass('hidden'); }); - + $(this).parent().prev().contents().first().replaceWith(replacement); - + if (hidden_data[board][id] && hidden_data[board][id]['index'].indexOf(index) !== -1) $(this).parent().prev().find('.hide-image-link').click(); }; diff --git a/js/mobile-style.js b/js/mobile-style.js index e35dc402..72e0c971 100644 --- a/js/mobile-style.js +++ b/js/mobile-style.js @@ -11,11 +11,7 @@ * $config['additional_javascript'][] = 'js/mobile-style.js'; */ -if(navigator.userAgent.match(/iPhone|iPod|iPad|Android|Opera Mini|Blackberry|PlayBook|Windows Phone|Tablet PC|Windows CE|IEMobile/i)) { - $('html').addClass("mobile-style"); - device_type = "mobile"; -} -else { +if (!navigator.userAgent.match(/iPhone|iPod|iPad|Android|Opera Mini|Blackberry|PlayBook|Windows Phone|Tablet PC|Windows CE|IEMobile/i)) { $('html').addClass("desktop-style"); device_type = "desktop"; } diff --git a/js/post-filter.js b/js/post-filter.js index 12ae2cd7..f5437e49 100644 --- a/js/post-filter.js +++ b/js/post-filter.js @@ -182,13 +182,13 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata $(ele).data('hidden', true); if ($ele.hasClass('op')) { - $ele.parent().find('.body, .files, .video-container').not($ele.children('.reply').children()).hide(); + $ele.parent().find('.head, .body, .files, .video-container').not($ele.children('.reply').children()).hide(); // hide thread replies on index view if (active_page == 'index' || active_page == 'ukko') $ele.parent().find('.omitted, .reply:not(.hidden), post_no, .mentioned, br').hide(); } else { // normal posts - $ele.children('.body, .files, .video-container').hide(); + $ele.children('.head, .body, .files, .video-container').hide(); } } function show(ele) { @@ -196,11 +196,11 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata $(ele).data('hidden', false); if ($ele.hasClass('op')) { - $ele.parent().find('.body, .files, .video-container').show(); + $ele.parent().find('.head, .body, .files, .video-container').show(); if (active_page == 'index') $ele.parent().find('.omitted, .reply:not(.hidden), post_no, .mentioned, br').show(); } else { // normal posts - $ele.children('.body, .files, .video-container').show(); + $ele.children('.head, .body, .files, .video-container').show(); } } @@ -226,18 +226,19 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata submenu.add_item('filter-remove-trip', _('Tripcode')); Menu.onclick(function (e, $buffer) { - var ele = e.target.parentElement.parentElement; - var $ele = $(ele); + let ele = e.target.parentElement.parentElement.parentElement; + let $ele = $(ele); - var threadId = $ele.parent().attr('id').replace('thread_', ''); - var boardId = $ele.parent().data('board'); - var postId = $ele.find('.post_no').not('[id]').text(); + let threadNode = $ele.parent('.thread'); + let threadId = threadNode.attr('id').replace('thread_', ''); + let boardId = $ele.parent().data('board'); + let postId = $ele.find('.post_no').not('[id]').text(); if (pageData.hasUID) { var postUid = $ele.find('.poster_id').text(); } - var postName; - var postTrip = ''; + let postName; + let postTrip = ''; if (!pageData.forcedAnon) { postName = (typeof $ele.find('.name').contents()[0] == 'undefined') ? '' : nameSpanToString($ele.find('.name')[0]); postTrip = $ele.find('.trip').text(); diff --git a/js/post-hover.js b/js/post-hover.js index d7970871..b30c35b4 100644 --- a/js/post-hover.js +++ b/js/post-hover.js @@ -13,165 +13,217 @@ * */ -onReady(function() { - let dontFetchAgain = []; - initHover = function() { - let link = $(this); - let id; - let matches; +/* + * Unknown media types always return false, so old browsers (css media 3 or prior to css media) which do support + * any-hover or css media queries may return false negatives. + * Handle it by checking if the query is explicitly NOT supported. + */ +if (!window.matchMedia('(any-hover: none)').matches) { + onReady(function() { + let isScreenSmall = false + /* + * Set up screen size detection. + * If the method is not defined, suppose the screen is always not-small. + */ + if (window.matchMedia) { + let query = window.matchMedia('(max-width: 48em)'); - if (link.is('[data-thread]')) { - id = link.attr('data-thread'); - } else if (matches = link.text().match(/^>>(?:>\/([^\/]+)\/)?(\d+)$/)) { - id = matches[2]; - } else { - return; + query.addEventListener('change', (e) => isScreenSmall = e.matches); + isScreenSmall = query.matches; } - let board = $(this); - while (board.data('board') === undefined) { - board = board.parent(); - } - let threadid; - if (link.is('[data-thread]')) { - threadid = 0; - } else { - threadid = board.attr('id').replace("thread_", ""); - } + let dontFetchAgain = []; + initHover = function() { + let link = $(this); + let id; + let matches; - board = board.data('board'); + if (link.is('[data-thread]')) { + id = link.attr('data-thread'); + } else if (matches = link.text().match(/^>>(?:>\/([^\/]+)\/)?(\d+)$/)) { + id = matches[2]; + } else { + return; + } - let parentboard = board; + let board = $(this); + while (board.data('board') === undefined) { + board = board.parent(); + } + let threadid; + if (link.is('[data-thread]')) { + threadid = 0; + } else { + threadid = board.attr('id').replace("thread_", ""); + } - if (link.is('[data-thread]')) { - parentboard = $('form[name="post"] input[name="board"]').val(); - } else if (matches[1] !== undefined) { - board = matches[1]; - } + board = board.data('board'); - let post = false; - let hovering = false; - let hoveredAt; - link.hover(function(e) { - hovering = true; - hoveredAt = {'x': e.pageX, 'y': e.pageY}; + let parentboard = board; - let startHover = function(link) { - if (post.is(':visible') && - post.offset().top >= $(window).scrollTop() && - post.offset().top + post.height() <= $(window).scrollTop() + $(window).height()) { - // post is in view - post.addClass('highlighted'); - } else { - let newPost = post.clone(); - newPost.find('>.reply, >br').remove(); - newPost.find('span.mentioned').remove(); - newPost.find('a.post_anchor').remove(); + if (link.is('[data-thread]')) { + parentboard = $('form[name="post"] input[name="board"]').val(); + } else if (matches[1] !== undefined) { + board = matches[1]; + } - newPost - .attr('id', 'post-hover-' + id) - .attr('data-board', board) - .addClass('post-hover') - .css('border-style', 'solid') - .css('box-shadow', '1px 1px 1px #999') - .css('display', 'block') - .css('position', 'absolute') - .css('font-style', 'normal') - .css('z-index', '100') - .addClass('reply').addClass('post') - .insertAfter(link.parent()) + let post = false; + let hovering = false; + let hoveredAt; - link.trigger('mousemove'); + let updatePreviewPosition = function(pageX, pageY, hoverPreview) { + let scrollTop = $(window).scrollTop(); + if (link.is("[data-thread]")) { + scrollTop = 0; } + let epy = pageY; + if (link.is("[data-thread]")) { + epy -= $(window).scrollTop(); + } + + let top = (epy ? epy : hoveredAt['y']) - 10; + + if (epy < scrollTop + 15) { + top = scrollTop; + } else if (epy > scrollTop + $(window).height() - hoverPreview.height() - 15) { + top = scrollTop + $(window).height() - hoverPreview.height() - 15; + } + + let hovery = pageY ? pageY : hoveredAt['y']; + if ((hovery - top) > 20){ + top = hovery; + } + + let previewX; + if (isScreenSmall) { + previewX = 0; + } else { + previewX = (pageX ? pageX : hoveredAt['x']) + 1 + } + + hoverPreview.css('left', previewX).css('top', top); }; - post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id); - if (post.length > 0) { - startHover($(this)); - } else { - let url = link.attr('href').replace(/#.*$/, ''); + link.hover(function(e) { + hovering = true; + hoveredAt = {'x': e.pageX, 'y': e.pageY}; - if ($.inArray(url, dontFetchAgain) != -1) { + let startHover = function(link) { + if ($.contains(post[0], link[0])) { + // link links to itself or to op; ignore + } else if (post.is(':visible') && + post.offset().top >= $(window).scrollTop() && + post.offset().top + post.height() <= $(window).scrollTop() + $(window).height()) { + // Post is in view, highlight it. + post.addClass('highlighted'); + } else { + // Creates the preview, and displays it, + let hoverPreview = post.clone(); + hoverPreview.find('>.reply, >br').remove(); + hoverPreview.find('a.post_anchor').remove(); + + hoverPreview + .attr('id', 'post-hover-' + id) + .attr('data-board', board) + .addClass('post-hover') + .css('border-style', 'solid') + .css('display', 'inline-block') + .css('position', 'absolute') + .css('font-style', 'normal') + .css('z-index', '100'); + + if (isScreenSmall) { + hoverPreview + .css('margin-top', '1em') + .css('border-left-style', 'none') + .css('border-right-style', 'none'); + } else { + hoverPreview.css('margin-left', '1em'); + } + + hoverPreview.addClass('reply').addClass('post') + .insertAfter(link.parent()) + + updatePreviewPosition(e.pageX, e.pageY, hoverPreview); + } + }; + + post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id); + if (post.length > 0) { + startHover($(this)); + } else { + let url = link.attr('href').replace(/#.*$/, ''); + + if ($.inArray(url, dontFetchAgain) != -1) { + return; + } + dontFetchAgain.push(url); + + $.ajax({ + url: url, + context: document.body, + success: function(data) { + let mythreadid = $(data).find('div[id^="thread_"]').attr('id').replace("thread_", ""); + + if (mythreadid == threadid && parentboard == board) { + $(data).find('div.post.reply').each(function() { + if ($('[data-board="' + board + '"] #' + $(this).attr('id')).length == 0) { + $('[data-board="' + board + '"]#thread_' + threadid + " .post.reply:first").before($(this).hide().addClass('hidden')); + } + }); + } else if ($('[data-board="' + board + '"]#thread_' + mythreadid).length > 0) { + $(data).find('div.post.reply').each(function() { + if ($('[data-board="' + board + '"] #' + $(this).attr('id')).length == 0) { + $('[data-board="' + board + '"]#thread_' + mythreadid + " .post.reply:first").before($(this).hide().addClass('hidden')); + } + }); + } else { + $(data).find('div[id^="thread_"]').hide().attr('data-cached', 'yes').prependTo('form[name="postcontrols"]'); + } + + post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id); + + if (hovering && post.length > 0) { + startHover(link); + } + } + }); + } + }, function() { + // Remove the preview. + + hovering = false; + if (!post) { return; } - dontFetchAgain.push(url); - $.ajax({ - url: url, - context: document.body, - success: function(data) { - let mythreadid = $(data).find('div[id^="thread_"]').attr('id').replace("thread_", ""); + post.removeClass('highlighted'); + if (post.hasClass('hidden') || post.data('cached') == 'yes') { + post.css('display', 'none'); + } + $('.post-hover').remove(); + }).mousemove(function(e) { + // Update the preview position if the mouse moves. - if (mythreadid == threadid && parentboard == board) { - $(data).find('div.post.reply').each(function() { - if ($('[data-board="' + board + '"] #' + $(this).attr('id')).length == 0) { - $('[data-board="' + board + '"]#thread_' + threadid + " .post.reply:first").before($(this).hide().addClass('hidden')); - } - }); - } else if ($('[data-board="' + board + '"]#thread_' + mythreadid).length > 0) { - $(data).find('div.post.reply').each(function() { - if ($('[data-board="' + board + '"] #' + $(this).attr('id')).length == 0) { - $('[data-board="' + board + '"]#thread_' + mythreadid + " .post.reply:first").before($(this).hide().addClass('hidden')); - } - }); - } else { - $(data).find('div[id^="thread_"]').hide().attr('data-cached', 'yes').prependTo('form[name="postcontrols"]'); - } + if (!post) { + return; + } - post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id); + // The actual displayed preview. + let hoverPreview = $('#post-hover-' + id + '[data-board="' + board + '"]'); + if (hoverPreview.length === 0) { + return; + } - if (hovering && post.length > 0) { - startHover(link); - } - } - }); - } - }, function() { - hovering = false; - if (!post) { - return; - } + updatePreviewPosition(e.pageX, e.pageY, hoverPreview); + }); + }; - post.removeClass('highlighted'); - if (post.hasClass('hidden') || post.data('cached') == 'yes') { - post.css('display', 'none'); - } - $('.post-hover').remove(); - }).mousemove(function(e) { - if (!post) { - return; - } + $('div.body a:not([rel="nofollow"])').each(initHover); - let hover = $('#post-hover-' + id + '[data-board="' + board + '"]'); - if (hover.length == 0) { - return; - } - - let scrollTop = $(window).scrollTop(); - if (link.is("[data-thread]")) { - scrollTop = 0; - } - let epy = e.pageY; - if (link.is("[data-thread]")) { - epy -= $(window).scrollTop(); - } - - let top = (epy ? epy : hoveredAt['y']) - 10; - - if (epy < scrollTop + 15) { - top = scrollTop; - } else if (epy > scrollTop + $(window).height() - hover.height() - 15) { - top = scrollTop + $(window).height() - hover.height() - 15; - } - - hover.css('left', (e.pageX ? e.pageX : hoveredAt['x'])).css('top', top); + // allow to work with auto-reload.js, etc. + $(document).on('new_post', function(e, post) { + $(post).find('div.body a:not([rel="nofollow"])').each(initHover); }); - }; - - $('div.body a:not([rel="nofollow"])').each(initHover); - - // allow to work with auto-reload.js, etc. - $(document).on('new_post', function(e, post) { - $(post).find('div.body a:not([rel="nofollow"])').each(initHover); }); -}); +} diff --git a/js/post-menu.js b/js/post-menu.js index 6018dfdb..e6701e5b 100644 --- a/js/post-menu.js +++ b/js/post-menu.js @@ -21,7 +21,7 @@ * submenu = Menu.add_submenu('filter-menu-add', 'Add filter'); * submenu.add_item('filter-add-post-plus', 'Post +', 'Hide post and all replies'); * submenu.add_item('filter-add-id', 'ID'); - * + * * Usage: * $config['additional_javascript'][] = 'js/jquery.min.js'; * $config['additional_javascript'][] = 'js/post-menu.js'; @@ -163,7 +163,7 @@ cssString = '.post-menu li:hover>ul {display: block; left: 100%; margin-top: -3px;}\n' + '.post-menu-arrow {float: right; margin-left: 10px;}\n' + '.post-menu.hidden, .post-menu .hidden {display: none;}\n' + - '.post-btn {transition: transform 0.1s; width: 15px; text-align: center; font-size: 10pt; opacity: 0.8; text-decoration: none; margin: -6px 0px 0px -5px !important; display: inline-block;}\n' + + '.post-btn {transition: transform 0.1s; width: 15px; text-align: center; font-size: 10pt; opacity: 0.8; text-decoration: none; margin: -6px 0px 0px 0px !important; display: inline-block;}\n' + '.post-btn:hover {opacity: 1;}\n' + '.post-btn-open {transform: rotate(90deg);}\n'; diff --git a/js/quick-post-controls.js b/js/quick-post-controls.js index c625fa85..f842f02d 100644 --- a/js/quick-post-controls.js +++ b/js/quick-post-controls.js @@ -14,19 +14,17 @@ $(document).ready(function() { let open_form = function() { - let thread = $(this).parent().parent().hasClass('op'); let id = $(this).attr('name').match(/^delete_(\d+)$/)[1]; if (this.checked) { let post_form = $('
' + - '
' + - (!thread ? '
' : '') + + '
' + '' + - ': ' + + ': ' + '' + - '' + + '' + '' + ' ' + @@ -57,11 +55,7 @@ $(document).ready(function() { post_form.find('input[type="password"]').val(localStorage.password); - if (thread) { - post_form.prependTo($(this).parent().parent().find('div.body')); - } else { - post_form.appendTo($(this).parent().parent()); - } + post_form.appendTo($(this).parent().parent()); $(window).trigger('quick-post-controls', post_form); } else { diff --git a/js/show-backlinks.js b/js/show-backlinks.js index 81cdc7a1..af610112 100644 --- a/js/show-backlinks.js +++ b/js/show-backlinks.js @@ -14,7 +14,7 @@ onReady(function() { let showBackLinks = function() { - let reply_id = $(this).attr('id').replace(/(^reply_)|(^op_)/, ''); + let replyId = $(this).attr('id').replace(/(^reply_)|(^op_)/, ''); $(this).find('div.body a:not([rel="nofollow"])').each(function() { let id = $(this).text().match(/^>>(\d+)$/); @@ -25,25 +25,26 @@ onReady(function() { } let post = $('#reply_' + id); - if (post.length == 0){ + if (post.length == 0) { post = $('#op_' + id); if (post.length == 0) { return; } } - let mentioned = post.find('p.intro span.mentioned'); - if(mentioned.length == 0) { - mentioned = $('').appendTo(post.find('p.intro')); + let mentioned = post.find('.head div.mentioned'); + if (mentioned.length === 0) { + // The op has two "head"s divs, use the second. + mentioned = $('
').prependTo(post.find('.head').last()); } - if (mentioned.find('a.mentioned-' + reply_id).length != 0) { + if (mentioned.find('a.mentioned-' + replyId).length != 0) { return; } - let link = $('>>' + - reply_id + ''); - link.appendTo(mentioned) + let link = $('>>' + replyId + ''); + link.appendTo(mentioned); if (window.init_hover) { link.each(init_hover); @@ -51,13 +52,13 @@ onReady(function() { }); }; - $('div.post.reply').each(showBackLinks); + $('div.post').each(showBackLinks); $(document).on('new_post', function(e, post) { - if ($(post).hasClass('reply')) { + if ($(post).hasClass('reply') || $(post).hasClass('op')) { showBackLinks.call(post); } else { - $(post).find('div.post.reply').each(showBackLinks); + $(post).find('div.post').each(showBackLinks); } }); }); diff --git a/js/thread-stats.js b/js/thread-stats.js index 8873dbdb..8bd7da41 100644 --- a/js/thread-stats.js +++ b/js/thread-stats.js @@ -2,115 +2,119 @@ * thread-stats.js * - Adds statistics of the thread below the posts area * - Shows ID post count beside each postID on hover - * + * * Usage: * $config['additional_javascript'][] = 'js/jquery.min.js'; * $config['additional_javascript'][] = 'js/thread-stats.js'; */ + if (active_page == 'thread') { -$(document).ready(function(){ - //check if page uses unique ID - var IDsupport = ($('.poster_id').length > 0); - var thread_id = (document.location.pathname + document.location.search).split('/'); - thread_id = thread_id[thread_id.length -1].split('+')[0].split('-')[0].split('.')[0]; - - $('.boardlist.bottom, footer') - .first() - .before('
'); - var el = $('#thread_stats'); - el.prepend(_('Page')+' ?'); - if (IDsupport){ - el.prepend('0 UIDs | '); - } - el.prepend('0 '+_('images')+' | '); - el.prepend('0 '+_('replies')+' | '); - delete el; - function update_thread_stats(){ - var op = $('#thread_'+ thread_id +' > div.post.op:not(.post-hover):not(.inline)').first(); - var replies = $('#thread_'+ thread_id +' > div.post.reply:not(.post-hover):not(.inline)'); - // post count - $('#thread_stats_posts').text(replies.length); - // image count - $('#thread_stats_images').text(replies.filter(function(){ - return $(this).find('> .files').text().trim() != false; - }).length); - // unique ID count - if (IDsupport) { - var opID = op.find('> .intro > .poster_id').text(); - var ids = {}; - replies.each(function(){ - var cur = $(this).find('> .intro > .poster_id'); - var curID = cur.text(); - if (ids[curID] === undefined) { - ids[curID] = 0; - } - ids[curID]++; - }); - if (ids[opID] === undefined) { - ids[opID] = 0; - } - ids[opID]++; - var cur = op.find('>.intro >.poster_id'); - cur.find('+.posts_by_id').remove(); - cur.after(' ('+ ids[cur.text()] +')'); - replies.each(function(){ - cur = $(this).find('>.intro >.poster_id'); - cur.find('+.posts_by_id').remove(); - cur.after(' ('+ ids[cur.text()] +')'); - }); - var size = function(obj) { - var size = 0, key; - for (key in obj) { - if (obj.hasOwnProperty(key)) size++; - } - return size; - }; - $('#thread_stats_uids').text(size(ids)); + $(document).ready(function() { + // Check if page uses unique ID. + let idSupport = ($('.poster_id').length > 0); + let threadId = (document.location.pathname + document.location.search).split('/'); + threadId = threadId[threadId.length -1].split('+')[0].split('-')[0].split('.')[0]; + let boardName = $('input[name="board"]').val(); + + $('.boardlist.bottom, footer') + .first() + .before('
'); + + let el = $('#thread_stats'); + el.prepend(_('Page')+ ' ?'); + if (idSupport) { + el.prepend('0 UIDs | '); } - var board_name = $('input[name="board"]').val(); - $.getJSON('//'+ document.location.host +'/'+ board_name +'/threads.json').success(function(data){ - var found, page = '???'; - for (var i=0;data[i];i++){ - var threads = data[i].threads; - for (var j=0; threads[j]; j++){ - if (parseInt(threads[j].no) == parseInt(thread_id)) { - page = data[i].page +1; - found = true; + el.prepend('0 ' +_('images')+ ' | '); + el.prepend('0 ' +_('replies')+ ' | '); + delete el; + + function fetchPageNumber() { + $.getJSON('//' + document.location.host + '/' + boardName + '/threads.json', function(data) { + let found; + let page = '???'; + let threadIdInt = parseInt(threadId); + for (let i = 0; data[i]; i++) { + let threads = data[i].threads; + for (let j = 0; threads[j]; j++) { + if (parseInt(threads[j].no) === threadIdInt) { + page = data[i].page +1; + found = true; + break; + } + } + if (found) { break; } } - if (found) break; - } - $('#thread_stats_page').text(page); - if (!found) $('#thread_stats_page').css('color','red'); - else $('#thread_stats_page').css('color',''); - }); - } - // load the current page the thread is on. - // uses ajax call so it gets loaded on a delay (depending on network resources available) - var thread_stats_page_timer = setInterval(function(){ - var board_name = $('input[name="board"]').val(); - $.getJSON('//'+ document.location.host +'/'+ board_name +'/threads.json').success(function(data){ - var found, page = '???'; - for (var i=0;data[i];i++){ - var threads = data[i].threads; - for (var j=0; threads[j]; j++){ - if (parseInt(threads[j].no) == parseInt(thread_id)) { - page = data[i].page +1; - found = true; - break; - } + let threadStatsPage = $('#thread_stats_page'); + threadStatsPage.text(page); + if (!found) { + threadStatsPage.css('color', 'red'); + } else { + threadStatsPage.css('color', ''); } - if (found) break; + }); + } + + function updateThreadStats() { + let op = $('#thread_' + threadId).find('div.post.op:not(.post-hover):not(.inline)').first(); + let replies = $('#thread_' + threadId).find('div.post.reply:not(.post-hover):not(.inline)'); + // Post count. + $('#thread_stats_posts').text(replies.length); + // Image count. + $('#thread_stats_images').text(replies.filter(function() { + return $(this).find('>> .files').text().trim() != false; + }).length); + + // Unique ID count. + if (idSupport) { + let opID = op.find('> .intro > .poster_id').text(); + let ids = {}; + replies.each(function() { + let cur = $(this).find('> .intro > .poster_id'); + let curID = cur.text(); + if (ids[curID] === undefined) { + ids[curID] = 0; + } + ids[curID]++; + }); + + if (ids[opID] === undefined) { + ids[opID] = 0; + } + ids[opID]++; + + let cur = op.find('>.intro >.poster_id'); + cur.find(' +.posts_by_id').remove(); + cur.after(' (' + ids[cur.text()] + ')'); + replies.each(function() { + cur = $(this).find('>.intro >.poster_id'); + cur.find(' +.posts_by_id').remove(); + cur.after(' (' + ids[cur.text()] + ')'); + }); + let size = function(obj) { + let size = 0; + for (key in obj) { + if (obj.hasOwnProperty(key)) { + size++; + } + } + return size; + }; + $('#thread_stats_uids').text(size(ids)); } - $('#thread_stats_page').text(page); - if (!found) $('#thread_stats_page').css('color','red'); - else $('#thread_stats_page').css('color',''); - }); - },30000); + + fetchPageNumber(); + } + + // Load the current page the thread is on. + // Uses ajax call so it gets loaded on a delay (depending on network resources available). + setInterval(fetchPageNumber, 30000); + $('body').append(''); - update_thread_stats(); - $('#update_thread').click(update_thread_stats); - $(document).on('new_post',update_thread_stats); -}); + updateThreadStats(); + $('#update_thread').click(updateThreadStats); + $(document).on('new_post', updateThreadStats); + }); } diff --git a/js/thread-watcher.js b/js/thread-watcher.js index 5020eabd..c2a196bb 100644 --- a/js/thread-watcher.js +++ b/js/thread-watcher.js @@ -45,7 +45,7 @@ watchlist.render = function(reset) { } else { // If the watchlist has not yet been rendered, create it. let menuStyle = getComputedStyle($('.boardlist')[0]); - $((active_page == 'ukko') ? 'hr:first' : (active_page == 'catalog') ? 'body>span:first' : 'form[name="post"]').before( + $('.watchlist-container').append( $('
'+ '
'+ '['+_('Clear List')+'] '+ @@ -88,10 +88,11 @@ watchlist.add = function(sel) { // Grab the reply link.; let threadLink = $(sel).siblings('a:not(.watchThread)').last().attr('href'); // Figure out the thread name. If anon, use the thread id. - if ($(sel).parent().find('.subject').length) { - threadName = $(sel).parent().find('.subject').text().substring(0,20); + let subject = $(sel).parent().parent().find('.subject'); + if (subject.length) { + threadName = subject.text().substring(0, 20); } else { - threadName = $(sel).parents('div').last().attr('id'); + threadName = $(sel).parent('div')[0].id.slice(3); // Remove "op_". } threadInfo = [board_name, threadName, postCount, threadLink]; @@ -152,9 +153,9 @@ $(document).ready(function() { } // Append the watchlist toggle button. - $('.boardlist').append(' [ ' + _('watchlist') + ' ]'); - // Append a watch thread button after every OP post number. - $('.op>.intro>.post_no:odd').after('[' + _('Watch Thread') + ']'); + $('.boardlist').append('
[' + _('Watchlist') + ']
'); + // Append a watch thread button in the user controls container. + $('div.post.op>.intro>.user-controls').append('[' + _('Watch Thread') + ']'); // Draw the watchlist, hidden. watchlist.render(); diff --git a/stylesheets/burichan.css b/stylesheets/burichan.css index 6b1de235..33586760 100644 --- a/stylesheets/burichan.css +++ b/stylesheets/burichan.css @@ -58,6 +58,10 @@ div.post.reply.post-hover { border-width: 1px; border-style: none solid solid none; border-color: #B7C5D9; + + @media (max-width: 48em) { + border-right-style: none; + } } div.post.reply div.body a { diff --git a/stylesheets/caffe.css b/stylesheets/caffe.css index 7ba7bd1c..45bcca1d 100644 --- a/stylesheets/caffe.css +++ b/stylesheets/caffe.css @@ -94,7 +94,7 @@ textarea#body{ html, body { - background:#261712 url('img/caffe_bg.png') repeat fixed center; + background:#261712 url('img/caffe_bg.png') repeat fixed center; color: #8e6152; font-family: "Trebuchet MS",Trebuchet,serif; font-size: 12pt; @@ -112,7 +112,7 @@ a:hover, a:visited:hover { font-size: .8em; } .desktop-style div.boardlist:nth-child(1) .boardlist { -background-color: #261712; +background-color: #261712; } .desktop-style div.boardlist:nth-child(1):hover { background-color: #261712; @@ -131,7 +131,7 @@ background-color: #261712; /*width:100%;*/ } .theader, .passvalid { - + text-align:center; padding:2px; color:#39241d; @@ -219,8 +219,8 @@ background-color: #261712; color:#a47a6b; } .reply { - - background:#a47a6b url('img/caffe_reply.png') repeat center; + + background:#a47a6b url('img/caffe_reply.png') repeat center; border: solid 1px #a47a6b; padding: 0; margin: 0; @@ -294,10 +294,15 @@ form table tr th { } div.post.reply { - background:#922a01 url('img/caffe_reply2.png') repeat fixed center; + background:#922a01 url('img/caffe_reply2.png') repeat fixed center; color: #8e6152; border: 1px solid rgba(88, 53, 41, 0.6); border-radius: 5px 5px 5px 5px; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.title,h1 { color: #8e6152; @@ -343,7 +348,7 @@ background: rgba(88, 53, 41, 0.3); } #quick-reply table { border-collapse: collapse; -background:#000 url('img/caffe_reply2.png') repeat fixed center; +background:#000 url('img/caffe_reply2.png') repeat fixed center; border-style: solid; border-width: 1px; border-color: rgba(88, 53, 41, 0.6); @@ -364,7 +369,7 @@ color: #755144; } #quick-reply table { border-collapse: collapse; -background:#000 url('img/caffe_reply2.png') repeat fixed center; +background:#000 url('img/caffe_reply2.png') repeat fixed center; } a, a:visited { text-decoration: underline; diff --git a/stylesheets/confraria.css b/stylesheets/confraria.css index 3b60aaa6..5ff32ebe 100644 --- a/stylesheets/confraria.css +++ b/stylesheets/confraria.css @@ -71,6 +71,11 @@ p.fileinfo span.unimportant, p.fileinfo a { div.post.reply { background: #282A2E; border: 1px solid #282A2E; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } diff --git a/stylesheets/dark.css b/stylesheets/dark.css index e21b264e..89b485bf 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -45,15 +45,21 @@ a.post_no:hover { div.post.reply { background: #333333; border: #555555 1px solid; - -webkit-border-radius: 10px; - -khtml-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; + border-radius: 10px; + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply.highlighted { background: #555; border: transparent 1px solid; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply div.body a:link, div.post.reply div.body a:visited { color: #CCCCCC; diff --git a/stylesheets/dark_roach.css b/stylesheets/dark_roach.css index 89e050d4..9b155e8c 100644 --- a/stylesheets/dark_roach.css +++ b/stylesheets/dark_roach.css @@ -220,6 +220,10 @@ div.post.reply { border-style: none solid solid none; border-color: #333333; display: inline-block; + + @media (max-width: 48em) { + border-right-style: none; + } } span.trip { color: #CC0000; @@ -465,7 +469,7 @@ background: #333333; border: 1px solid #666666; color: #999999; } -input[type="submit"]:hover +input[type="submit"]:hover { color: #9999CC; } diff --git a/stylesheets/favela.css b/stylesheets/favela.css index 52d24c76..8770d80f 100644 --- a/stylesheets/favela.css +++ b/stylesheets/favela.css @@ -67,6 +67,10 @@ div.post.reply.post-hover { border-width: 1px; border-style: none solid solid none; border-color: #B7C5D9; + + @media (max-width: 48em) { + border-right-style: none; + } } div.post.reply div.body a { diff --git a/stylesheets/ferus.css b/stylesheets/ferus.css index 2517d3b0..f6f0421d 100644 --- a/stylesheets/ferus.css +++ b/stylesheets/ferus.css @@ -37,6 +37,11 @@ a.post_no:hover { div.post.reply { background: #0E0E0E; border: #414141 2px solid !important; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } .de-pview { background: rgba(14, 14, 14, 0.84) !important; @@ -44,6 +49,11 @@ div.post.reply { div.post.reply.highlighted { background: transparent; border: #414141 2px solid; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply div.body a:link, div.post.reply div.body a:visited { color: #646464; diff --git a/stylesheets/futaba-light.css b/stylesheets/futaba-light.css index 19166adf..04cb4163 100644 --- a/stylesheets/futaba-light.css +++ b/stylesheets/futaba-light.css @@ -34,6 +34,11 @@ div.post.reply { border: 0px; background: #FAE8D4; border: 1px solid #E2C5B1; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply.highlighted { background: #f0c0b0; @@ -62,7 +67,7 @@ div.pages { padding: 7px 5px; color: maroon; font-size: 12pt; - + background: none; border-width: 1px; border-style: inset; diff --git a/stylesheets/gentoochan.css b/stylesheets/gentoochan.css index ae7ef2f3..b2b541e9 100644 --- a/stylesheets/gentoochan.css +++ b/stylesheets/gentoochan.css @@ -22,7 +22,20 @@ div.post.reply, input, textarea { background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 2px; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } + +@media (max-width: 48em) { + div.post.reply { + border-left-style: none; + border-right-style: none; + } +} + div.post.reply.post-hover { background: rgba(200, 200, 200, 0.85); } diff --git a/stylesheets/jungle.css b/stylesheets/jungle.css index 86cb13b8..1c9e4dc6 100644 --- a/stylesheets/jungle.css +++ b/stylesheets/jungle.css @@ -27,7 +27,7 @@ desktop-style .bl-menu{ background-image: url('img/jungle_bg1.png'), url('img/jungle_bg.png'); background-repeat: repeat-x, repeat; background-attachment: scroll, scroll; -} +} .boardlist .board a { background: #65AB6B; @@ -49,6 +49,10 @@ border-radius: 5px; -moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.35); -o-box-shadow: 0px 2px 3px rgba(0,0,0,0.35); box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35); + + @media (max-width: 48em) { + border-right-style: none; + } } div.post.reply.highlighted { background-image: url('img/jungle_td2.png'); @@ -62,6 +66,10 @@ border-radius: 5px; -moz-box-shadow: 0px 2px 3px rgba(0,0,0,0.35); -o-box-shadow: 0px 2px 3px rgba(0,0,0,0.35); box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35); + + @media (max-width: 48em) { + border-right-style: none; + } } div.post.reply div.body a { color: #00E; @@ -88,7 +96,7 @@ div.pages { padding: 7px 5px; color: #054500; font-size: 12pt; - + background-image: url('img/jungle_td.png'); border-width: 1px; border-style: inset; diff --git a/stylesheets/nigrachan.css b/stylesheets/nigrachan.css index 28ab3eb3..dee74bf7 100644 --- a/stylesheets/nigrachan.css +++ b/stylesheets/nigrachan.css @@ -73,6 +73,10 @@ div.post.reply.post-hover { border-width: 1px; border-style: none solid solid none; border-color: #101010; + + @media (max-width: 48em) { + border-right-style: none; + } } div.post.reply div.body a { diff --git a/stylesheets/northboard_cb.css b/stylesheets/northboard_cb.css index b665c569..e1eedaf6 100644 --- a/stylesheets/northboard_cb.css +++ b/stylesheets/northboard_cb.css @@ -28,14 +28,22 @@ div.post.reply { background: #343439; border-color: #3070A9; border-top: 1px solid #3070A9; - border-left: 1px solid #3070A9; border-radius: 3px; padding: 0px; + + @media (min-width: 48em) { + border-left: 1px solid #3070A9; + } } div.post.reply.highlighted { background: #44444f; border: 3px dashed #3070a9; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply div.body a, .mentioned { @@ -220,30 +228,30 @@ span.heading { right: 1em !important; position: absolute !important; } - + #expand-all-images{ margin-top: 4em !important; } - + #treeview{ margin-top: 5em !important; } - + #shrink-all-images{ margin-top: 6em !important; } - + #expand-all-images + hr, #shrink-all-images + hr{ opacity: 0 !important; margin: 0 !important; } - + #treeview + hr{ opacity: 0 !important; clear: both !important; } - + #options_handler{ margin-top: 3em !important; } diff --git a/stylesheets/notsuba.css b/stylesheets/notsuba.css index 8ecb6b21..d4e89872 100644 --- a/stylesheets/notsuba.css +++ b/stylesheets/notsuba.css @@ -61,6 +61,11 @@ background: #dcae9b; div.post.reply { background: #e9d1be; border-color: #dcae9b; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.ban { diff --git a/stylesheets/novo_jungle.css b/stylesheets/novo_jungle.css index 8c313723..83bd99cd 100644 --- a/stylesheets/novo_jungle.css +++ b/stylesheets/novo_jungle.css @@ -84,12 +84,20 @@ div.post.reply { box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.35); background-image: url('img/jungle_td.png'); color: #054500; + + @media (max-width: 48em) { + border-right-style: none; + } } div.post.reply.post-hover { border-width: 1px; border-style: none solid solid none; border-color: #B7C5D9; + + @media (max-width: 48em) { + border-right-style: none; + } } div.post.reply div.body a { diff --git a/stylesheets/photon.css b/stylesheets/photon.css index a487e4dd..d2e0c1a7 100644 --- a/stylesheets/photon.css +++ b/stylesheets/photon.css @@ -285,6 +285,11 @@ div.post.reply { background: none repeat scroll 0 0 #DDDDDD; border: 1px solid #CCCCCC; border-radius: 5px 5px 5px 5px; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.title,h1 { color: #FF6600; diff --git a/stylesheets/piwnichan.css b/stylesheets/piwnichan.css index 7780226e..088ffa5a 100644 --- a/stylesheets/piwnichan.css +++ b/stylesheets/piwnichan.css @@ -11,7 +11,7 @@ body { .desktop-style .bl-menu{ background-color: #030511; -} +} .boardlist .board a { background-color: #030511; @@ -28,7 +28,7 @@ color: #FFFCFC !important;} div.post.reply div.body a { color: #6F0A0A; } - + a:link, a:visited, div.post.reply p.body a { color: #355097; text-decoration: none; @@ -36,9 +36,9 @@ a:link, a:visited, div.post.reply p.body a { a:link:hover, a:visited:hover, div.post.reply p.body a:hover { color: #5A8C99; } - + a.email span.name { - color: #5A8C99 !important; + color: #5A8C99 !important; } .intro span.capcode, p.intro a.capcode, p.intro a.nametag { @@ -48,14 +48,14 @@ color: #6E0877; div.post.reply.highlighted { background: #000E3A; } - + input, textarea { background: url("img/rect821.png") no-repeat fixed right top #030511; color: #47506F; - + } - + hr { height:3px; border-width: 0px; @@ -63,7 +63,7 @@ hr { background-size:100% 100%; -moz-background-size:100% 100%; } - + .reflink a:hover{ font-weight: bold; } @@ -96,7 +96,7 @@ div.banner, .replymode, .catalogmode { font-weight: bold; text-align: center !important; } - + .postarea { } .rules { @@ -122,7 +122,7 @@ div.banner, .replymode, .catalogmode { .delbuttons { text-align:center; padding-bottom:4px; - + } .managehead { background-color: #1e1e1e; @@ -156,13 +156,13 @@ div.banner, .replymode, .catalogmode { color: #bebebe; font-weight:800; } - + .intro span.subject { color: #4D2C80; font-weight: bold; } - - + + span.name, .postername { color: #06546D !important; font-weight:bold; @@ -179,16 +179,21 @@ span.omitted, .omittedposts { } div.post.reply { padding: 5px; - + background:#030511 url('img/rect821.png') fixed top right no-repeat; color:#47506F; border: 1px solid #000E3A!important; - - + + -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } .replyhl { background-color: #1e1e1e; diff --git a/stylesheets/rugby.css b/stylesheets/rugby.css index 330c44ef..aaa707e4 100644 --- a/stylesheets/rugby.css +++ b/stylesheets/rugby.css @@ -29,6 +29,11 @@ border-bottom: 1px solid #e9af32; div.post.reply, div.pages { border-radius: 20px 20px; border: 1px solid #e9af32; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } form table tr th { diff --git a/stylesheets/sharp.css b/stylesheets/sharp.css index 7027a51b..93e21070 100644 --- a/stylesheets/sharp.css +++ b/stylesheets/sharp.css @@ -94,7 +94,7 @@ form table tr th { form table tr th { background: #AF0A0F; color: #FFF; - border: 1px solid #800000; + border: 1px solid #800000; } form table tr td div { text-align: center; @@ -213,6 +213,10 @@ div.post.reply { border-style: none solid solid none; border-color: #DCDCDC; display: inline-block; + + @media (max-width: 48em) { + border-right-style: none; + } } span.trip { color: #228854; @@ -393,7 +397,7 @@ div.blotter { } .desktop-style div.boardlist:nth-child(1) { - + } .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { diff --git a/stylesheets/style.css b/stylesheets/style.css index 131e00f4..80dc69e0 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -6,6 +6,11 @@ body { margin: 0 4px; padding-left: 4px; padding-right: 4px; + + @media (max-width: 48em) { + margin: 0px; + padding: 0px; + } } .hidden { @@ -105,7 +110,8 @@ input[type="text"],input[type="password"],textarea { } textarea { - width: 100%; + box-sizing: border-box; + width: 100%; } form table tr td { @@ -146,9 +152,23 @@ form table tr td div label { font-size: 10px; } +.files.multifile { + display: flex; + flex-wrap: wrap; +} + +.files.multifile span { + display: block; +} + +@media (max-width: 48em) { + .files span { + display: block; + } +} + .file { float: left; - margin-right: 2px; } .file:not(.multifile) .post-image { @@ -161,11 +181,7 @@ form table tr td div label { p.fileinfo { display: block; - margin: 0 0 0 20px; -} - -div.post p.fileinfo { - padding-left: 5px; + margin: 0.2em 0px; } div.banner { @@ -193,8 +209,6 @@ img.banner,img.board_image { .post-image { display: block; - float: left; - margin: 5px 20px 10px 20px; border: none; } @@ -203,7 +217,7 @@ img.banner,img.board_image { } div.post .post-image { - padding: 5px; + padding: 0.2em; margin: 0 20px 0 0; } @@ -218,24 +232,36 @@ div.post i.fa { font-size: 16px; } -div.post.op { - margin-right: 20px; - margin-bottom: 5px; -} - div.post.op hr { border-color: #D9BFB7; } .intro { - margin: 0.5em 0; - padding: 0; - padding-bottom: 0.2em; + padding: 0px; + line-height: 1.3em; +} + +.intro span { + min-width: 0.3em; + display: inline-block; +} + +.post-details { + text-wrap: nowrap; + + @media (max-width: 48em) { + float: right; + } } input.delete { float: left; - margin: 1px 6px 0 0; + margin: 1px 6px 0px 0px; + scale: 1.05; +} + +.intro * *, .poster_id { + margin-right: 0.3em; } .intro span.subject { @@ -248,28 +274,79 @@ input.delete { font-weight: bold; } -.intro span.capcode,p.intro a.capcode,p.intro a.nametag { +.post-details span.capcode,p.intro a.capcode,p.intro a.nametag { color: #F00000; margin-left: 0; } -.intro a { - margin-left: 8px; +@media (max-width: 48em) { + .user-controls { + clear: both; + float: right; + } +} + +.user-controls { + margin-left: 0.3em; +} + +.post-details a { + margin-left: 5px; } div.delete { float: right; } -div.post.reply p { - margin: 0.3em 0 0 0; +.required-star { + color: maroon; } -div.post.reply div.body { - margin-left: 1.8em; +div.post { + margin: 0.2em 4px; + padding: 0.5em 0.3em; + display: inline-block; + max-width: 94%; + overflow-wrap: break-word; + + @media (max-width: 48em) { + box-sizing: border-box; + margin: 0px; + + width: 100%; + max-width: 100%; + } +} + +div.post div.head { + margin: 0.1em 1em 0.1em 1.4em; + clear: both; + line-height: 1.3em; +} + +div.post > p { + margin: 0.1em 0.4em; + + font-size: 13px; + min-height: 1.16em; + + @media (max-width: 48em) { + margin-right: 1.4em; + } +} + +div.post.op > p { + clear: both; + padding-top: 1em; +} + +div.post div.body { margin-top: 0.8em; + margin-left: 1.4em; padding-right: 3em; padding-bottom: 0.3em; + + word-wrap: break-word; } div.post.reply.highlighted { @@ -280,24 +357,19 @@ div.post.reply div.body a { color: #D00; } -div.post { - padding-left: 20px; -} - -div.post div.body { - word-wrap: break-word; - white-space: pre-wrap; +div.post.op { + padding-top: 0px; } div.post.reply { background: #D6DAF0; - margin: 0.2em 4px; - padding: 0.2em 0.3em 0.5em 0.6em; border-width: 1px; border-style: none solid solid none; border-color: #B7C5D9; - display: inline-block; - max-width: 94%!important; + + @media (max-width: 48em) { + border-right-style: none; + } } span.trip { @@ -311,6 +383,7 @@ span.quote { span.omitted { display: block; margin-top: 1em; + margin-left: 0.4em; } br.clear { @@ -319,19 +392,14 @@ br.clear { } span.controls { - float: right; margin: 0; padding: 0; - font-size: 80%; -} - -span.controls.op { - float: none; - margin-left: 10px; } span.controls a { margin: 0; + text-wrap: nowrap; + display: inline-block; } div#wrap { @@ -831,18 +899,32 @@ pre { margin-top: 20px; background: inherit; visibility: visible; + + @media (max-width: 48em) { + display: block; + width: 100%; + height: 100%; + margin: auto; + } } #options_div { - width: 620px; - height: 400px; resize: both; overflow: auto; border: 1px solid; + + @media (min-width: 48em) { + width: 620px; + height: 400px; + } } #alert_div { - width: 500px; + max-width: 620px; + + @media (min-width: 48em) { + width: 500px; + } } #alert_message { @@ -912,21 +994,12 @@ pre { margin-bottom: 5px; } -.mobile-style #options_div, .mobile-style #alert_div { - display: block; - width: 100%; - height: 100%; - max-width: 620px; - margin: auto; -} - .mentioned { word-wrap: break-word; } .poster_id { cursor: pointer; - display: inline-block; user-select: none; } @@ -952,7 +1025,7 @@ span.pln { color: grey; } -@media screen and (min-width: 768px) { +@media screen and (min-width: 48em) { .intro { clear: none; } @@ -1072,6 +1145,103 @@ div.boardlist a { width: 50px; } +div.video-container { + display: block; + min-width: unset !important; + align-items: center; + max-width: 15%; +} + +@media only screen and (max-width: 48em) { + /* wired-7 style_m.css plus edit by perdedora */ + hr { + margin: 1em 0; + } + div.post.reply { + padding: 0.5em 0px 0.5em 0.5em; + margin: 0px; + box-sizing: border-box; + margin: 0px; + } + .post-btn { + margin: 0 2px 0 2px; + } + .post-image{ + max-width: 150px; + max-height: 150px; + object-fit: cover; + border-radius: 4px; + } + div.post:not(.op) div.body{ + clear:none; + } + + div.post .files { + float: left; + flex-flow: row wrap; + align-content: space-between; + margin-right: 10px; + margin-top: 2px; + } + + div.thread.files { + display: flex; + flex-flow: row wrap; + float: left; + } + div.file.multifile { + min-width: unset !important; + width: unset !important; + } + + div.post .file { + width: initial !important; + min-width: 100px; + } + + .full-image { + max-width: 100%; + } + div.video-container { + max-width: unset !important; + } + .intro time, + .name, + .own_post, + .poster_id, + i fa, + .post_no, + .capcode { + font-size: 1em; + } + .intro a:not(#reply-button) { + margin-left: unset !important; + } + .post-btn, + .hide-thread-link { + margin-right: 2px !important; + } + .show-image-link, + .hide-image-link { + font-size: 16px; + margin: 0 4px !important; + } +} + +p.fileinfo .unimportant { + @media (max-width: 48em) { + display: none; + } +} + +p.fileinfo span + span { + margin-right: 0.3em; +} + +.image_id a + a { + margin-left: 0.3em; +} + /* File selector */ .dropzone { color: #000; diff --git a/stylesheets/szalet.css b/stylesheets/szalet.css index 77a216a6..5bc1aa73 100644 --- a/stylesheets/szalet.css +++ b/stylesheets/szalet.css @@ -4,7 +4,7 @@ body { font-family: sans-serif; font-size: 12px; color: #99938D; - + background-color: #1e1e1e; background-image: url('img/szalet_bg.png'); background-repeat: repeat; @@ -14,7 +14,7 @@ body { background-image: url('img/szalet_bg.png'); background-repeat: repeat; /*background-color: #200000;*/ -} +} .boardlist .board a { background-color: #200000; @@ -27,7 +27,7 @@ color: #26899C; div.pages a.selected { color: #FFFCFC !important;} - + a:link, a:visited, div.post.reply p.body a { color: #7A422C!important; text-decoration: none; @@ -35,12 +35,12 @@ a:link, a:visited, div.post.reply p.body a { a:link:hover, a:visited:hover, div.post.reply p.body a:hover { color: #8A8A23!important; } - + a.email span.name { color: #4B4B4B !important; - + } - + input { color: #8A7656; background: none !important; @@ -52,7 +52,7 @@ input, textarea { background: #200000; color: #99938D; } - + hr { height: 3px; border-width: 0px; @@ -60,7 +60,7 @@ background: url('img/szalet_hr.png') center no-repeat; background-size: 100% 100%; overflow: hidden; } - + .reflink a:hover{ font-weight: bold; } @@ -93,7 +93,7 @@ div.banner, .replymode, .catalogmode { font-weight: bold; text-align: center !important; } - + .postarea { } .rules { @@ -119,7 +119,7 @@ div.banner, .replymode, .catalogmode { .delbuttons { text-align:center; padding-bottom:4px; - + } .managehead { background-color: #1e1e1e; @@ -153,13 +153,13 @@ div.banner, .replymode, .catalogmode { color: #bebebe; font-weight:800; } - + .intro span.subject { color: #771018; font-weight: bold; } - - + + span.name, .postername { color: #8A775B !important; font-weight:bold; @@ -178,11 +178,16 @@ div.post.reply { padding: 5px; border: 1px #583E28 solid !important; background: #200000; - + -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply.highlighted { background: #583E28; diff --git a/stylesheets/terminal2.css b/stylesheets/terminal2.css index a951bc16..0effd591 100644 --- a/stylesheets/terminal2.css +++ b/stylesheets/terminal2.css @@ -38,11 +38,21 @@ div.post.reply { background: #000000; border: 1px dashed; border-color:#00FF00; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply.highlighted { background: transparent; border: transparent 1px dashed; border-color:#00FF00; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply div.body a:link, div.post.reply div.body a:visited { color: #00FF00; @@ -167,4 +177,3 @@ table.modlog tr th { .desktop-style .sub { background: none; } - diff --git a/stylesheets/testorange.css b/stylesheets/testorange.css index 44ebd697..ff6c1c7d 100644 --- a/stylesheets/testorange.css +++ b/stylesheets/testorange.css @@ -4,7 +4,7 @@ body { font-family: sans-serif; font-size: 12px; color:#bebebe; - + background-color: #1e1e1e; background-image: url('img/testorange_testo.png'), url('img/testorange_top_bg.png'), url('img/testorange_bg.png'); background-repeat: no-repeat, repeat-x, repeat; @@ -15,7 +15,7 @@ body { .desktop-style .bl-menu{ background-image: url('img/testorange_bg.png'); background-repeat: repeat; -} +} .boardlist .board a { background-image: url('img/testorange_bg.png'); @@ -174,6 +174,11 @@ div.post.reply { -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } .replyhl { background-color: #1e1e1e; diff --git a/stylesheets/uboachan-gray.css b/stylesheets/uboachan-gray.css index c5867f14..bd2690e7 100644 --- a/stylesheets/uboachan-gray.css +++ b/stylesheets/uboachan-gray.css @@ -15,6 +15,11 @@ div.post.reply { background: #383838; border: 1px solid #000000; transition: 0.3s; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply.highlighted { /*background: #202020;*/ @@ -23,6 +28,11 @@ div.post.reply.highlighted { background: #282828; /*border: none;*/ transition: 0.3s; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } /*Changed this*/ div.post.reply div.body a { diff --git a/stylesheets/wasabi.css b/stylesheets/wasabi.css index 87a81bdd..145b4ae6 100644 --- a/stylesheets/wasabi.css +++ b/stylesheets/wasabi.css @@ -212,6 +212,10 @@ div.post.reply { border-style: none solid solid none; border-color: lightgreen; display: inline-block; + + @media (max-width: 48em) { + border-right-style: none; + } } span.trip { color: #228854; @@ -393,7 +397,7 @@ div.blotter { } .desktop-style div.boardlist:nth-child(1) { - + } diff --git a/templates/post/fileinfo.html b/templates/post/fileinfo.html index 105174b5..7d418807 100644 --- a/templates/post/fileinfo.html +++ b/templates/post/fileinfo.html @@ -1,16 +1,16 @@ {% if post.embed %} {{ post.embed }} {% else %} -
+
{% for file in post.files %}
{% if file.file == 'deleted' %} {% else %} -

File: {{ file.file }} +

File: {{ file.file }} ( {% if file.thumb == 'spoiler' %} - {% trans %}Spoiler Image{% endtrans %}, + {% trans %}Spoiler Image{% endtrans %}, {% endif %} {{ file.size|filesize }} {% if file.width and file.height %} @@ -20,19 +20,20 @@ {% endif %} {% endif %} {% if config.show_filename and file.filename %} - , - {% if file.filename|length > config.max_filename_display %} + , {% if file.filename|length > config.max_filename_display %} {{ file.filename|truncate_filename(config.max_filename_display)|e|bidi_cleanup }} {% else %} {{ file.filename|e|bidi_cleanup }} {% endif %} {% endif %} ) + {% include "post/image_identification.html" %} - {% include "post/file_controls.html" %}

+ {% include "post/file_controls.html" %} +

{% include "post/image.html" with {'post':file} %} {% endif %}
- {% endfor %} + {% endfor %}
- {% endif %} + {% endif %} diff --git a/templates/post/image_identification.html b/templates/post/image_identification.html index 4fd45e24..4fc9d487 100644 --- a/templates/post/image_identification.html +++ b/templates/post/image_identification.html @@ -16,4 +16,4 @@ Yandex {% endif %} -{% endif %} \ No newline at end of file +{% endif %} diff --git a/templates/post/ip.html b/templates/post/ip.html index 12782e97..d3af1b71 100644 --- a/templates/post/ip.html +++ b/templates/post/ip.html @@ -1,3 +1,3 @@ -{% if post.mod and post.mod|hasPermission(config.mod.show_ip, board.uri) %} - [{{ post.ip|cloak_ip }}] +{% if post.mod and post.mod|hasPermission(config.mod.show_ip, board.uri) %} + [{{ post.ip|cloak_ip }}] {% endif %} diff --git a/templates/post/post_controls.html b/templates/post/post_controls.html index 60dc6fc4..aa9e17df 100644 --- a/templates/post/post_controls.html +++ b/templates/post/post_controls.html @@ -1,6 +1,6 @@ {% if mod %} - +
{% if mod|hasPermission(config.mod.delete, board.uri) %} {{ secure_link_confirm(config.mod.link_delete, 'Delete'|trans, 'Are you sure you want to delete this?'|trans, board.dir ~ 'delete/' ~ post.id) }}  {% endif %} @@ -58,6 +58,6 @@ {% if mod|hasPermission(config.mod.editpost, board.uri) %} {{ config.mod.link_editpost }}  {% endif %} - +
{% endif %} diff --git a/templates/post/poster_id.html b/templates/post/poster_id.html index 51f0624f..e98187fa 100644 --- a/templates/post/poster_id.html +++ b/templates/post/poster_id.html @@ -1,7 +1,7 @@ {% if config.poster_ids %} {% if post.thread %} - {{ post.ip|poster_id(post.thread) }} + {{ post.ip|poster_id(post.thread) }} {% else %} - {{ post.ip|poster_id(post.id) }} + {{ post.ip|poster_id(post.id) }} {% endif %} {% endif %} diff --git a/templates/post/time.html b/templates/post/time.html index bbdcba61..4923582a 100644 --- a/templates/post/time.html +++ b/templates/post/time.html @@ -1 +1 @@ - + diff --git a/templates/post_reply.html b/templates/post_reply.html index 14eb497b..9e1bcc4b 100644 --- a/templates/post_reply.html +++ b/templates/post_reply.html @@ -1,26 +1,27 @@ {% apply spaceless %} {# tabs and new lines will be ignored #} -
-

- {% endapply %} - {% if not index %}{% endif %} - - - {% apply spaceless %} - {% include 'post/poster_id.html' %}  - No. - {{ post.id }} +

+

+ + +

- {% endapply %} - {% include 'post/fileinfo.html' %} - {% include 'post/post_controls.html' %} - {% apply spaceless %} +
+ {% include 'post/post_controls.html' %} + {% include 'post/fileinfo.html' %} +
1 %}style="clear:both"{% endif %}> {% endapply %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% apply spaceless %} {% if post.modifiers['ban message'] %} diff --git a/templates/post_thread.html b/templates/post_thread.html index 719fa3b9..fe9e41d1 100644 --- a/templates/post_thread.html +++ b/templates/post_thread.html @@ -4,62 +4,68 @@
{% if not index %}{% endif %} -{% endapply %} -{% include 'post/fileinfo.html' %} -
1%}style='clear:both'{%endif%}>

- - - {% apply spaceless %} - {% include 'post/poster_id.html' %}  - No. - {{ post.id }} - {% if post.sticky %} - {% if config.font_awesome %} - - {% else %} - Sticky +

1%}style='clear:both'{%endif%}> +
+ {% include 'post/fileinfo.html' %} +
+

+ + + {% if post.sticky %} + {% if config.font_awesome %} + + {% else %} + Sticky + {% endif %} {% endif %} - {% endif %} - {% if post.locked %} - {% if config.font_awesome %} - - {% else %} - Locked + {% if post.locked %} + {% if config.font_awesome %} + + {% else %} + Locked + {% endif %} {% endif %} - {% endif %} - {% if post.sage and (config.mod.view_bumplock < 0 or (post.mod and post.mod|hasPermission(config.mod.view_bumplock, board.uri))) %} - {% if config.font_awesome %} - - {% else %} - Bumplocked + {% if post.sage and (config.mod.view_bumplock < 0 or (post.mod and post.mod|hasPermission(config.mod.view_bumplock, board.uri))) %} + {% if config.font_awesome %} + + {% else %} + Bumplocked + {% endif %} {% endif %} - {% endif %} - {% if post.cycle %} - {% if config.font_awesome %} - - {% else %} - Cyclical + {% if post.cycle %} + {% if config.font_awesome %} + + {% else %} + Cyclical + {% endif %} {% endif %} - {% endif %} - {% if index %} - [{% trans %}Reply{% endtrans %}] - {% endif %} - {% if isnoko50 %} - [{% trans %}View All{% endtrans %}] - {% endif %} - {% if hasnoko50 and not isnoko50 %} - {% set lastcount = config.noko50_count %} - [{% trans %}Last 1 Post{% plural lastcount %}Last {{ count }} Posts{% endtrans %}] - {% endif %} - {% include 'post/post_controls.html' %} +

+
+ {% include 'post/post_controls.html' %} +
{% endapply %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% apply spaceless %} {% if post.modifiers['ban message'] %} @@ -84,15 +90,16 @@ {% plural post.omitted_images %} {{ count }} image replies {% endtrans %} - {% endif %} {% trans %}omitted. Click reply to view.{% endtrans %} + {% endif %} {% trans %}omitted.{% endtrans %} {% endif %} {% if not index %} {% endif %} -
{% endapply %} +

{% set hr = post.hr %} {% for post in post.posts %} {% include 'post_reply.html' %} {% endfor %}
{% if hr %}
{% endif %}
+{% endapply %}