Updated "preview" button style

boards/static/css/md/base_page.css

@@ -1,551 +1,549 b''
 * {
    text-decoration: none;
    font-weight: inherit;
 }
 
 b, strong {
    font-weight: bold;
 }
 
 html {
     background: #555;
     color: #ffffff;
 }
 
 body {
     margin: 0;
 }
 
 #admin_panel {
     background: #FF0000;
     color: #00FF00
 }
 
 .input_field_error {
     color: #FF0000;
 }
 
 .title {
     font-weight: bold;
     color: #ffcc00;
 }
 
 .link, a {
     color: #afdcec;
 }
 
 .block {
     display: inline-block;
     vertical-align: top;
 }
 
 .tag {
     color: #FFD37D;
 }
 
 .post_id {
     color: #fff380;
 }
 
 .post, .dead_post, .archive_post, #posts-table {
     background: #333;
     padding: 10px;
     clear: left;
     word-wrap: break-word;
     border-top: 1px solid #777;
     border-bottom: 1px solid #777;
 }
 
 .post + .post {
     border-top: none;
 }
 
 .dead_post + .dead_post {
     border-top: none;
 }
 
 .archive_post + .archive_post {
     border-top: none;
 }
 
 .metadata {
     padding-top: 5px;
     margin-top: 10px;
     border-top: solid 1px #666;
     color: #ddd;
 }
 
 .navigation_panel, .tag_info {
     background: #222;
     margin-bottom: 5px;
     margin-top: 5px;
     padding: 10px;
     border-bottom: solid 1px #888;
     border-top: solid 1px #888;
     color: #eee;
 }
 
 .navigation_panel .link:first-child {
     border-right: 1px solid #fff;
     font-weight: bold;
     margin-right: 1ex;
     padding-right: 1ex;
 }
 
 .navigation_panel .right-link {
     border-left: 1px solid #fff;
     border-right: none;
     float: right;
     margin-left: 1ex;
     margin-right: 0;
     padding-left: 1ex;
     padding-right: 0;
 }
 
 .navigation_panel .link {
     font-weight: bold;
 }
 
 .navigation_panel::after, .post::after {
     clear: both;
     content: ".";
     display: block;
     height: 0;
     line-height: 0;
     visibility: hidden;
 }
 
 .header {
     border-bottom: solid 2px #ccc;
     margin-bottom: 5px;
     border-top: none;
     margin-top: 0;
 }
 
 .footer {
     border-top: solid 2px #ccc;
     margin-top: 5px;
     border-bottom: none;
     margin-bottom: 0;
 }
 
 p, .br {
     margin-top: .5em;
     margin-bottom: .5em;
 }
 
 .post-form-w {
     background: #333344;
     border-top: solid 1px #888;
     border-bottom: solid 1px #888;
     color: #fff;
     padding: 10px;
     margin-bottom: 5px;
     margin-top: 5px;
 }
 
 .form-row {
     width: 100%;
     display: table-row;
 }
 
 .form-label {
     padding: .25em 1ex .25em 0;
     vertical-align: top;
     display: table-cell;
 }
 
 .form-input {
     padding: .25em 0;
     width: 100%;
     display: table-cell;
 }
 
 .form-errors {
     font-weight: bolder;
     vertical-align: middle;
     display: table-cell;
 }
 
 .post-form input:not([name="image"]):not([type="checkbox"]):not([type="submit"]), .post-form textarea, .post-form select {
     background: #333;
     color: #fff;
     border: solid 1px;
     padding: 0;
     font: medium sans-serif;
     width: 100%;
 }
 
 .post-form textarea {
     resize: vertical;
 }
 
 .form-submit {
     display: table;
     margin-bottom: 1ex;
     margin-top: 1ex;
 }
 
 .form-title {
     font-weight: bold;
     font-size: 2ex;
     margin-bottom: 0.5ex;
 }
 
