forked from leftypol/leftypol
Improve the mobile UX (#167)
Chunky PR Reviewed-on: https://git.leftypol.org/leftypol/leftypol/pulls/167 Co-authored-by: Zankaria <zankaria.auxa@skiff.com> Co-committed-by: Zankaria <zankaria.auxa@skiff.com>
This commit is contained in:
Zankaria
parent
31086b05d9
commit
f2ea90a2d0
28 changed files with 661 additions and 451 deletions
|
|
@ -224,7 +224,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({
|
||||
cache: !manualUpdate,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/* Depends on post-menu.js
|
||||
* Usage:
|
||||
* $config['additional_javascript'][] = 'js/jquery.min.js';
|
||||
* $config['additional_javascript'][] = 'js/post-menu.js';
|
||||
* $config['additional_javascript'][] = 'js/post-filter.js';
|
||||
*/
|
||||
|
|
@ -181,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) {
|
||||
|
|
@ -195,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();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -225,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('.thread').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();
|
||||
|
|
|
|||
212
js/post-hover.js
212
js/post-hover.js
|
|
@ -13,62 +13,117 @@
|
|||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
* 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) {
|
||||
$(document).ready(function () {
|
||||
var dont_fetch_again = [];
|
||||
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)');
|
||||
|
||||
query.addEventListener('change', (e) => isScreenSmall = e.matches);
|
||||
isScreenSmall = query.matches;
|
||||
}
|
||||
|
||||
let dont_fetch_again = [];
|
||||
init_hover = function() {
|
||||
var $link = $(this);
|
||||
let link = $(this);
|
||||
|
||||
var id;
|
||||
var matches;
|
||||
let id;
|
||||
let matches;
|
||||
|
||||
if ($link.is('[data-thread]')) {
|
||||
id = $link.attr('data-thread');
|
||||
}
|
||||
else if(matches = $link.text().match(/^>>(?:>\/([^\/]+)\/)?(\d+)$/)) {
|
||||
if (link.is('[data-thread]')) {
|
||||
id = link.attr('data-thread');
|
||||
} else if (matches = link.text().match(/^>>(?:>\/([^\/]+)\/)?(\d+)$/)) {
|
||||
id = matches[2];
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
var board = $(this);
|
||||
let board = $(this);
|
||||
while (board.data('board') === undefined) {
|
||||
board = board.parent();
|
||||
}
|
||||
var threadid;
|
||||
if ($link.is('[data-thread]')) threadid = 0;
|
||||
else threadid = board.attr('id').replace("thread_", "");
|
||||
let threadid;
|
||||
if (link.is('[data-thread]')) {
|
||||
threadid = 0;
|
||||
} else {
|
||||
threadid = board.attr('id').replace("thread_", "");
|
||||
}
|
||||
|
||||
board = board.data('board');
|
||||
|
||||
var parentboard = board;
|
||||
let parentboard = board;
|
||||
|
||||
if ($link.is('[data-thread]')) parentboard = $('form[name="post"] input[name="board"]').val();
|
||||
else if (matches[1] !== undefined) board = matches[1];
|
||||
if (link.is('[data-thread]')) {
|
||||
parentboard = $('form[name="post"] input[name="board"]').val();
|
||||
} else if (matches[1] !== undefined) {
|
||||
board = matches[1];
|
||||
}
|
||||
|
||||
var $post = false;
|
||||
var hovering = false;
|
||||
var hovered_at;
|
||||
$link.hover(function(e) {
|
||||
let post = false;
|
||||
let hovering = false;
|
||||
let hovered_at;
|
||||
|
||||
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 : hovered_at['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 : hovered_at['y'];
|
||||
if ((hovery - top) > 20){
|
||||
top = hovery;
|
||||
}
|
||||
|
||||
let previewX;
|
||||
if (isScreenSmall) {
|
||||
previewX = 0;
|
||||
} else {
|
||||
previewX = (pageX ? pageX : hovered_at['x']) + 1
|
||||
}
|
||||
|
||||
hoverPreview.css('left', previewX).css('top', top);
|
||||
};
|
||||
|
||||
link.hover(function(e) {
|
||||
hovering = true;
|
||||
hovered_at = {'x': e.pageX, 'y': e.pageY};
|
||||
|
||||
var start_hover = function($link) {
|
||||
if($.contains($post[0], $link[0])) {
|
||||
let start_hover = 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
|
||||
$post.addClass('highlighted');
|
||||
} 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 {
|
||||
var $newPost = $post.clone();
|
||||
$newPost.find('>.reply, >br').remove();
|
||||
//$newPost.find('span.mentioned').remove();
|
||||
$newPost.find('a.post_anchor').remove();
|
||||
// Creates the preview, and displays it,
|
||||
let hoverPreview = post.clone();
|
||||
hoverPreview.find('>.reply, >br').remove();
|
||||
hoverPreview.find('a.post_anchor').remove();
|
||||
|
||||
$newPost
|
||||
hoverPreview
|
||||
.attr('id', 'post-hover-' + id)
|
||||
.attr('data-board', board)
|
||||
.addClass('post-hover')
|
||||
|
|
@ -76,20 +131,29 @@ $(document).ready(function () {
|
|||
.css('display', 'inline-block')
|
||||
.css('position', 'absolute')
|
||||
.css('font-style', 'normal')
|
||||
.css('z-index', '100')
|
||||
.css('margin-left', '1em')
|
||||
.addClass('reply').addClass('post')
|
||||
.insertAfter($link.parent())
|
||||
.css('z-index', '100');
|
||||
|
||||
$link.trigger('mousemove');
|
||||
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) {
|
||||
post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id);
|
||||
if (post.length > 0) {
|
||||
start_hover($(this));
|
||||
} else {
|
||||
var url = $link.attr('href').replace(/#.*$/, '');
|
||||
let url = link.attr('href').replace(/#.*$/, '');
|
||||
|
||||
if ($.inArray(url, dont_fetch_again) != -1) {
|
||||
return;
|
||||
|
|
@ -104,67 +168,55 @@ $(document).ready(function () {
|
|||
|
||||
if (mythreadid == threadid && parentboard == board) {
|
||||
$(data).find('div.post.reply').each(function() {
|
||||
if($('[data-board="' + board + '"] #' + $(this).attr('id')).length == 0) {
|
||||
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) {
|
||||
} 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) {
|
||||
if ($('[data-board="' + board + '"] #' + $(this).attr('id')).length === 0) {
|
||||
$('[data-board="' + board + '"]#thread_' + mythreadid + " .post.reply:first").before($(this).hide().addClass('hidden'));
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
} 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);
|
||||
post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id);
|
||||
|
||||
if(hovering && $post.length > 0) {
|
||||
start_hover($link);
|
||||
if (hovering && post.length > 0) {
|
||||
start_hover(link);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}, function() {
|
||||
hovering = false;
|
||||
if(!$post)
|
||||
return;
|
||||
// Remove the preview.
|
||||
|
||||
$post.removeClass('highlighted');
|
||||
if($post.hasClass('hidden') || $post.data('cached') == 'yes')
|
||||
$post.css('display', 'none');
|
||||
hovering = false;
|
||||
if (!post) {
|
||||
return;
|
||||
}
|
||||
|
||||
post.removeClass('highlighted');
|
||||
if (post.hasClass('hidden') || post.data('cached') == 'yes') {
|
||||
post.css('display', 'none');
|
||||
}
|
||||
$('.post-hover').remove();
|
||||
}).mousemove(function(e) {
|
||||
if(!$post)
|
||||
// Update the preview position if the mouse moves.
|
||||
|
||||
if (!post) {
|
||||
return;
|
||||
|
||||
var $hover = $('#post-hover-' + id + '[data-board="' + board + '"]');
|
||||
if($hover.length == 0)
|
||||
return;
|
||||
|
||||
var scrollTop = $(window).scrollTop();
|
||||
if ($link.is("[data-thread]")) scrollTop = 0;
|
||||
var epy = e.pageY;
|
||||
if ($link.is("[data-thread]")) epy -= $(window).scrollTop();
|
||||
|
||||
var top = (epy ? epy : hovered_at['y']) - 10;
|
||||
|
||||
if(epy < scrollTop + 15) {
|
||||
top = scrollTop;
|
||||
} else if(epy > scrollTop + $(window).height() - $hover.height() - 15) {
|
||||
top = scrollTop + $(window).height() - $hover.height() - 15;
|
||||
}
|
||||
|
||||
var hovery = e.pageY ? e.pageY : hovered_at['y'];
|
||||
if ( ( hovery - top) > 20){
|
||||
top = hovery;
|
||||
// The actual displayed preview.
|
||||
let hoverPreview = $('#post-hover-' + id + '[data-board="' + board + '"]');
|
||||
if (hoverPreview.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
$hover.css('left', (e.pageX ? e.pageX : hovered_at['x']) + 1).css('top', top);
|
||||
updatePreviewPosition(e.pageX, e.pageY, hoverPreview);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -175,4 +227,4 @@ $(document).ready(function () {
|
|||
$(post).find('div.body a:not([rel="nofollow"])').each(init_hover);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,40 +8,42 @@
|
|||
*
|
||||
* Usage:
|
||||
* $config['additional_javascript'][] = 'js/jquery.min.js';
|
||||
* // $config['additional_javascript'][] = 'js/post-hover'; (optional; must come first)
|
||||
* // $config['additional_javascript'][] = 'js/post-hover.js'; (optional; must come first)
|
||||
* $config['additional_javascript'][] = 'js/show-backlinks.js';
|
||||
*
|
||||
*/
|
||||
|
||||
$(document).ready(function() {
|
||||
var showBackLinks = function() {
|
||||
var reply_id = $(this).attr('id').replace(/^reply_/, '');
|
||||
let showBackLinks = function() {
|
||||
let replyId = $(this).attr('id').replace(/^reply_/, '');
|
||||
|
||||
$(this).find('div.body a:not([rel="nofollow"])').each(function() {
|
||||
var id, post, $mentioned;
|
||||
|
||||
if(id = $(this).text().match(/^>>(\d+)$/))
|
||||
let id = $(this).text().match(/^>>(\d+)$/);
|
||||
if (id) {
|
||||
id = id[1];
|
||||
else
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
let post = $('#reply_' + id);
|
||||
if(post.length == 0)
|
||||
return;
|
||||
|
||||
$post = $('#reply_' + id);
|
||||
if($post.length == 0)
|
||||
let mentioned = post.find('p.intro span.mentioned');
|
||||
if (mentioned.length === 0) {
|
||||
mentioned = $('<span class="mentioned unimportant"></span>').prependTo(post.find('.head'));
|
||||
}
|
||||
|
||||
if (mentioned.find('a.mentioned-' + replyId).length !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
$mentioned = $post.find('p.intro span.mentioned');
|
||||
if($mentioned.length == 0)
|
||||
$mentioned = $('<span class="mentioned unimportant"></span>').appendTo($post.find('p.intro'));
|
||||
|
||||
if ($mentioned.find('a.mentioned-' + reply_id).length != 0)
|
||||
return;
|
||||
|
||||
var $link = $('<a class="mentioned-' + reply_id + '" onclick="highlightReply(\'' + reply_id + '\');" href="#' + reply_id + '">>>' +
|
||||
reply_id + '</a>');
|
||||
$link.appendTo($mentioned)
|
||||
let link = $('<a class="mentioned-' + replyId + '" onclick="highlightReply(\'' + replyId + '\');" href="#'
|
||||
+ replyId + '">>>' + replyId + '</a>');
|
||||
link.appendTo(mentioned)
|
||||
|
||||
if (window.init_hover) {
|
||||
$link.each(init_hover);
|
||||
link.each(init_hover);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
@ -49,12 +51,10 @@ $(document).ready(function(){
|
|||
$('div.post.reply').each(showBackLinks);
|
||||
|
||||
$(document).on('new_post', function(e, post) {
|
||||
if ($(post).hasClass("reply")) {
|
||||
if ($(post).hasClass('reply')) {
|
||||
showBackLinks.call(post);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
$(post).find('div.post.reply').each(showBackLinks);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -110,6 +110,11 @@ div.post.reply {
|
|||
background: #282A2E;
|
||||
border: 1px solid #117743;
|
||||
border-radius: 5px;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
div.post.reply.highlighted {
|
||||
background: rgba(59, 22, 43, 0.4);
|
||||
|
|
|
|||
|
|
@ -58,6 +58,11 @@ div.post.reply.post-hover {
|
|||
border-width: 1px;
|
||||
border-style: none solid solid none;
|
||||
border-color: #B7C5D9;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.post.reply div.body a {
|
||||
|
|
|
|||
|
|
@ -55,8 +55,10 @@ div.post.reply {
|
|||
background: #333333;
|
||||
border: #555555 1px solid;
|
||||
|
||||
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
div.post.reply.highlighted {
|
||||
background: #555;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
/*dark.css has been prepended (2021-11-11) instead of @import'd for performance*/
|
||||
body {
|
||||
background: #1E1E1E;
|
||||
color: #999999;
|
||||
color: #A7A7A7;
|
||||
font-family: Verdana, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -51,6 +51,11 @@ a.post_no:hover {
|
|||
div.post.reply {
|
||||
background: #333333;
|
||||
border: #555555 1px solid;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
div.post.reply.highlighted {
|
||||
background: #555;
|
||||
|
|
@ -152,7 +157,7 @@ hr {
|
|||
}
|
||||
div.boardlist {
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
color: #A7A7A7;
|
||||
}
|
||||
div.ban {
|
||||
background-color: transparent;
|
||||
|
|
@ -173,7 +178,7 @@ div.boardlist:not(.bottom) {
|
|||
}
|
||||
.desktop-style div.boardlist:not(.bottom) {
|
||||
text-shadow: black 1px 1px 1px, black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px;
|
||||
color: #999999;
|
||||
color: #A7A7A7;
|
||||
background-color: #1E1E1E;
|
||||
}
|
||||
div.report {
|
||||
|
|
|
|||
|
|
@ -67,6 +67,11 @@ div.post.reply.post-hover {
|
|||
border-width: 1px;
|
||||
border-style: none solid solid none;
|
||||
border-color: #B7C5D9;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.post.reply div.body a {
|
||||
|
|
|
|||
|
|
@ -73,6 +73,11 @@ div.post.reply.post-hover {
|
|||
border-width: 1px;
|
||||
border-style: none solid solid none;
|
||||
border-color: #101010;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.post.reply div.body a {
|
||||
|
|
|
|||
|
|
@ -90,6 +90,11 @@ div.post.reply.post-hover {
|
|||
border-width: 1px;
|
||||
border-style: none solid solid none;
|
||||
border-color: #B7C5D9;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.post.reply div.body a {
|
||||
|
|
|
|||
|
|
@ -213,6 +213,11 @@ div.post.reply {
|
|||
border-style: none solid solid none;
|
||||
border-color: #DCDCDC;
|
||||
display: inline-block;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
span.trip {
|
||||
color: #228854;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,6 @@ html, body {
|
|||
}
|
||||
|
||||
div.pages{
|
||||
|
||||
margin:0!important;
|
||||
padding: 0!important;
|
||||
}
|
||||
|
|
@ -61,8 +60,7 @@ img.banner, img.board_image {
|
|||
}
|
||||
|
||||
.bar {
|
||||
|
||||
display: table!important;
|
||||
display: table;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
|
|
@ -70,10 +68,12 @@ img.banner, img.board_image {
|
|||
background-color: #D6DAF0;
|
||||
border-color: #B7C5D9;
|
||||
}
|
||||
|
||||
.bar > :not(script) {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bar.top {
|
||||
text-align: center;
|
||||
top: 0px;
|
||||
|
|
@ -81,11 +81,26 @@ img.banner, img.board_image {
|
|||
}
|
||||
|
||||
.bar.bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
bottom: 0px;
|
||||
border-top: 1px solid #333333;
|
||||
/*background-color: #333333 ;*/
|
||||
}
|
||||
|
||||
/* Stuff in the bottom bar. */
|
||||
@media (max-width: 64em) {
|
||||
.pages-list {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 64em) {
|
||||
#updater {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/*homepage banner*/
|
||||
div.lain_banner{
|
||||
|
|
@ -102,9 +117,14 @@ body {
|
|||
color: black;
|
||||
font-family: arial,helvetica,sans-serif;
|
||||
font-size: 10pt;
|
||||
margin: 0 4px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
margin: 0px 4px;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
main,
|
||||
|
|
@ -242,10 +262,6 @@ a.post_no {
|
|||
color: #ff0000;
|
||||
}
|
||||
|
||||
.intro label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.intro time,p.intro a.ip-link,p.intro a.capcode {
|
||||
direction: ltr;
|
||||
unicode-bidi: embed;
|
||||
|
|
@ -346,7 +362,6 @@ form table tr td div label {
|
|||
|
||||
.file {
|
||||
float: left;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.file:not(.multifile) .post-image {
|
||||
|
|
@ -359,11 +374,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 {
|
||||
|
|
@ -403,7 +414,7 @@ img.banner,img.board_image {
|
|||
}
|
||||
|
||||
div.post .post-image {
|
||||
padding: 5px;
|
||||
padding: 0.2em;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -418,24 +429,29 @@ div.post i.fa, div.thread 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;
|
||||
}
|
||||
|
||||
input.delete {
|
||||
float: left;
|
||||
margin: 1px 6px 0 0;
|
||||
margin: 1px 6px 0px 0px;
|
||||
scale: 1.05;
|
||||
}
|
||||
|
||||
.intro {
|
||||
padding: 0px;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.intro span {
|
||||
min-width: 0.3em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.post-details {
|
||||
text-wrap: nowrap;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.intro span.subject {
|
||||
|
|
@ -448,12 +464,12 @@ 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 {
|
||||
.post-details a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -466,13 +482,35 @@ input.delete {
|
|||
color: maroon;
|
||||
}
|
||||
|
||||
div.post p {
|
||||
display: block;
|
||||
margin: 0;
|
||||
div.post {
|
||||
margin: 0.2em 4px;
|
||||
padding: 0.5em 0.3em;
|
||||
display: inline-block;
|
||||
max-width: 94%!important;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
margin: 0.1em 0px;
|
||||
padding: 0.5em 0px;
|
||||
width: 100%;
|
||||
max-width: unset!important;
|
||||
}
|
||||
}
|
||||
|
||||
div.post > div.head {
|
||||
margin: 0.1em 1em;
|
||||
clear: both;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
div.post > p {
|
||||
margin: 0.1em 0.4em;
|
||||
|
||||
line-height: 1.16em;
|
||||
font-size: 13px;
|
||||
min-height: 1.16em;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
margin-right: 1.4em;
|
||||
}
|
||||
}
|
||||
|
||||
div.post div.body {
|
||||
|
|
@ -481,6 +519,10 @@ div.post div.body {
|
|||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
div.post.op div.body {
|
||||
margin-left: 0.8em;
|
||||
}
|
||||
|
||||
div.post.reply div.body {
|
||||
margin-left: 1.8em;
|
||||
}
|
||||
|
|
@ -498,15 +540,27 @@ div.post div.body {
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
div.post.op {
|
||||
padding-top: 0px;
|
||||
vertical-align: top;
|
||||
|
||||
/* Add back in the padding that is provided by body on large screens */
|
||||
@media (max-width: 48em) {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
div.post.reply {
|
||||
background: #D6DAF0;
|
||||
margin: 0.2em 4px;
|
||||
padding: 0.5em 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-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.post.reply.has-file.body-not-empty {
|
||||
|
|
@ -553,19 +607,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 {
|
||||
|
|
|
|||
|
|
@ -183,6 +183,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;
|
||||
}
|
||||
}
|
||||
div.post.reply.highlighted {
|
||||
background: #583E28;
|
||||
|
|
|
|||
|
|
@ -38,6 +38,11 @@ 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;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,11 @@ a.post_no:hover {
|
|||
div.post.reply {
|
||||
background: #111111;
|
||||
border: 1px dotted;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
div.post.reply.highlighted {
|
||||
background: transparent;
|
||||
|
|
|
|||
|
|
@ -43,6 +43,13 @@ div.post.reply, div.post.reply.highlighted
|
|||
border-color: #8725EC;
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
div.post.reply {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-style div.boardlist:nth-child(1) {
|
||||
border-bottom: #8725EC 1px dashed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -97,7 +97,10 @@ div.post.reply {
|
|||
border-radius: 10px;
|
||||
opacity: 0.85;
|
||||
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
img.post-image:hover {
|
||||
|
|
|
|||
|
|
@ -33,6 +33,13 @@ a:link:hover, a:visited:hover, div.post.reply div.body a:hover {
|
|||
color:#ffff00;
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
div.post.reply {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.email span.name {
|
||||
color:#ff9100 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -329,6 +329,11 @@ div.post.reply {
|
|||
border-color: #B7C5D9;
|
||||
display: inline-block;
|
||||
max-width: 94%!important;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
span.trip {
|
||||
|
|
@ -1358,6 +1363,11 @@ div.post.reply {
|
|||
background: #111;
|
||||
border: #555555 1px solid;
|
||||
box-shadow: 4px 4px #555;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
div.post.reply.highlighted {
|
||||
background: #555;
|
||||
|
|
|
|||
|
|
@ -56,6 +56,14 @@ div.topbar, input[type="text"], select, form table tr th, form table tr td input
|
|||
border-color: #486582!important;
|
||||
color: #E0E0E0!important;
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
div.post.reply {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
div.post.reply.highlighted{
|
||||
background-color: #486582!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -212,6 +212,11 @@ div.post.reply {
|
|||
border-style: none solid solid none;
|
||||
border-color: lightgreen;
|
||||
display: inline-block;
|
||||
|
||||
@media (max-width: 48em) {
|
||||
border-left-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
}
|
||||
span.trip {
|
||||
color: #228854;
|
||||
|
|
|
|||
|
|
@ -119,9 +119,13 @@
|
|||
|
||||
<div id="bottom-hud" class="bar bottom">
|
||||
<div class="pages">
|
||||
{{ btn.prev }} [ {% for page in pages %}
|
||||
{{ btn.prev }}
|
||||
<span class="pages-list">
|
||||
[ {% for page in pages %}
|
||||
<a {% if page.selected %}class="selected"{% endif %}{% if not page.selected %}href="{{ page.link }}"{% endif %}>{{ page.num }}</a>{% if not loop.last %} /{% endif %}
|
||||
{% endfor %} ] {{ btn.next }}
|
||||
{% endfor %} ]
|
||||
</span>
|
||||
{{ btn.next }}
|
||||
{% if config.catalog_link %}
|
||||
| <a href="{{ config.root }}{% if mod %}{{ config.file_mod }}?/{% endif %}{{ board.dir }}{{ config.catalog_link }}">{% trans %}Catalog{% endtrans %}</a>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -2,23 +2,26 @@
|
|||
{# tabs and new lines will be ignored #}
|
||||
<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 }}" />
|
||||
<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>
|
||||
{% include 'post/poster_id.html' %}
|
||||
<label style="text-wrap: nowrap;">
|
||||
<a class="post_no" id="post_no_{{ post.id }}" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', config.file_page50) }}{% else %}{{ post.link }}{% endif %}">No.</a>
|
||||
<a class="post_no" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', config.file_page50) }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
|
||||
<span></span>
|
||||
{% include 'post/poster_id.html' %}
|
||||
<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>
|
||||
</p>
|
||||
{% include 'post/fileinfo.html' %}
|
||||
<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 %}>
|
||||
{% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %}
|
||||
{% if post.modifiers['ban message'] %}
|
||||
|
|
|
|||
|
|
@ -3,22 +3,24 @@
|
|||
|
||||
<div class="thread" id="thread_{{ post.id }}" data-board="{{ board.uri }}">
|
||||
{% if not index %}<a id="{{ post.id }}" class="post_anchor"></a>{% endif %}
|
||||
|
||||
{% 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 }}" />
|
||||
<div class="post op" id="op_{{ post.id }}" {%if post.num_files > 1%}style='clear:both'{%endif%}>
|
||||
<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/time.html' %}
|
||||
</label>
|
||||
<span></span>
|
||||
{% include 'post/poster_id.html' %}
|
||||
<label style="text-wrap: nowrap;">
|
||||
<a class="post_no" id="post_no_{{ post.id }}" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', '50') }}{% else %}{{ post.link }}{% endif %}">No.</a>
|
||||
<a class="post_no" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', '50') }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
|
||||
<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>
|
||||
</p>
|
||||
<div class="head">
|
||||
{% if post.sticky %}
|
||||
{% if config.font_awesome %}
|
||||
<i class="fa fa-thumb-tack" title="Sticky"></i>
|
||||
|
|
@ -58,7 +60,8 @@
|
|||
<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' %}
|
||||
</p>
|
||||
{% include 'post/fileinfo.html' %}
|
||||
</div>
|
||||
<div class="body">
|
||||
{% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %}
|
||||
{% if post.modifiers['ban message'] %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue