From f2ea90a2d0768e39fe2d9972a4d03cd48f337268 Mon Sep 17 00:00:00 2001 From: Zankaria Date: Mon, 19 Aug 2024 21:57:50 +0000 Subject: [PATCH] Improve the mobile UX (#167) Chunky PR Reviewed-on: https://git.leftypol.org/leftypol/leftypol/pulls/167 Co-authored-by: Zankaria Co-committed-by: Zankaria --- js/auto-reload.js | 35 +-- js/post-filter.js | 44 ++-- js/post-hover.js | 348 +++++++++++++++++------------- js/show-backlinks.js | 62 +++--- stylesheets/bunker_like.css | 5 + stylesheets/burichan.css | 5 + stylesheets/dark.css | 6 +- stylesheets/dark_red.css | 23 +- stylesheets/favela.css | 5 + stylesheets/nigrachan.css | 5 + stylesheets/novo_jungle.css | 5 + stylesheets/sharp.css | 9 +- stylesheets/style.css | 149 ++++++++----- stylesheets/szalet.css | 33 +-- stylesheets/terminal2.css | 7 +- stylesheets/terminal_common.css | 5 + stylesheets/terminal_purple.css | 29 ++- stylesheets/test.css | 39 ++-- stylesheets/testorange.css | 11 +- stylesheets/tsuki.css | 24 ++- stylesheets/volafile.css | 18 +- stylesheets/wasabi.css | 7 +- templates/index.html | 10 +- templates/post/post_controls.html | 8 +- templates/post/poster_id.html | 4 +- templates/post/time.html | 2 +- templates/post_reply.html | 39 ++-- templates/post_thread.html | 175 +++++++-------- 28 files changed, 661 insertions(+), 451 deletions(-) diff --git a/js/auto-reload.js b/js/auto-reload.js index 3e291f01..245f56cb 100644 --- a/js/auto-reload.js +++ b/js/auto-reload.js @@ -18,7 +18,7 @@ */ // From http://stackoverflow.com/a/14035162 -$.fn.scrollStopped = function(callback) { +$.fn.scrollStopped = function(callback) { $(this).scroll(function(){ var self = this, $this = $(self); if ($this.data('scrollTimeout')) { @@ -73,7 +73,7 @@ $(document).ready(function(){ $('#auto_thread_desktop_notifications>input,#auto_thread_desktop_notifications_all>input').on('click', function() { if (!("Notification" in window)) return; - + var setting = $(this).parent().attr('id'); if ($(this).is(':checked')) { Notification.requestPermission(function(permission){ @@ -132,7 +132,7 @@ $(document).ready(function(){ var new_posts = 0; var first_new_post = null; - + var title = document.title; if (typeof update_title == "undefined") { @@ -178,7 +178,7 @@ $(document).ready(function(){ var decrement_timer = function() { poll_current_time = poll_current_time - 1000; $('#update_secs').text(poll_current_time/1000); - + if (poll_current_time <= 0) { poll(manualUpdate = false); } @@ -195,7 +195,7 @@ $(document).ready(function(){ update_title(); first_new_post = null; }; - + // automatically updates the thread after a specified delay var auto_update = function(delay) { clearInterval(countdown_interval); @@ -204,14 +204,14 @@ $(document).ready(function(){ countdown_interval = setInterval(decrement_timer, 1000); $('#update_secs').text(poll_current_time/1000); } - + var stop_auto_update = function() { clearInterval(countdown_interval); } var epoch = (new Date).getTime(); var epochold = epoch; - + var timeDiff = function (delay) { if((epoch-epochold) > delay) { epochold = epoch = (new Date).getTime(); @@ -221,10 +221,15 @@ $(document).ready(function(){ return; } } - + 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, @@ -259,14 +264,14 @@ $(document).ready(function(){ }); time_loaded = Date.now(); // interop with watch.js - + if ($('#auto_update_status').is(':checked')) { // If there are no new posts, double the delay. Otherwise set it to the min. if(loaded_posts == 0) { // if the update was manual, don't increase the delay if (manualUpdate == false) { poll_interval_delay *= 2; - + // Don't increase the delay beyond the maximum if(poll_interval_delay > poll_interval_maxdelay) { poll_interval_delay = poll_interval_maxdelay; @@ -275,7 +280,7 @@ $(document).ready(function(){ } else { poll_interval_delay = poll_interval_mindelay; } - + auto_update(poll_interval_delay); } else { // Decide the message to show if auto update is disabled @@ -300,7 +305,7 @@ $(document).ready(function(){ } else { $('#update_secs').text(_("Unknown error")); } - + // Keep trying to update if ($('#auto_update_status').is(':checked')) { poll_interval_delay = poll_interval_errordelay; @@ -308,7 +313,7 @@ $(document).ready(function(){ } } }); - + return false; }; @@ -318,7 +323,7 @@ $(document).ready(function(){ poll(manualUpdate = true); }); - + $(window).scrollStopped(function() { // if the newest post is not visible if($(this).scrollTop() + $(this).height() < diff --git a/js/post-filter.js b/js/post-filter.js index 5d0e4ef9..f3f161c6 100644 --- a/js/post-filter.js +++ b/js/post-filter.js @@ -1,12 +1,13 @@ /* 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'; */ if (active_page === 'thread' || active_page === 'index' || active_page === 'catalog' || active_page === 'ukko') { $(document).on('menu_ready', function () { 'use strict'; - + // returns blacklist object from storage function getList() { return JSON.parse(localStorage.postFilter); @@ -69,12 +70,12 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata } function nameSpanToString(el) { - var s = ''; + var s = ''; $.each($(el).contents(), function(k,v) { if (v.nodeName === 'IMG') s=s+$(v).attr('alt') - + if (v.nodeName === '#text') s=s+v.nodeValue }); @@ -170,7 +171,7 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata } }; - /* + /* * hide/show the specified thread/post */ function hide(ele) { @@ -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,15 +196,15 @@ 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(); } } - /* + /* * create filter menu when the button is clicked */ function initPostMenu(pageData) { @@ -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(); @@ -343,7 +345,7 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata }); } - /* + /* * hide/unhide thread on index view */ function quickToggle(ele, threadId, pageData) { @@ -357,7 +359,7 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata var postId = $(ele).find('.post_no').not('[id]').text(); var hidden = $(ele).data('hidden'); var boardId = $(ele).parents('.thread').data('board'); - + if (hidden) { blacklist.remove.post(boardId, threadId, postId, false); $(this).html('[–]'); @@ -749,7 +751,7 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata } } - /* + /* * clear out pruned threads */ function purge() { @@ -785,7 +787,7 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata if ((timestamp() - list.lastPurge) < 86400) // less than 1 day return; - + for (boardId in list.nextPurge) { board = list.nextPurge[boardId]; for (threadId in board) { @@ -869,7 +871,7 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata } init(); }); - + if (typeof window.Menu !== "undefined") { $(document).trigger('menu_ready'); } diff --git a/js/post-hover.js b/js/post-hover.js index 6ecd4c21..e5da909f 100644 --- a/js/post-hover.js +++ b/js/post-hover.js @@ -13,166 +13,218 @@ * */ -$(document).ready(function () { - var dont_fetch_again = []; - init_hover = function() { - var $link = $(this); - - var id; - var 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) { + $(document).ready(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]; + query.addEventListener('change', (e) => isScreenSmall = e.matches); + isScreenSmall = query.matches; } - else { - return; - } - - var 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_", ""); - board = board.data('board'); + let dont_fetch_again = []; + init_hover = function() { + let link = $(this); - var parentboard = board; - - if ($link.is('[data-thread]')) parentboard = $('form[name="post"] input[name="board"]').val(); - else if (matches[1] !== undefined) board = matches[1]; + let id; + let matches; - var $post = false; - var hovering = false; - var hovered_at; - $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])) { - // 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 { - var $newPost = $post.clone(); - $newPost.find('>.reply, >br').remove(); - //$newPost.find('span.mentioned').remove(); - $newPost.find('a.post_anchor').remove(); - - $newPost - .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') - .css('margin-left', '1em') - .addClass('reply').addClass('post') - .insertAfter($link.parent()) - - $link.trigger('mousemove'); - } - }; - - $post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id); - if($post.length > 0) { - start_hover($(this)); + if (link.is('[data-thread]')) { + id = link.attr('data-thread'); + } else if (matches = link.text().match(/^>>(?:>\/([^\/]+)\/)?(\d+)$/)) { + id = matches[2]; } else { - var url = $link.attr('href').replace(/#.*$/, ''); - - if($.inArray(url, dont_fetch_again) != -1) { + return; + } + + 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_", ""); + } + + board = board.data('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]; + } + + 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}; + + 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, 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) { + start_hover($(this)); + } else { + let url = link.attr('href').replace(/#.*$/, ''); + + if ($.inArray(url, dont_fetch_again) != -1) { + return; + } + dont_fetch_again.push(url); + + $.ajax({ + url: url, + context: document.body, + success: function(data) { + var 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) { + start_hover(link); + } + } + }); + } + }, function() { + // Remove the preview. + + hovering = false; + if (!post) { return; } - dont_fetch_again.push(url); - - $.ajax({ - url: url, - context: document.body, - success: function(data) { - var 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.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. - $post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id); + if (!post) { + return; + } - if(hovering && $post.length > 0) { - start_hover($link); - } - } - }); - } - }, function() { - 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) - return; - - var $hover = $('#post-hover-' + id + '[data-board="' + board + '"]'); - if($hover.length == 0) - return; + // The actual displayed preview. + let hoverPreview = $('#post-hover-' + id + '[data-board="' + board + '"]'); + if (hoverPreview.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(); + updatePreviewPosition(e.pageX, e.pageY, hoverPreview); + }); + }; - 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; - } - - - $hover.css('left', (e.pageX ? e.pageX : hovered_at['x']) + 1).css('top', top); + $('div.body a:not([rel="nofollow"])').each(init_hover); + + // allow to work with auto-reload.js, etc. + $(document).on('new_post', function(e, post) { + $(post).find('div.body a:not([rel="nofollow"])').each(init_hover); }); - }; - - $('div.body a:not([rel="nofollow"])').each(init_hover); - - // allow to work with auto-reload.js, etc. - $(document).on('new_post', function(e, post) { - $(post).find('div.body a:not([rel="nofollow"])').each(init_hover); }); -}); - +} diff --git a/js/show-backlinks.js b/js/show-backlinks.js index d32cf803..8248dc4d 100644 --- a/js/show-backlinks.js +++ b/js/show-backlinks.js @@ -4,57 +4,57 @@ * * Released under the MIT license * Copyright (c) 2012 Michael Save - * Copyright (c) 2013-2014 Marcin Łabanowski + * Copyright (c) 2013-2014 Marcin Łabanowski * * 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_/, ''); - +$(document).ready(function() { + 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; - - $post = $('#reply_' + id); - if($post.length == 0) + } + + let post = $('#reply_' + id); + if(post.length == 0) return; - - $mentioned = $post.find('p.intro span.mentioned'); - if($mentioned.length == 0) - $mentioned = $('').appendTo($post.find('p.intro')); - - if ($mentioned.find('a.mentioned-' + reply_id).length != 0) + + let mentioned = post.find('p.intro span.mentioned'); + if (mentioned.length === 0) { + mentioned = $('').prependTo(post.find('.head')); + } + + if (mentioned.find('a.mentioned-' + replyId).length !== 0) { return; - - var $link = $('>>' + - reply_id + ''); - $link.appendTo($mentioned) - + } + + let link = $('>>' + replyId + ''); + link.appendTo(mentioned) + if (window.init_hover) { - $link.each(init_hover); + link.each(init_hover); } }); }; - + $('div.post.reply').each(showBackLinks); - $(document).on('new_post', function(e, post) { - if ($(post).hasClass("reply")) { + $(document).on('new_post', function(e, post) { + if ($(post).hasClass('reply')) { showBackLinks.call(post); - } - else { + } else { $(post).find('div.post.reply').each(showBackLinks); } }); }); - diff --git a/stylesheets/bunker_like.css b/stylesheets/bunker_like.css index 65de9e9b..a69591a1 100644 --- a/stylesheets/bunker_like.css +++ b/stylesheets/bunker_like.css @@ -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); diff --git a/stylesheets/burichan.css b/stylesheets/burichan.css index 6b1de235..cd97f777 100644 --- a/stylesheets/burichan.css +++ b/stylesheets/burichan.css @@ -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 { diff --git a/stylesheets/dark.css b/stylesheets/dark.css index b1ce49b7..dd7e9bfd 100644 --- a/stylesheets/dark.css +++ b/stylesheets/dark.css @@ -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; diff --git a/stylesheets/dark_red.css b/stylesheets/dark_red.css index 80688235..2f1f5aee 100644 --- a/stylesheets/dark_red.css +++ b/stylesheets/dark_red.css @@ -5,17 +5,17 @@ /*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; } .quote { - color:#B8D962; + color:#B8D962; } @font-face { - font-family: 'lain'; - src: url('./fonts/nrdyyh.woff') format('woff'), - url('./fonts/tojcxo.TTF') format('truetype'); + font-family: 'lain'; + src: url('./fonts/nrdyyh.woff') format('woff'), + url('./fonts/tojcxo.TTF') format('truetype'); } h1 { @@ -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; @@ -172,9 +177,9 @@ 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; - background-color: #1E1E1E; + text-shadow: black 1px 1px 1px, black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px; + color: #A7A7A7; + background-color: #1E1E1E; } div.report { color: #666666; diff --git a/stylesheets/favela.css b/stylesheets/favela.css index 52d24c76..48c20889 100644 --- a/stylesheets/favela.css +++ b/stylesheets/favela.css @@ -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 { diff --git a/stylesheets/nigrachan.css b/stylesheets/nigrachan.css index 28ab3eb3..a3ba2991 100644 --- a/stylesheets/nigrachan.css +++ b/stylesheets/nigrachan.css @@ -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 { diff --git a/stylesheets/novo_jungle.css b/stylesheets/novo_jungle.css index 8c313723..8c4f0365 100644 --- a/stylesheets/novo_jungle.css +++ b/stylesheets/novo_jungle.css @@ -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 { diff --git a/stylesheets/sharp.css b/stylesheets/sharp.css index 7027a51b..f41082bc 100644 --- a/stylesheets/sharp.css +++ b/stylesheets/sharp.css @@ -94,7 +94,7 @@ form table tr th { form table tr th { background: #AF0A0F; color: #FFF; - border: 1px solid #800000; + border: 1px solid #800000; } form table tr td div { text-align: center; @@ -213,6 +213,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; @@ -393,7 +398,7 @@ div.blotter { } .desktop-style div.boardlist:nth-child(1) { - + } .desktop-style div.boardlist:nth-child(1):hover, .desktop-style div.boardlist:nth-child(1).cb-menu { diff --git a/stylesheets/style.css b/stylesheets/style.css index 42557440..2e685e45 100644 --- a/stylesheets/style.css +++ b/stylesheets/style.css @@ -18,9 +18,9 @@ img { /* boardlist gets all scrunched on small screens */ @media screen and (max-width: 600px) { - header, img.board_image { - margin-top: 5em; - } + header, img.board_image { + margin-top: 5em; + } } @media screen and (min-width: 700px) { @@ -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; - line-height: 1.16em; - font-size: 13px; - min-height: 1.16em; + @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; + + 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 { diff --git a/stylesheets/szalet.css b/stylesheets/szalet.css index 88f7d094..a766416e 100644 --- a/stylesheets/szalet.css +++ b/stylesheets/szalet.css @@ -4,7 +4,7 @@ body { font-family: sans-serif; font-size: 12px; color: #99938D; - + background-color: #1e1e1e; background-image: url('img/szalet_bg.png'); background-repeat: repeat; @@ -14,7 +14,7 @@ body { background-image: url('img/szalet_bg.png'); background-repeat: repeat; /*background-color: #200000;*/ -} +} .boardlist .board a { background-color: #200000; @@ -27,7 +27,7 @@ color: #26899C; div.pages a.selected { color: #FFFCFC !important;} - + a:link, a:visited, div.post.reply p.body a { color: #7A422C!important; text-decoration: none; @@ -35,12 +35,12 @@ a:link, a:visited, div.post.reply p.body a { a:link:hover, a:visited:hover, div.post.reply p.body a:hover { color: #8A8A23!important; } - + a.email span.name { color: #4B4B4B !important; - + } - + input { color: #8A7656; background: none !important; @@ -52,7 +52,7 @@ input, textarea, select { background: #200000; color: #99938D; } - + hr { height: 3px; border-width: 0px; @@ -60,7 +60,7 @@ background: url('img/szalet_hr.png') center no-repeat; background-size: 100% 100%; overflow: hidden; } - + .reflink a:hover{ font-weight: bold; } @@ -93,7 +93,7 @@ div.banner, .replymode, .catalogmode { font-weight: bold; text-align: center !important; } - + .postarea { } .rules { @@ -119,7 +119,7 @@ div.banner, .replymode, .catalogmode { .delbuttons { text-align:center; padding-bottom:4px; - + } .managehead { background-color: #1e1e1e; @@ -153,13 +153,13 @@ div.banner, .replymode, .catalogmode { color: #bebebe; font-weight:800; } - + .intro span.subject { color: #771018; font-weight: bold; } - - + + span.name, .postername { color: #8A775B !important; font-weight:bold; @@ -178,11 +178,16 @@ div.post.reply { padding: 5px; border: 1px #583E28 solid !important; background: #200000; - + -webkit-border-radius: 10px; -khtml-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; + + @media (max-width: 48em) { + border-left-style: none; + border-right-style: none; + } } div.post.reply.highlighted { background: #583E28; diff --git a/stylesheets/terminal2.css b/stylesheets/terminal2.css index f878e857..d4d52847 100644 --- a/stylesheets/terminal2.css +++ b/stylesheets/terminal2.css @@ -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; @@ -174,7 +179,7 @@ table.modlog tr th { -moz-box-shadow: 0 0 40px #000; -webkit-box-shadow: 0 0 40px #000; box-shadow: 0 0 40px #000; - + } .bar.top { diff --git a/stylesheets/terminal_common.css b/stylesheets/terminal_common.css index 0c92d4af..c7f34f51 100644 --- a/stylesheets/terminal_common.css +++ b/stylesheets/terminal_common.css @@ -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; diff --git a/stylesheets/terminal_purple.css b/stylesheets/terminal_purple.css index 432ce6b8..65740eaa 100644 --- a/stylesheets/terminal_purple.css +++ b/stylesheets/terminal_purple.css @@ -1,24 +1,24 @@ @import url(./terminal_common.css); body, div.title, h1, a:link, a:visited, p.intro a.email span.name, -a:link:hover, a:visited:hover, a.post_no, a.post_no:hover, -div.post.reply div.body a:link, div.post.reply div.body a:visited, +a:link:hover, a:visited:hover, a.post_no, a.post_no:hover, +div.post.reply div.body a:link, div.post.reply div.body a:visited, div.post.reply div.body a:link:hover, div.post.reply div.body a:visited:hover, -table.modlog tr th, p.intro span.name, p.intro a.capcode, p.intro a.nametag, -div.pages a.selected, p.intro a.email, p.intro a.email span.name, -p.intro a.email:hover, p.intro a.email:hover span.name, -div.boardlist input[type="text"], form table tr td input[type="text"], textarea, select, input[type="password"], +table.modlog tr th, p.intro span.name, p.intro a.capcode, p.intro a.nametag, +div.pages a.selected, p.intro a.email, p.intro a.email span.name, +p.intro a.email:hover, p.intro a.email:hover span.name, +div.boardlist input[type="text"], form table tr td input[type="text"], textarea, select, input[type="password"], form table tr th, input[type="submit"], input[type="submit"]:hover, div.pages { color: #8725EC!important; } -.boardlist, div.blotter, header div.subtitle, h1, span.quote +.boardlist, div.blotter, header div.subtitle, h1, span.quote { color: #A6D2FF!important; } -p.intro span.subject, span.trip +p.intro span.subject, span.trip { color: #8725EC; } @@ -36,13 +36,20 @@ div.ban h2 { } -input[type="text"], textarea, select, input[type="password"], form table tr th, +input[type="text"], textarea, select, input[type="password"], form table tr th, input[type="submit"], input[type="submit"]:hover, div.pages, hr, div.ban, -div.post.reply, div.post.reply.highlighted +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; } @@ -55,7 +62,7 @@ div.post.reply, div.post.reply.highlighted -webkit-box-shadow: none; box-shadow: none; } -.bar.top +.bar.top { border-bottom-style: dotted; } diff --git a/stylesheets/test.css b/stylesheets/test.css index 3c89242b..162e9c26 100644 --- a/stylesheets/test.css +++ b/stylesheets/test.css @@ -1,7 +1,7 @@ @import url("animate.css"); /* * test.css - * Just a test. + * Just a test. */ .quote { color:#B8D962; @@ -22,7 +22,7 @@ src: url('./fonts/nrdyyh.woff') format('woff'), url('./fonts/tojcxo.TTF') format('truetype'); } -h1 +h1 { font-family: 'lain', tahoma; letter-spacing: -2px; @@ -41,7 +41,7 @@ img div.title, h1 { color: #32DD72; - + } div.title p { font-size: 10px; @@ -97,14 +97,17 @@ 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 { -webkit-animation: flip 5s linear infinite; -moz-animation: flip 5s linear infinite; -o-animation: flip 5s linear infinite; - animation: flip 5s linear infinite; + animation: flip 5s linear infinite; } @@ -112,14 +115,14 @@ div.post.op:hover{ -webkit-animation: pulse 5s linear ; -moz-animation: pulse 5s linear ; -o-animation: pulse 5s linear ; - animation: pulse 5s linear ; + animation: pulse 5s linear ; } div.postcontainer:hover{ - -webkit-animation: pulse 5s linear; - -moz-animation: pulse 5s linear; + -webkit-animation: pulse 5s linear; + -moz-animation: pulse 5s linear; -o-animation: pulse 5s linear ; - animation: pulse 5s linear ; + animation: pulse 5s linear ; } div.post div.body { @@ -235,17 +238,17 @@ span.trip { div.pages { - - background: #1E1E1E; - + + background: #1E1E1E; + font-family: "LoveLetter" , sans-serif; - + } .bar.bottom { bottom: 0px; border-top: 1px solid #333333; background-color: #1E1E1E; - text-shadow: #525252 1px 1px 1px, #080808 -1px -1px 1px, #27ff00 -1px 1px 1px, #1e1e1e 1px -1px 1px; + text-shadow: #525252 1px 1px 1px, #080808 -1px -1px 1px, #27ff00 -1px 1px 1px, #1e1e1e 1px -1px 1px; } div.pages a.selected { color: #CCCCCC; @@ -254,7 +257,7 @@ hr { height: 1px; border: #0aaf0f 1px solid; background-position: -500px 0; - background-image: linear-gradient(to right, rgba(10, 167, 0, 0.94), rgba(13, 255, 0, 0.75), rgb(22, 144, 7)); + background-image: linear-gradient(to right, rgba(10, 167, 0, 0.94), rgba(13, 255, 0, 0.75), rgb(22, 144, 7)); -webkit-animation: thread2 10s linear ; -moz-animation: thread2 10s linear ; -o-animation: thread2 10s linear; @@ -265,7 +268,7 @@ img.banner, img.board_image { -webkit-animation: wobble 10s linear infinite; -moz-animation: wobble 10s linear infinite; -o-animation: wobble 10s linear infinite; - animation: wobble 10s linear infinite; + animation: wobble 10s linear infinite; } @@ -315,13 +318,13 @@ table.modlog tr th { } div.boardlist:not(.bottom) { - text-shadow: #525252 1px 1px 1px, #080808 -1px -1px 1px, #27ff00 -1px 1px 1px, #1e1e1e 1px -1px 1px; + text-shadow: #525252 1px 1px 1px, #080808 -1px -1px 1px, #27ff00 -1px 1px 1px, #1e1e1e 1px -1px 1px; background-color: #1E1E1E; } .desktop-style div.boardlist:not(.bottom) { - position:static; + position:static; color: #999999; background-color: #1E1E1E; } diff --git a/stylesheets/testorange.css b/stylesheets/testorange.css index 44ebd697..bc292d7d 100644 --- a/stylesheets/testorange.css +++ b/stylesheets/testorange.css @@ -4,7 +4,7 @@ body { font-family: sans-serif; font-size: 12px; color:#bebebe; - + background-color: #1e1e1e; background-image: url('img/testorange_testo.png'), url('img/testorange_top_bg.png'), url('img/testorange_bg.png'); background-repeat: no-repeat, repeat-x, repeat; @@ -15,7 +15,7 @@ body { .desktop-style .bl-menu{ background-image: url('img/testorange_bg.png'); background-repeat: repeat; -} +} .boardlist .board a { background-image: url('img/testorange_bg.png'); @@ -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; } diff --git a/stylesheets/tsuki.css b/stylesheets/tsuki.css index 477d76dd..df9ffcfa 100644 --- a/stylesheets/tsuki.css +++ b/stylesheets/tsuki.css @@ -3,13 +3,13 @@ color change by kalyx */ @import url("/stylesheets/dark.css"); -@font-face +@font-face { font-family: "DejaVuSansMono"; src: url("/stylesheets/fonts/DejaVuSansMono.ttf") format("truetype"); } -@font-face +@font-face { font-family: 'lain'; src: url('./fonts/nrdyyh.woff') format('woff'), @@ -20,13 +20,13 @@ color change by kalyx color change by kalyx */ @import url("/stylesheets/dark.css"); -@font-face +@font-face { font-family: "DejaVuSansMono"; src: url("/stylesheets/fonts/DejaVuSansMono.ttf") format("truetype"); } -@font-face +@font-face { font-family: 'lain'; src: url('./fonts/nrdyyh.woff') format('woff'), @@ -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 { @@ -986,10 +991,10 @@ span.pln { clear: both; visibility: hidden; overflow: hidden; - + font-size: 0px; line-height: 0px; - + box-sizing: border-box; border: none; height: 0; @@ -1004,7 +1009,7 @@ span.pln { /* Board List */ div.boardlist { margin-top: 3px; - + color: #89A; font-size: 16px; } @@ -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; diff --git a/stylesheets/volafile.css b/stylesheets/volafile.css index 72584c1c..257c80f2 100644 --- a/stylesheets/volafile.css +++ b/stylesheets/volafile.css @@ -6,29 +6,29 @@ feel free to steal it. */ @import url("/stylesheets/dark.css"); -@font-face +@font-face { font-family: "Open Sans Light"; src: url("/stylesheets/fonts/OpenSans-Light-webfont.eot") format("embedded-opentype"), url("/stylesheets/fonts/OpenSans-Light-webfont.woff") format("woff"), url("/stylesheets/fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("/stylesheets/fonts/OpenSans-Light-webfont.svg#OpenSansLight") format("svg"); } -body +body { background: #395168; color: #E0E0E0; } .bar { - -moz-box-shadow: 0 0 40px #435D78; + -moz-box-shadow: 0 0 40px #435D78; -webkit-box-shadow: 0 0 40px #435D78; box-shadow: 0 0 40px #435D78; background-color: #435D78!important; border-color: #486582!important; } -div.boardlist:not(.bottom) +div.boardlist:not(.bottom) { background-color:#395168; } -.desktop-style div.boardlist:not(.bottom) +.desktop-style div.boardlist:not(.bottom) { background-color:#395168; } @@ -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; } diff --git a/stylesheets/wasabi.css b/stylesheets/wasabi.css index 87a81bdd..0ad3d7f0 100644 --- a/stylesheets/wasabi.css +++ b/stylesheets/wasabi.css @@ -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; @@ -393,7 +398,7 @@ div.blotter { } .desktop-style div.boardlist:nth-child(1) { - + } diff --git a/templates/index.html b/templates/index.html index f5b64c96..e9b944a1 100644 --- a/templates/index.html +++ b/templates/index.html @@ -119,9 +119,13 @@
- {{ btn.prev }} [ {% for page in pages %} - {{ page.num }}{% if not loop.last %} /{% endif %} - {% endfor %} ] {{ btn.next }} + {{ btn.prev }} + + [ {% for page in pages %} + {{ page.num }}{% if not loop.last %} /{% endif %} + {% endfor %} ] + + {{ btn.next }} {% if config.catalog_link %} | {% trans %}Catalog{% endtrans %} {% endif %} diff --git a/templates/post/post_controls.html b/templates/post/post_controls.html index 1b084e27..5d3671c5 100644 --- a/templates/post/post_controls.html +++ b/templates/post/post_controls.html @@ -1,17 +1,17 @@ {% if mod %} - + {% if mod|hasPermission(config.mod.warning, board.uri) %} {{ config.mod.link_warning }}  {% endif %} {% if mod|hasPermission(config.mod.delete, board.uri) %} - {{ config.mod.link_delete }}  + {{ config.mod.link_delete }}  {% endif %} {% if mod|hasPermission(config.mod.deletebyip, board.uri) %} - {{ config.mod.link_deletebyip }}  + {{ config.mod.link_deletebyip }}  {% endif %} {% if mod|hasPermission(config.mod.deletebyip_global, board.uri) %} - {{ config.mod.link_deletebyip_global }}  + {{ config.mod.link_deletebyip_global }}  {% endif %} {% if mod|hasPermission(config.mod.ban, board.uri) %} {{ config.mod.link_ban }}  diff --git a/templates/post/poster_id.html b/templates/post/poster_id.html index 51f0624f..e98187fa 100644 --- a/templates/post/poster_id.html +++ b/templates/post/poster_id.html @@ -1,7 +1,7 @@ {% if config.poster_ids %} {% if post.thread %} - {{ post.ip|poster_id(post.thread) }} + {{ post.ip|poster_id(post.thread) }} {% else %} - {{ post.ip|poster_id(post.id) }} + {{ post.ip|poster_id(post.id) }} {% endif %} {% endif %} diff --git a/templates/post/time.html b/templates/post/time.html index e6273f94..24d18616 100644 --- a/templates/post/time.html +++ b/templates/post/time.html @@ -1 +1 @@ - + diff --git a/templates/post_reply.html b/templates/post_reply.html index ea15d78f..76b65e05 100644 --- a/templates/post_reply.html +++ b/templates/post_reply.html @@ -1,24 +1,27 @@ {% filter remove_whitespace %} {# tabs and new lines will be ignored #}
-

- {% if not index %}{% endif %} - - - {% include 'post/poster_id.html' %}  - -

- {% include 'post/fileinfo.html' %} - {% include 'post/post_controls.html' %} +

+ + + {% include 'post/poster_id.html' %} + +

+
+ {% include 'post/post_controls.html' %} + {% include 'post/fileinfo.html' %} +
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'] %} diff --git a/templates/post_thread.html b/templates/post_thread.html index 8088dace..e0d368f5 100644 --- a/templates/post_thread.html +++ b/templates/post_thread.html @@ -3,95 +3,98 @@
{% if not index %}{% endif %} - -{% include 'post/fileinfo.html' %} -
1%}style='clear:both'{%endif%}>

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

-
- {% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %} - {% if post.modifiers['ban message'] %} - {{ config.mod.ban_message|sprintf(post.modifiers['ban message']) }} - {% endif %} - {% if post.modifiers['warning message'] %} - {{ config.mod.warning_message|sprintf(post.modifiers['warning message']) }} - {% endif %} -
- {% if post.omitted or post.omitted_images %} - - {% if post.omitted %} - {% trans %} - 1 post - {% plural post.omitted %} - {{ count }} posts - {% endtrans %} - {% if post.omitted_images %} - {% trans %}and{% endtrans %} +
1%}style='clear:both'{%endif%}> +