-input[type="submit"] {
+input[type="submit"], button {
     background: #222;
     border: solid 2px #fff;
     color: #fff;
     padding: 0.5ex;
 }
 
 input[type="submit"]:hover {
     background: #060;
 }
 
+button:hover {
+    background: #006;
+}
+
 blockquote {
     border-left: solid 2px;
     padding-left: 5px;
     color: #B1FB17;
     margin: 0;
 }
 
 .post > .image {
     float: left;
     margin: 0 1ex .5ex 0;
     min-width: 1px;
     text-align: center;
     display: table-row;
 }
 
 .post > .metadata {
     clear: left;
 }
 
 .get {
     font-weight: bold;
     color: #d55;
 }
 
 * {
     text-decoration: none;
 }
 
 .dead_post > .post-info {
     font-style: italic;
 }
 
 .archive_post > .post-info {
     text-decoration: line-through;
 }
 
 .mark_btn {
     border: 1px solid;
     padding: 2px 2ex;
     display: inline-block;
     margin: 0 5px 4px 0;
 }
 
 .mark_btn:hover {
     background: #555;
 }
 
 .quote {
     color: #92cf38;
     font-style: italic;
 }
 
 .multiquote {
     padding: 3px;
     display: inline-block;
     background: #222;
     border-style: solid;
     border-width: 1px 1px 1px 4px;
     font-size: 0.9em;
 }
 
 .spoiler {
     background: black;
     color: black;
     padding: 0 1ex 0 1ex;
 }
 
 .spoiler:hover {
     color: #ddd;
 }
 
 .comment {
     color: #eb2;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
 .last-replies {
     margin-left: 3ex;
     margin-right: 3ex;
     border-left: solid 1px #777;
     border-right: solid 1px #777;
 }
 
 .last-replies > .post:first-child {
     border-top: none;
 }
 
 .thread {
     margin-bottom: 3ex;
     margin-top: 1ex;
 }
 
 .post:target {
     border: solid 2px white;
 }
 
 pre{
     white-space:pre-wrap
 }
 
 li {
     list-style-position: inside;
 }
 
 .fancybox-skin {
     position: relative;
     background-color: #fff;
     color: #ddd;
     text-shadow: none;
 }
 
 .fancybox-image {
     border: 1px solid black;
 }
 
 .image-mode-tab {
     background: #444;
     color: #eee;
     margin-top: 5px;
     padding: 5px;
     border-top: 1px solid #888;
     border-bottom: 1px solid #888;
 }
 
 .image-mode-tab > label {
     margin: 0 1ex;
 }
 
 .image-mode-tab > label > input {
     margin-right: .5ex;
 }
 
 #posts-table {
     margin-top: 5px;
     margin-bottom: 5px;
 }
 
 .tag_info > h2 {
     margin: 0;
 }
 
 .post-info {
     color: #ddd;
     margin-bottom: 1ex;
 }
 
 .moderator_info {
     color: #e99d41;
     opacity: 0.4;
 }
 
 .moderator_info:hover {
     opacity: 1;
 }
 
 .refmap {
     font-size: 0.9em;
     color: #ccc;
     margin-top: 1em;
 }
 
 .fav {
     color: yellow;
 }
 
 .not_fav {
     color: #ccc;
 }
 
 .role {
     text-decoration: underline;
 }
 
 .form-email {
     display: none;
 }
 
 .bar-value {
     background: rgba(50, 55, 164, 0.45);
     font-size: 0.9em;
     height: 1.5em;
 }
 
 .bar-bg {
     position: relative;
     border-top: solid 1px #888;
     border-bottom: solid 1px #888;
     margin-top: 5px;
     overflow: hidden;
 }
 
 .bar-text {
     padding: 2px;
     position: absolute;
     left: 0;
     top: 0;
 }
 
 .page_link {
     background: #444;
     border-top: solid 1px #888;
     border-bottom: solid 1px #888;
     padding: 5px;
     color: #eee;
     font-size: 2ex;
 }
 
 .skipped_replies {
     padding: 5px;
     margin-left: 3ex;
     margin-right: 3ex;
     border-left: solid 1px #888;
     border-right: solid 1px #888;
     border-bottom: solid 1px #888;
     background: #000;
 }
 
 .current_page {
     padding: 2px;
     background-color: #afdcec;
     color: #000;
 }
 
 .current_mode {
     font-weight: bold;
 }
 
 .gallery_image {
     border: solid 1px;
     padding: 0.5ex;
     margin: 0.5ex;
     text-align: center;
 }
 
 code {
     border: dashed 1px #ccc;
     background: #111;
     padding: 2px;
     font-size: 1.2em;
     display: inline-block;
 }
 
 pre {
     overflow: auto;
 }
 
 .img-full {
     background: #222;
     border: solid 1px white;
 }
 
 .tag_item {
     display: inline-block;
 }
 
 #id_models li {
     list-style: none;
 }
 
 #id_q {
     margin-left: 1ex;
 }
 
 ul {
     padding-left: 0px;
 }
 
 .quote-header {
     border-bottom: 2px solid #ddd;
     margin-bottom: 1ex;
     padding-bottom: .5ex;
     color: #ddd;
     font-size: 1.2em;
 }
 
 /* Reflink preview */
 .post_preview {
     border-left: 1px solid #777;
     border-right: 1px solid #777;
     max-width: 600px;
 }
 
 /* Code highlighter */
 .hljs {
     color: #fff;
     background: #000;
     display: inline-block;
 }
 
 .hljs, .hljs-subst, .hljs-tag .hljs-title, .lisp .hljs-title, .clojure .hljs-built_in, .nginx .hljs-title {
     color: #fff;
 }
 
 #up {
     position: fixed;
     bottom: 5px;
     right: 5px;
     border: 1px solid #777;
     background: #000;
     padding: 4px;
 }
 
 .user-cast {
     border: solid #ffffff 1px;
     padding: .2ex;
     background: #152154;
     color: #fff;
 }
 
 .highlight {
     background: #222;
 }
 
 .post-button-form > button:hover {
     text-decoration: underline;
 }
 
 .tree_reply > .post {
     margin-top: 1ex;
     border-left: solid 1px #777;
     padding-right: 0;
 }
 
 #preview-text {
     border: solid 1px white;
     margin: 1ex 0 1ex 0;
     padding: 1ex;
 }
 
