1
0
mirror of https://github.com/vichan-devel/vichan.git synced 2025-01-22 11:23:45 +01:00

Merge pull request #870 from Zankaria/mobile-ui

Mobile UI port
This commit is contained in:
Lorenzo Yario 2025-01-19 17:26:41 -06:00 committed by GitHub
commit 6de89d9514
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
44 changed files with 881 additions and 506 deletions

View File

@ -1254,7 +1254,7 @@
$config['embedding'] = [
[
'/^https?:\/\/(\w+\.)?youtube\.com\/watch\?v=([a-zA-Z0-9\-_]{10,11})?$/i',
'<iframe style="float: left; margin: 10px 20px;" width="%%tb_width%%" height="%%tb_height%%" frameborder="0" id="ytplayer" src="https://www.youtube.com/embed/$2"></iframe>'
'<iframe style="float: left; padding: 0.6em 0.2em 0.2em 0.2em;" width="%%tb_width%%" height="%%tb_height%%" frameborder="0" id="ytplayer" src="https://www.youtube.com/embed/$2"></iframe>'
],
[
'/^https?:\/\/(\w+\.)?vimeo\.com\/(\d{2,10})(\?.+)?$/i',

View File

@ -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,

View File

@ -20,7 +20,7 @@ $(document).ready(function() {
let doExpand = function() {
$(this)
.html($(this).text().replace(_("Click reply to view."), '<a href="javascript:void(0)">' + _("Click to expand") + '</a>.'))
.html($(this).text().concat(' <a href="javascript:void(0)">' + _('Click to expand') + '</a>.'))
.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('<br class="expanded">');
} else {
$(this).addClass('expanded').insertAfter(thread.find('div.post:first')).after('<br class="expanded">');
let opBr = thread.find('div.post').first().next();
$(this).addClass('expanded').insertAfter(opBr).after('<br class="expanded">');
}
lastExpanded = $(this);
$(document).trigger('new_post', this);

View File

@ -16,7 +16,7 @@
$(document).ready(function(){
$('<style type="text/css"> img.hidden{ opacity: 0.1; background: grey; border: 1px solid #000; } </style>').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 = $('<span>'+_('File')+' <small>(<a class="hide-image-link" href="javascript:void(0)">'+_('hide')+'</a>)</small>: </span>');
var replacement = $('<span><a class="hide-image-link"><i class="fa fa-eye-slash"></i></a></span>');
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 = $('<a class="show-image-link" href="javascript:void(0)">'+_('show')+'</a>').click(function() {
var show_link = $('<a class="show-image-link"><i class="fa fa-eye" title="'+_('show')+'"</i></a>').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();
};

View File

@ -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";
}

View File

@ -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();

View File

@ -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);
});
});
}

View File

@ -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';

View File

@ -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 = $('<form class="post-actions" method="post" style="margin:10px 0 0 0">' +
'<div style="text-align:right">' +
(!thread ? '<hr>' : '') +
'<div style="text-align:right"><hr>' +
'<input type="hidden" name="delete_' + id + '">' +
'<label for="password_' + id + '">'+_("Password")+'</label>: ' +
'<label for="password_' + id + '">' + _("Password")+'</label>: ' +
'<input id="password_' + id + '" type="password" name="password" size="11" maxlength="18">' +
'<input title="'+_('Delete file only')+'" type="checkbox" name="file" id="delete_file_' + id + '">' +
'<input title="' + _('Delete file only') + '" type="checkbox" name="file" id="delete_file_' + id + '">' +
'<label for="delete_file_' + id + '">' + _('File') + '</label>' +
' <input type="submit" name="delete" value="' + _('Delete') + '">' +
@ -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 {

View File

@ -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 = $('<span class="mentioned unimportant"></span>').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 = $('<div class="mentioned unimportant"></div>').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 = $('<a class="mentioned-' + reply_id + '" onclick="highlightReply(\'' + reply_id + '\');" href="#' + reply_id + '">&gt;&gt;' +
reply_id + '</a>');
link.appendTo(mentioned)
let link = $('<a class="mentioned-' + replyId + '" onclick="highlightReply(\'' + replyId + '\');" href="#'
+ replyId + '">&gt;&gt;' + replyId + '</a>');
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);
}
});
});

View File