+ + + {% include 'post/poster_id.html' %}  + +

+
+ {% if post.sticky %} + {% if config.font_awesome %} + + {% else %} + Sticky {% endif %} {% endif %} - {% if post.omitted_images %} - {% trans %} - 1 image reply - {% plural post.omitted_images %} - {{ count }} image replies - {% endtrans %} - {% endif %} {% trans %}omitted. Click reply to view.{% endtrans %} - + {% if post.locked %} + {% if config.font_awesome %} + + {% else %} + Locked + {% endif %} + {% endif %} + {% if post.sage and (config.mod.view_bumplock < 0 or (post.mod and post.mod|hasPermission(config.mod.view_bumplock, board.uri))) %} + {% if config.font_awesome %} + + {% else %} + Bumplocked + {% endif %} + {% endif %} + {% if post.cycle %} + {% if config.font_awesome %} + + {% else %} + Cyclical + {% endif %} + {% endif %} + {% if index %} + [{% trans %}Reply{% endtrans %}] + {% endif %} + {% if isnoko50 %} + [{% trans %}View All{% endtrans %}] + {% endif %} + {% if hasnoko50 and not isnoko50 %} + {% set lastcount = config.noko50_count %} + [{% trans %}Last 1 Post{% plural lastcount %}Last {{ count }} Posts{% endtrans %}] + {% endif %} + {% include 'post/post_controls.html' %} + {% include 'post/fileinfo.html' %} +
+
+ {% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %} + {% if post.modifiers['ban message'] %} + {{ config.mod.ban_message|sprintf(post.modifiers['ban message']) }} + {% endif %} + {% if post.modifiers['warning message'] %} + {{ config.mod.warning_message|sprintf(post.modifiers['warning message']) }} + {% endif %} +
+ {% if post.omitted or post.omitted_images %} + + {% if post.omitted %} + {% trans %} + 1 post + {% plural post.omitted %} + {{ count }} posts + {% endtrans %} + {% if post.omitted_images %} + {% trans %}and{% endtrans %} + {% endif %} + {% endif %} + {% if post.omitted_images %} + {% trans %} + 1 image reply + {% plural post.omitted_images %} + {{ count }} image replies + {% endtrans %} + {% endif %} {% trans %}omitted. Click reply to view.{% endtrans %} + + {% endif %} + {% if not index %} {% endif %} -{% if not index %} -{% endif %} -
{% endfilter %} +
{% endfilter %} {% set iparray = [post.ip] %} {% set hr = post.hr %} {% for post in post.posts %}