-button {
-    border: 1px solid white;
-    margin-bottom: .5ex;
-    margin-top: .5ex;
-}
-
 .image-metadata {
     font-style: italic;
     font-size: 0.9em;
 }
 
 .tripcode {
     color: white;
 }

boards/static/js/thread_update.js

@@ -1,389 +1,411 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013-2014  neko259
 
  The JavaScript code in this page is free software: you can
  redistribute it and/or modify it under the terms of the GNU
  General Public License (GNU GPL) as published by the Free Software
  Foundation, either version 3 of the License, or (at your option)
  any later version.  The code is distributed WITHOUT ANY WARRANTY;
  without even the implied warranty of MERCHANTABILITY or FITNESS
  FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
 
  As additional permission under GNU GPL version 3 section 7, you
  may distribute non-source (e.g., minimized or compacted) forms of
  that code without the copy of the GNU GPL normally required by
  section 4, provided you include this license notice and a URL
  through which recipients can access the Corresponding Source.
 
  @licend  The above is the entire license notice
  for the JavaScript code in this page.
  */
 
 var CLASS_POST = '.post'
 
 var POST_ADDED = 0;
 var POST_UPDATED = 1;
 
 var JS_AUTOUPDATE_PERIOD = 20000;
 
 var wsUser = '';
 
 var unreadPosts = 0;
 var documentOriginalTitle = '';
 
 // Thread ID does not change, can be stored one time
 var threadId = $('div.thread').children(CLASS_POST).first().attr('id');
 
 /**
  * Connect to websocket server and subscribe to thread updates. On any update we
  * request a thread diff.
  *
  * @returns {boolean} true if connected, false otherwise
  */
 function connectWebsocket() {
     var metapanel = $('.metapanel')[0];
 
     var wsHost = metapanel.getAttribute('data-ws-host');
     var wsPort = metapanel.getAttribute('data-ws-port');
 
     if (wsHost.length > 0 && wsPort.length > 0) {
         var centrifuge = new Centrifuge({
             "url": 'ws://' + wsHost + ':' + wsPort + "/connection/websocket",
             "project": metapanel.getAttribute('data-ws-project'),
             "user": wsUser,
             "timestamp": metapanel.getAttribute('data-ws-token-time'),
             "token": metapanel.getAttribute('data-ws-token'),
             "debug": false
         });
 
         centrifuge.on('error', function(error_message) {
             console.log("Error connecting to websocket server.");
             console.log(error_message);
             console.log("Using javascript update instead.");
 
             // If websockets don't work, enable JS update instead
             enableJsUpdate()
         });
 
         centrifuge.on('connect', function() {
             var channelName = 'thread:' + threadId;
             centrifuge.subscribe(channelName, function(message) {
                 getThreadDiff();
             });
 
             // For the case we closed the browser and missed some updates
             getThreadDiff();
             $('#autoupdate').hide();
         });
 
         centrifuge.connect();
 
         return true;
     } else {
         return false;
     }
 }
 
 /**
  * Get diff of the posts from the current thread timestamp.
  * This is required if the browser was closed and some post updates were
  * missed.
  */
 function getThreadDiff() {
     var lastUpdateTime = $('.metapanel').attr('data-last-update');
     var lastPostId = $('.post').last().attr('id');
 
     var uids = '';
     var posts = $('.post');
     for (var i = 0; i < posts.length; i++) {
         uids += posts[i].getAttribute('data-uid') + ' ';
     }
 
     var data = {
         uids: uids,
         thread: threadId
     }
 
     var diffUrl = '/api/diff_thread/';
 
     $.post(diffUrl,
         data,
         function(data) {
             var updatedPosts = data.updated;
             var addedPostCount = 0;
 
             for (var i = 0; i < updatedPosts.length; i++) {
                 var postText = updatedPosts[i];
                 var post = $(postText);
 
                 if (updatePost(post) == POST_ADDED) {
                     addedPostCount++;
                 }
             }
 
             var hasMetaUpdates = updatedPosts.length > 0;
             if (hasMetaUpdates) {
                 updateMetadataPanel();
             }
 
             if (addedPostCount > 0) {
                 updateBumplimitProgress(addedPostCount);
             }
 
             if (updatedPosts.length > 0) {
                 showNewPostsTitle(addedPostCount);
             }
 
             // TODO Process removed posts if any
             $('.metapanel').attr('data-last-update', data.last_update);
         },
         'json'
     )
 }
 
 /**
  * Add or update the post on html page.
  */
 function updatePost(postHtml) {
     // This needs to be set on start because the page is scrolled after posts
     // are added or updated
     var bottom = isPageBottom();
 
     var post = $(postHtml);
 
     var threadBlock = $('div.thread');
 
     var postId = post.attr('id');
 
     // If the post already exists, replace it. Otherwise add as a new one.
     var existingPosts = threadBlock.children('.post[id=' + postId + ']');
 
     var type;
 
     if (existingPosts.size() > 0) {
-        existingPosts.replaceWith(post);
+        replacePartial(existingPosts.first(), post);
 
         type = POST_UPDATED;
     } else {
         post.appendTo(threadBlock);
 
         if (bottom) {
             scrollToBottom();
         }
 
         type = POST_ADDED;
     }
 
     processNewPost(post);
 
     return type;
 }
 
 /**
  * Initiate a blinking animation on a node to show it was updated.
  */
 function blink(node) {
     var blinkCount = 2;
 
     var nodeToAnimate = node;
     for (var i = 0; i < blinkCount; i++) {
         nodeToAnimate = nodeToAnimate.fadeTo('fast', 0.5).fadeTo('fast', 1.0);
     }
 }
 
 function isPageBottom() {
     var scroll = $(window).scrollTop() / ($(document).height()
         - $(window).height());
 
     return scroll == 1
 }
 
 function enableJsUpdate() {
     setInterval(getThreadDiff, JS_AUTOUPDATE_PERIOD);
     return true;
 }
 
 function initAutoupdate() {
     if (location.protocol === 'https:') {
         return enableJsUpdate();
     } else {
         if (connectWebsocket()) {
             return true;
         } else {
             return enableJsUpdate();
         }
     }
 }
 
 function getReplyCount() {
     return $('.thread').children(CLASS_POST).length
 }
 
 function getImageCount() {
     return $('.thread').find('img').length
 }
 
 /**
  * Update post count, images count and last update time in the metadata
  * panel.
  */
 function updateMetadataPanel() {
     var replyCountField = $('#reply-count');
     var imageCountField = $('#image-count');
 
     replyCountField.text(getReplyCount());
     imageCountField.text(getImageCount());
 
     var lastUpdate = $('.post:last').children('.post-info').first()
         .children('.pub_time').first().html();
     if (lastUpdate !== '') {
         var lastUpdateField = $('#last-update');
         lastUpdateField.html(lastUpdate);
         blink(lastUpdateField);
     }
 
     blink(replyCountField);
     blink(imageCountField);
 }
 
 /**
  * Update bumplimit progress bar
  */
 function updateBumplimitProgress(postDelta) {
     var progressBar = $('#bumplimit_progress');
     if (progressBar) {
         var postsToLimitElement = $('#left_to_limit');
 
         var oldPostsToLimit = parseInt(postsToLimitElement.text());
         var postCount = getReplyCount();
         var bumplimit = postCount - postDelta + oldPostsToLimit;
 
         var newPostsToLimit = bumplimit - postCount;
         if (newPostsToLimit <= 0) {
             $('.bar-bg').remove();
         } else {
             postsToLimitElement.text(newPostsToLimit);
             progressBar.width((100 - postCount / bumplimit * 100.0) + '%');
         }
     }
 }
 
 /**
  * Show 'new posts' text in the title if the document is not visible to a user
  */
 function showNewPostsTitle(newPostCount) {
     if (document.hidden) {
         if (documentOriginalTitle === '') {
             documentOriginalTitle = document.title;
         }
         unreadPosts = unreadPosts + newPostCount;
 
         var newTitle = '* ';
         if (unreadPosts > 0) {
             newTitle += '[' + unreadPosts + '] ';
         }
         newTitle += documentOriginalTitle;
 
         document.title = newTitle;
 
         document.addEventListener('visibilitychange', function() {
             if (documentOriginalTitle !== '') {
                 document.title = documentOriginalTitle;
                 documentOriginalTitle = '';
                 unreadPosts = 0;
             }
 
             document.removeEventListener('visibilitychange', null);
         });
     }
 }
 
 /**
  * Clear all entered values in the form fields
  */
 function resetForm(form) {
     form.find('input:text, input:password, input:file, select, textarea').val('');
     form.find('input:radio, input:checkbox')
              .removeAttr('checked').removeAttr('selected');
     $('.file_wrap').find('.file-thumb').remove();
     $('#preview-text').hide();
 }
 
 /**
  * When the form is posted, this method will be run as a callback
  */
 function updateOnPost(response, statusText, xhr, form) {
     var json = $.parseJSON(response);
     var status = json.status;
 
     showAsErrors(form, '');
 
     if (status === 'ok') {
         resetFormPosition();
         resetForm(form);
         getThreadDiff();
         scrollToBottom();
     } else {
         var errors = json.errors;
         for (var i = 0; i < errors.length; i++) {
             var fieldErrors = errors[i];
 
             var error = fieldErrors.errors;
 
             showAsErrors(form, error);
         }
     }
 }
 
 /**
  * Show text in the errors row of the form.
  * @param form
  * @param text
  */
 function showAsErrors(form, text) {
     form.children('.form-errors').remove();
 
     if (text.length > 0) {
         var errorList = $('<div class="form-errors">' + text + '<div>');
         errorList.appendTo(form);
     }
 }
 
 /**
  * Run js methods that are usually run on the document, on the new post
  */
 function processNewPost(post) {
     addRefLinkPreview(post[0]);
     highlightCode(post);
     blink(post);
 }
 