@ -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('<div id="thread_stats"></div>');
var el = $('#thread_stats');
el.prepend(_('Page')+' <span id="thread_stats_page">?</span>');
if (IDsupport){
el.prepend('<span id="thread_stats_uids">0</span> UIDs |&nbsp;');
}
el.prepend('<span id="thread_stats_images">0</span> '+_('images')+' |&nbsp;');
el.prepend('<span id="thread_stats_posts">0</span> '+_('replies')+' |&nbsp;');
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('<span class="posts_by_id"> ('+ ids[cur.text()] +')</span>');
replies.each(function(){
cur = $(this).find('>.intro >.poster_id');
cur.find('+.posts_by_id').remove();
cur.after('<span class="posts_by_id"> ('+ ids[cur.text()] +')</span>');
});
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('<div id="thread_stats"></div>');
let el = $('#thread_stats');
el.prepend(_('Page')+ ' <span id="thread_stats_page">?</span>');
if (idSupport) {
el.prepend('<span id="thread_stats_uids">0</span> UIDs |&nbsp;');
}
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('<span id="thread_stats_images">0</span> ' +_('images')+ ' |&nbsp;');
el.prepend('<span id="thread_stats_posts">0</span> ' +_('replies')+ ' |&nbsp;');
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('<span class="posts_by_id"> (' + ids[cur.text()] + ')</span>');
replies.each(function() {
cur = $(this).find('>.intro >.poster_id');
cur.find(' +.posts_by_id').remove();
cur.after('<span class="posts_by_id"> (' + ids[cur.text()] + ')</span>');
});
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('<style>.posts_by_id{display:none;}.poster_id:hover+.posts_by_id{display:initial}</style>');
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);
});
}

View File

@ -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(
$('<div id="watchlist">'+
'<div class="watchlist-controls">'+
'<span><a id="clearList">['+_('Clear List')+']</a></span>&nbsp'+
@ -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(' <span>[ <a class="watchlist-toggle" href="#">' + _('watchlist') + '</a> ]</span>');
// Append a watch thread button after every OP post number.
$('.op>.intro>.post_no:odd').after('<a class="watchThread" href="#">[' + _('Watch Thread') + ']</a>');
$('.boardlist').append('<div class="watchlist-container" style="float:right;"><a class="watchlist-toggle" href="#">[' + _('Watchlist') + ']</a></div>');
// Append a watch thread button in the user controls container.
$('div.post.op>.intro>.user-controls').append('<a class="watchThread" href="#">[' + _('Watch Thread') + ']</a>');
// Draw the watchlist, hidden.
watchlist.render();

View File

@ -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 {

View File

@ -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;

View File

@ -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;
}
}

View File

@ -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;

View File

@ -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;
}

View File

@ -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 {

View File

@ -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;

View File

@ -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;

View File

@ -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);
}

View File

@ -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;

View File

@ -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 {

View File

@ -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;
}

View File

@ -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 {

View File

@ -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 {

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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 {

View File

@ -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;

View File

@ -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;

View File

@ -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;
}

View File

@ -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;

View File

@ -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 {

View File

@ -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) {
}

View File

@ -1,16 +1,16 @@
{% if post.embed %}
{{ post.embed }}
{% else %}
<div class="files">
<div class="files {% if post.num_files > 1 %} multifile{% endif %}">
{% for file in post.files %}
<div class="file{% if post.num_files > 1 %} multifile" style="width:{{ file.thumbwidth + 40 }}px"{% else %}"{% endif %}>
{% if file.file == 'deleted' %}
<img class="post-image deleted" src="{{ config.root }}{{ config.image_deleted }}" alt="" />
{% else %}
<p class="fileinfo">File: <a href="{{ config.uri_img }}{{ file.file }}">{{ file.file }}</a> <span class="unimportant">
<p class="fileinfo"><span>File: <a href="{{ config.uri_img }}{{ file.file }}">{{ file.file }}</a></span><span class="unimportant">
(
{% 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 %}
<a href="{{ config.uri_img }}{{ file.file|e|bidi_cleanup }}" download="{{ file.filename|e|bidi_cleanup }}" title="Save as original filename: {{ file.filename|e|bidi_cleanup }}">{{ file.filename|truncate_filename(config.max_filename_display)|e|bidi_cleanup }}</a>
{% else %}
<a href="{{ config.uri_img }}{{ file.file|e|bidi_cleanup }}" download="{{ file.filename|e|bidi_cleanup }}" title="Save as original filename">{{ file.filename|e|bidi_cleanup }}</a>
{% endif %}
{% endif %}
)
</span>
{% include "post/image_identification.html" %}
{% include "post/file_controls.html" %}</span></p>
{% include "post/file_controls.html" %}
</p>
{% include "post/image.html" with {'post':file} %}
{% endif %}
</div>
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% endif %}

View File

@ -16,4 +16,4 @@
<a rel="noreferrer" href="https://yandex.com/images/search?url={{ config.domain }}{{ config.uri_img }}{{ file.file }}&rpt=imagelike" target="_blank">Yandex</a>
{% endif %}
</span>
{% endif %}
{% endif %}

View File

@ -1,3 +1,3 @@
{% if post.mod and post.mod|hasPermission(config.mod.show_ip, board.uri) %}
[<a class="ip-link" style="margin:0;" href="?/IP/{{ post.ip|cloak_ip }}">{{ post.ip|cloak_ip }}</a>]
{% if post.mod and post.mod|hasPermission(config.mod.show_ip, board.uri) %}
<span>[<a class="ip-link" style="margin:0;" href="?/IP/{{ post.ip|cloak_ip }}">{{ post.ip|cloak_ip }}</a>]</span>
{% endif %}

View File

@ -1,6 +1,6 @@
{% if mod %}
<span class="controls {% if not post.thread %}op{% endif %}">
<div class="controls {% if not post.thread %}op{% endif %}">
{% 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) }}&nbsp;
{% endif %}
@ -58,6 +58,6 @@
{% if mod|hasPermission(config.mod.editpost, board.uri) %}
<a title="{% trans %}Edit post{% endtrans %}" href="?/{{ board.dir }}edit{% if config.mod.raw_html_default %}_raw{% endif %}/{{ post.id }}">{{ config.mod.link_editpost }}</a>&nbsp;
{% endif %}
</span>
</div>
{% endif %}