+function replacePartial(oldNode, newNode) {
+    var oldContent = oldNode[0].outerHTML;
+    var newContent = newNode[0].outerHTML;
+
+    // TODO Handle different children sizes
+
+    if (oldContent != newContent) {
+        var children = oldNode.children();
+        if (children.length == 0) {
+            console.log(oldContent);
+            console.log(newContent)
+
+            oldNode.replaceWith(newNode);
+        } else {
+            var newChildren = newNode.children();
+            children.each(function(i) {
+                replacePartial(children.eq(i), newChildren.eq(i));
+            });
+        }
+    }
+}
+
 $(document).ready(function(){
     if (initAutoupdate()) {
         // Post form data over AJAX
         var threadId = $('div.thread').children('.post').first().attr('id');
 
         var form = $('#form');
 
         if (form.length > 0) {
             var options = {
                 beforeSubmit: function(arr, $form, options) {
                     showAsErrors($('form'), gettext('Sending message...'));
                 },
                 success: updateOnPost,
                 error: function() {
                     showAsErrors($('form'), gettext('Server error!'));
                 },
                 url: '/api/add_post/' + threadId + '/'
             };
 
             form.ajaxForm(options);
 
             resetForm(form);
         }
     }
 });

boards/templates/boards/all_threads.html

@@ -1,186 +1,186 b''
 {% extends "boards/base.html" %}
 
 {% load i18n %}
 {% load board %}
 {% load static %}
 {% load tz %}
 
 {% block head %}
     <meta name="robots" content="noindex">
 
     {% if tag %}
         <title>{{ tag.name }} - {{ site_name }}</title>
     {% else %}
         <title>{{ site_name }}</title>
     {% endif %}
 
     {% if prev_page_link %}
         <link rel="prev" href="{{ prev_page_link }}" />
     {% endif %}
     {% if next_page_link %}
         <link rel="next" href="{{ next_page_link }}" />
     {% endif %}
 
 {% endblock %}
 
 {% block content %}
 
     {% get_current_language as LANGUAGE_CODE %}
     {% get_current_timezone as TIME_ZONE %}
 
     {% for banner in banners %}
         <div class="post">
             <div class="title">{{ banner.title }}</div>
             <div>{{ banner.text }}</div>
             <div>{% trans 'Related message' %}: <a href="{{ banner.post.get_absolute_url }}">>>{{ banner.post.id }}</a></div>
         </div>
     {% endfor %}
 
 {% if tag %}
     <div class="tag_info">
         {% if random_image_post %}
             <div class="tag-image">
                 {% with image=random_image_post.images.first %}
                     <a href="{{ random_image_post.get_absolute_url }}"><img 
                         src="{{ image.image.url_200x150 }}"
                         width="{{ image.pre_width }}"
                         height="{{ image.pre_height }}"/></a>
                 {% endwith %}
             </div>
         {% endif %}
         <div class="tag-text-data">
             <h2>
                 <form action="{% url 'tag' tag.name %}" method="post" class="post-button-form">
                     {% if is_favorite %}
                         <button name="method" value="unsubscribe" class="fav">★</button>
                     {% else %}
                         <button name="method" value="subscribe" class="not_fav">★</button>
                     {% endif %}
                 </form>
                 <form action="{% url 'tag' tag.name %}" method="post" class="post-button-form">
                     {% if is_hidden %}
                         <button name="method" value="unhide" class="fav">H</button>
                     {% else %}
                         <button name="method" value="hide" class="not_fav">H</button>
                     {% endif %}
                 </form>
                 {{ tag.get_view|safe }}
                 {% if moderator %}
                 <span class="moderator_info">| <a href="{% url 'admin:boards_tag_change' tag.id %}">{% trans 'Edit tag' %}</a></span>
                 {% endif %}
             </h2>
             {% if tag.get_description %}
                 <p>{{ tag.get_description|safe }}</p>
             {% endif %}
             <p>{% blocktrans with active_thread_count=tag.get_active_thread_count thread_count=tag.get_thread_count post_count=tag.get_post_count %}This tag has {{ thread_count }} threads ({{ active_thread_count}} active) and {{ post_count }} posts.{% endblocktrans %}</p>
             {% if related_tags %}
                 <p>{% trans 'Related tags:' %}
                 {% for rel_tag in related_tags %}
                     {{ rel_tag.get_view|safe }}{% if not forloop.last %}, {% else %}.{% endif %}
                 {% endfor %}
                 </p>
             {% endif %}
         </div>
     </div>
 {% endif %}
 
     {% if threads %}
         {% if prev_page_link %}
             <div class="page_link">
                 <a href="{{ prev_page_link }}">{% trans "Previous page" %}</a>
             </div>
         {% endif %}
 
         {% for thread in threads %}
             <div class="thread">
                 {% post_view thread.get_opening_post moderator=moderator is_opening=True thread=thread truncated=True need_open_link=True %}
                 {% if not thread.archived %}
                     {% with last_replies=thread.get_last_replies %}
                         {% if last_replies %}
                             {% with skipped_replies_count=thread.get_skipped_replies_count %}
                                 {% if skipped_replies_count %}
                                     <div class="skipped_replies">
                                         <a href="{% url 'thread' thread.get_opening_post_id %}">
                                             {% blocktrans with count=skipped_replies_count %}Skipped {{ count }} replies. Open thread to see all replies.{% endblocktrans %}
                                         </a>
                                     </div>
                                 {% endif %}
                             {% endwith %}
                             <div class="last-replies">
                                 {% for post in last_replies %}
                                     {% post_view post is_opening=False moderator=moderator truncated=True %}
                                 {% endfor %}
                             </div>
                         {% endif %}
                     {% endwith %}
                 {% endif %}
             </div>
         {% endfor %}
 
         {% if next_page_link %}
             <div class="page_link">
                 <a href="{{ next_page_link }}">{% trans "Next page" %}</a>
             </div>
         {% endif %}
     {% else %}
         <div class="post">
             {% trans 'No threads exist. Create the first one!' %}</div>
     {% endif %}
 
     <div class="post-form-w">
         <script src="{% static 'js/panel.js' %}"></script>
         <div class="post-form">
             <div class="form-title">{% trans "Create new thread" %}</div>
             <div class="swappable-form-full">
             <form enctype="multipart/form-data" method="post" id="form">{% csrf_token %}
                 {{ form.as_div }}
                 <div class="form-submit">
                     <input type="submit" value="{% trans "Post" %}"/>
+                    <button id="preview-button" onclick="return false;">{% trans 'Preview' %}</button>
                 </div>
             </form>
             </div>
             <div>
                 {% trans 'Tags must be delimited by spaces. Text or image is required.' %}
             </div>
-            <div><button id="preview-button">{% trans 'Preview' %}</button></div>
             <div id="preview-text"></div>
             <div><a href="{% url "staticpage" name="help" %}">{% trans 'Text syntax' %}</a></div>
             <div><a href="{% url "tags" "required" %}">{% trans 'Tags' %}</a></div>
         </div>
     </div>
 
     <script src="{% static 'js/form.js' %}"></script>
     <script src="{% static 'js/thread_create.js' %}"></script>
 
 {% endblock %}
 
 {% block metapanel %}
 
     <span class="metapanel">
         <b><a href="{% url "authors" %}">{{ site_name }}</a> {{ version }}</b>
         {% trans "Pages:" %}
         [
         {% with dividers=paginator.get_dividers %}
             {% for page in paginator.get_divided_range %}
                 {% if page in dividers %}
                     …,
                 {% endif %}
                 <a
                     {% ifequal page current_page.number %}
                         class="current_page"
                     {% endifequal %}
                     href="
                 {% if tag %}
                 {% url "tag" tag_name=tag.name %}?page={{ page }}
                 {% else %}
                     {% url "index" %}?page={{ page }}
                 {% endif %}
                 ">{{ page }}</a>
                 {% if not forloop.last %},{% endif %}
             {% endfor %}
         {% endwith %}
         ]
         [<a href="rss/">RSS</a>]
     </span>
 
 {% endblock %}