View File

@ -1,7 +1,7 @@
{% if config.poster_ids %}
{% if post.thread %}
<span class="poster_id">{{ post.ip|poster_id(post.thread) }}</span>
<span class="poster_id">{{ post.ip|poster_id(post.thread) }}</span>
{% else %}
<span class="poster_id">{{ post.ip|poster_id(post.id) }}</span>
<span class="poster_id">{{ post.ip|poster_id(post.id) }}</span>
{% endif %}
{% endif %}

View File

@ -1 +1 @@
<time datetime="{{ post.time|date('Y-m-d\\TH:i:s\Z') }}" title="{{ post.time|date('Y-m-d\\TH:i:s\Z') }}">{{ post.time|date(config.post_date) }}</time>
<time datetime="{{ post.time|date('Y-m-d\\TH:i:s\Z') }}" title="{{ post.time|date('Y-m-d\\TH:i:s\Z') }}">{{ post.time|date(config.post_date) }}</time>

View File

@ -1,26 +1,27 @@
{% apply spaceless %}
{# tabs and new lines will be ignored #}
<div class="post reply" id="reply_{{ post.id }}">
<p class="intro">
{% endapply %}
{% if not index %}<a id="{{ post.id }}" class="post_anchor"></a>{% endif %}
<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
<label for="delete_{{ post.id }}">
{% include 'post/subject.html' %}
{% include 'post/name.html' %}
{% include 'post/ip.html' %}
{% include 'post/flag.html' %}
{% include 'post/time.html' %}
</label>
{% apply spaceless %}
{% include 'post/poster_id.html' %}&nbsp;
<a class="post_no" id="post_no_{{ post.id }}" title="Link to this post" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', '50') }}{% else %}{{ post.link }}{% endif %}">No.</a>
<a class="post_no" title="Reply to this post" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', '50') }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
<div class="post reply" id="reply_{{ post.id }}" data-board="{{ board.uri }}">
<p class="intro">
<label for="delete_{{ post.id }}">
{% if not index %}<a id="{{ post.id }}" class="post_anchor"></a>{% endif %}
<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
{% include 'post/subject.html' %}
{% include 'post/name.html' %}
{% include 'post/ip.html' %}
{% include 'post/flag.html' %}
{% include 'post/poster_id.html' %}
</label>
<label class="post-details">
{% include 'post/time.html' %}
<a class="post_no" id="post_no_{{ post.id }}" title="Link to this post" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', config.file_page50) }}{% else %}{{ post.link }}{% endif %}">No.</a>
<a class="post_no" title="Reply to this post" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', config.file_page50) }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
</label>
<label class="user-controls">{# Used by some js #}</label>
</p>
{% endapply %}
{% include 'post/fileinfo.html' %}
{% include 'post/post_controls.html' %}
{% apply spaceless %}
<div class="head">
{% include 'post/post_controls.html' %}
{% include 'post/fileinfo.html' %}
</div>
<div class="body" {% if post.files|length > 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'] %}

View File

@ -4,62 +4,68 @@
<div class="thread" id="thread_{{ post.id }}" data-board="{{ board.uri }}">
{% if not index %}<a id="{{ post.id }}" class="post_anchor"></a>{% endif %}
{% endapply %}
{% include 'post/fileinfo.html' %}
<div class="post op" id="op_{{ post.id }}" {%if post.num_files > 1%}style='clear:both'{%endif%}><p class="intro">
<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
<label for="delete_{{ post.id }}">
{% include 'post/subject.html' %}
{% include 'post/name.html' %}
{% include 'post/ip.html' %}
{% include 'post/flag.html' %}
{% include 'post/time.html' %}
</label>
{% apply spaceless %}
{% include 'post/poster_id.html' %}&nbsp;
<a class="post_no" id="post_no_{{ post.id }}" title="Link to this post" o onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', '50') }}{% else %}{{ post.link }}{% endif %}">No.</a>
<a class="post_no" title="Reply to this post" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', '50') }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
{% if post.sticky %}
{% if config.font_awesome %}
<i class="fa fa-thumb-tack" title="Sticky"></i>
{% else %}
<img class="icon" title="Sticky" src="{{ config.image_sticky }}" alt="Sticky" />
<div class="post op" id="op_{{ post.id }}" {%if post.num_files > 1%}style='clear:both'{%endif%}>
<div class="head">
{% include 'post/fileinfo.html' %}
</div>
<p class="intro">
<label for="delete_{{ post.id }}">
<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
{% include 'post/subject.html' %}
{% include 'post/name.html' %}
{% include 'post/ip.html' %}
{% include 'post/flag.html' %}
{% include 'post/poster_id.html' %}
</label>
<label class="post-details">
{% include 'post/time.html' %}
<a class="post_no" id="post_no_{{ post.id }}" title="Link to this post" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', '50') }}{% else %}{{ post.link }}{% endif %}">No.</a>
<a class="post_no" title="Reply to this post" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', '50') }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
</label>
{% if post.sticky %}
{% if config.font_awesome %}
<i class="fa fa-thumb-tack" title="Sticky"></i>
{% else %}
<img class="icon" title="Sticky" src="{{ config.image_sticky }}" alt="Sticky" />
{% endif %}
{% endif %}
{% endif %}
{% if post.locked %}
{% if config.font_awesome %}
<i class="fa fa-lock" title="Locked"></i>
{% else %}
<img class="icon" title="Locked" src="{{ config.image_locked }}" alt="Locked" />
{% if post.locked %}
{% if config.font_awesome %}
<i class="fa fa-lock" title="Locked"></i>
{% else %}
<img class="icon" title="Locked" src="{{ config.image_locked }}" alt="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 %}
<i class="fa fa-anchor" title="Bumplocked"></i>
{% else %}
<img class="icon" title="Bumplocked" src="{{ config.image_bumplocked }}" alt="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 %}
<i class="fa fa-anchor" title="Bumplocked"></i>
{% else %}
<img class="icon" title="Bumplocked" src="{{ config.image_bumplocked }}" alt="Bumplocked" />
{% endif %}
{% endif %}
{% endif %}
{% if post.cycle %}
{% if config.font_awesome %}
<i class="fa fa-refresh" title="Cyclical"></i>
{% else %}
<img class="icon" title="Cyclical" src="{{ config.image_cyclical }}" alt="Cyclical" />
{% if post.cycle %}
{% if config.font_awesome %}
<i class="fa fa-refresh" title="Cyclical"></i>
{% else %}
<img class="icon" title="Cyclical" src="{{ config.image_cyclical }}" alt="Cyclical" />
{% endif %}
{% endif %}
{% endif %}
{% if index %}
<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ link_for(post) }}">[{% trans %}Reply{% endtrans %}]</a>
{% endif %}
{% if isnoko50 %}
<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ link_for(post) }}">[{% trans %}View All{% endtrans %}]</a>
{% endif %}
{% if hasnoko50 and not isnoko50 %}
{% set lastcount = config.noko50_count %}
<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ link_for(post, true) }}">[{% trans %}Last 1 Post{% plural lastcount %}Last {{ count }} Posts{% endtrans %}]</a>
{% endif %}
{% include 'post/post_controls.html' %}
<label class="user-controls">
{% if index %}
<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ link_for(post) }}">[{% trans %}Reply{% endtrans %}]</a>
{% endif %}
{% if isnoko50 %}
<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ link_for(post) }}">[{% trans %}View All{% endtrans %}]</a>
{% endif %}
{% if hasnoko50 and not isnoko50 %}
{% set lastcount = config.noko50_count %}
<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ link_for(post, true) }}">[{% trans %}Last 1 Post{% plural lastcount %}Last {{ count }} Posts{% endtrans %}]</a>
{% endif %}
</label>
</p>
<div class="head">
{% include 'post/post_controls.html' %}
</div>
<div class="body">
{% 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 %}
</span>
{% endif %}
{% if not index %}
{% endif %}
</div>{% endapply %}
</div><br>
{% set hr = post.hr %}
{% for post in post.posts %}
{% include 'post_reply.html' %}
{% endfor %}
<br class="clear"/>{% if hr %}<hr/>{% endif %}
</div>
{% endapply %}