boards/templates/boards/thread_normal.html

@@ -1,57 +1,57 b''
 {% extends "boards/thread.html" %}
 
 {% load i18n %}
 {% load static from staticfiles %}
 {% load board %}
 {% load tz %}
 
 {% block thread_content %}
     {% get_current_language as LANGUAGE_CODE %}
     {% get_current_timezone as TIME_ZONE %}
 
     {% if bumpable and thread.has_post_limit %}
         <div class="bar-bg">
             <div class="bar-value" style="width:{{ bumplimit_progress }}%" id="bumplimit_progress">
             </div>
             <div class="bar-text">
                 <span id="left_to_limit">{{ posts_left }}</span> {% trans 'posts to bumplimit' %}
             </div>
         </div>
     {% endif %}
 
     <div class="thread">
         {% for post in thread.get_replies %}
             {% post_view post moderator=moderator reply_link=True %}
         {% endfor %}
     </div>
 
     {% if not thread.archived %}
         <div class="post-form-w">
             <script src="{% static 'js/panel.js' %}"></script>
             <div class="form-title">{% trans "Reply to thread" %} #{{ opening_post.id }}<span class="reply-to-message"> {% trans "to message " %} #<span id="reply-to-message-id"></span></span></div>
             <div class="post-form" id="compact-form">
                 <div class="swappable-form-full">
                     <form enctype="multipart/form-data" method="post" id="form">{% csrf_token %}
                         <div class="compact-form-text"></div>
                         {{ form.as_div }}
                         <div class="form-submit">
                             <input type="submit" value="{% trans "Post" %}"/>
+                            <button id="preview-button" onclick="return false;">{% trans 'Preview' %}</button>
                         </div>
                     </form>
                 </div>
-                <div><button id="preview-button">{% trans 'Preview' %}</button></div>
                 <div id="preview-text"></div>
                 <div><a href="{% url "staticpage" name="help" %}">
                     {% trans 'Text syntax' %}</a></div>
                 <div><a id="form-close-button" href="#" onClick="resetFormPosition(); return false;">{% trans 'Close form' %}</a></div>
             </div>
         </div>
 
         <script src="{% static 'js/jquery.form.min.js' %}"></script>
     {% endif %}
 
     <script src="{% static 'js/form.js' %}"></script>
     <script src="{% static 'js/thread.js' %}"></script>
     <script src="{% static 'js/thread_update.js' %}"></script>
     <script src="{% static 'js/3party/centrifuge.js' %}"></script>
 {% endblock %}