Don't use JS and links in tag buttons. Use <button> instead

boards/static/css/base.css

@@ -1,91 +1,93 b''
 .ui-button {
    display: none;
 }
 
 .ui-dialog-content {
     padding: 0;
     min-height: 0;
 }
 
 .mark_btn {
     cursor: pointer;
 }
 
 .img-full {
     position: fixed;
     background-color: #CCC;
     border: 1px solid #000;
     cursor: pointer;
 }
 
 .strikethrough {
     text-decoration: line-through;
 }
 
 .post_preview {
     z-index: 300;
     position:absolute;
 }
 
 .gallery_image {
     display: inline-block;
 }
 
 @media print {
     .post-form-w {
         display: none;
     }
 }
 
 input[name="image"] {
      display: block;
      width: 100px;
      height: 100px;
      cursor: pointer;
      position: absolute;
      opacity: 0;
      z-index: 1;
 }
 
 .file_wrap {
      width: 100px;
      height: 100px;
      border: solid 1px white;
      display: inline-block;
 }
 
 form > .file_wrap {
     float: left;
 }
 
 .file-thumb {
     width: 100px;
     height: 100px;
     background-size: cover;
     background-position: center;
 }
 
 .compact-form-text {
     margin-left:110px;
 }
 
 textarea, input {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
 }
 
 .compact-form-text > textarea {
     height: 100px;
     width: 100%;
 }
 
 .post-button-form {
     display: inline;
 }
 
-.post-button-form > input[type="submit"] {
+.post-button-form > button {
     border: none;
-    margin: 0;
-    padding: 0;
+    margin: inherit;
+    padding: inherit;
+    background: none;
+    font-size: inherit;
 }

boards/static/css/md/base_page.css

@@ -1,511 +1,515 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 {
     border-right: 1px solid #fff;
     font-weight: bold;
     margin-right: 1ex;
     padding-right: 1ex;
 }
 .navigation_panel .link:last-child {
     border-left: 1px solid #fff;
     border-right: none;
     float: right;
     margin-left: 1ex;
     margin-right: 0;
     padding-left: 1ex;
     padding-right: 0;
 }
 
 .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%;
 }
 
 .form-label {
     padding: .25em 1ex .25em 0;
     vertical-align: top;
 }
 
 .form-input {
     padding: .25em 0;
 }
 
 .form-errors {
     font-weight: bolder;
     vertical-align: middle;
 }
 
 .post-form input:not([name="image"]), .post-form textarea {
     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;
 }
 
 .post-form input[type="submit"], input[type="submit"] {
     background: #222;
     border: solid 2px #fff;
     color: #fff;
     padding: 0.5ex;
 }
 
 input[type="submit"]:hover {
     background: #060;
 }
 
 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 {
     background-color: #442222;
 }
 
 .archive_post {
     background-color: #000;
 }
 
 .mark_btn {
     border: 1px solid;
     min-width: 2ex;
     padding: 2px 2ex;
 }
 
 .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: white;
     color: white;
 }
 
 .spoiler:hover {
     color: black;
 }
 
 .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;
     float: right;
     font-weight: bold;
     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;
     margin: 0.2ex;
     padding: 0.1ex;
 }
 
 #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;
 }
 
 /* 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-color: #222;
 }
+
+.post-button-form > button:hover {
+    text-decoration: underline;
+}

boards/static/css/sw/base_page.css

@@ -1,399 +1,403 b''
 * {
     font-size: inherit;
     margin: 0;
     padding: 0;
 }
 html {
     background: #fff;
     color: #000;
     font: medium sans-serif;
 }
 a {
     color: inherit;
     text-decoration: underline;
 }
 li {
     list-style-position: inside;
 }
 
 #admin_panel {
     background: #182F6F;
     color: #fff;
     padding: .5ex 1ex .5ex 1ex;
 }
 
 .navigation_panel {
     background: #182F6F;
     color: #B4CFEC;
     margin-bottom: 1em;
     padding: .5ex 1ex 1ex 1ex;
 }
 .navigation_panel::after {
     clear: both;
     content: ".";
     display: block;
     height: 0;
     line-height: 0;
     visibility: hidden;
 }
 
 .navigation_panel a:link, .navigation_panel a:visited, .navigation_panel a:hover {
     text-decoration: none;
 }
 
 .navigation_panel .link {
     border-right: 1px solid #fff;
     color: #fff;
     font-weight: bold;
     margin-right: 1ex;
     padding-right: 1ex;
 }
 .navigation_panel .link:last-child {
     border-left: 1px solid #fff;
     border-right: none;
     float: right;
     margin-left: 1ex;
     margin-right: 0;
     padding-left: 1ex;
     padding-right: 0;
 }
 
 .navigation_panel .tag {
     color: #fff;
 }
 
 .input_field {
 
 }
 
 .input_field_name {
 
 }
 
 .input_field_error {
     color: #FF0000;
 }
 
 
 .title {
     color: #182F6F;
     font-weight: bold;
 }
 
 .post-form-w {
     background: #182F6F;
     border-radius: 1ex;
     color: #fff;
     margin: 1em 1ex;
     padding: 1ex;
 }
 
 .form-row {
     display: table;
     width: 100%;
 }
 .form-label, .form-input {
     display: table-cell;
     vertical-align: top;
 }
 .form-label {
     padding: .25em 1ex .25em 0;
     width: 14ex;
 }
 .form-input {
     padding: .25em 0;
 }
 .form-input > * {
     background: #fff;
     color: #000;
     border: none;
     padding: 0;
     resize: vertical;
 }
 
 .form-input > :not(.file_wrap) {
     width: 100%;
 }
 
 .form-submit {
     border-bottom: 1px solid #666;
     margin-bottom: .5em;
     padding-bottom: .5em;
 }
 .form-title {
     font-weight: bold;
     margin-bottom: .5em;
 }
 .post-form .settings_item {
     margin: .5em 0;
 }
 .form-submit input {
     margin-top: .5em;
     padding: .2em 1ex;
 }
 .form-label {
     text-align: left;
 }
 
 .block {
     display: inline-block;
     vertical-align: top;
 }
 
 .post_id {
     color: #a00;
 }
 
 .post {
     clear: left;
     margin: 0 1ex 1em 1ex;
     overflow-x: auto;
     word-wrap: break-word;
     background: #FFF;
     padding: 1ex;
     border: 1px solid #666;
     box-shadow: 1px 1px 2px 1px #666;
 }
 
 #posts > .post:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }
 
 .metadata {
     background: #C0E4E8;
     border: 1px solid #7F9699;
     border-radius: .4ex;
     display: table;
     margin-top: .5em;
     padding: .4em;
 }
 
 .post ul, .post ol {
     margin: .5em 0 .5em 3ex;
 }
 .post li {
     margin: .2em 0;
 }
 .post p {
     margin: .5em 0;
 }
 .post blockquote {
     border-left: 3px solid #182F6F;
     margin: .5em 0 .5em 3ex;
     padding-left: 1ex;
 }
 .post blockquote > blockquote {
     padding-top: .1em;
 }
 
 .post > .image {
     float: left;
     margin-right: 1ex;
 }
 .post > .metadata {
     clear: left;
 }
 
 .post > .message .get {
     color: #182F6F; font-weight: bold;
 }
 
 .dead_post > .metadata {
     background: #eee;
 }
 
 .quote, .multiquote {
     color: #182F6F;
 }
 
 .spoiler {
     background: black;
     color: black;
 }
 
 .spoiler:hover {
     background: #ffffff;
 }
 
 .comment {
     color: #557055;
 }
 
 .last-replies {
     margin-left: 6ex;
 }
 
 .thread > .post > .message > .post-info {
     border-bottom: 1px solid #ccc;
     padding-bottom: .5em;
 }
 
 :target .post_id {
     background: #182F6F;
     color: #FFF;
     text-decoration: none;
 }
 
 .image-mode-tab {
     background: #182F6F;
     color: #FFF;
     display: table;
     margin: 1em auto 1em 0;
     padding: .2em .5ex;
 }
 
 .image-mode-tab > label {
     margin: 0 1ex;
 }
 
 .image-mode-tab > label > input {
     margin-right: .5ex;
 }
 
 .tag_info, .page_link {
     margin: 1em 0;
     text-align: center;
 }
 
 .form-errors {
     margin-left: 1ex;
 }
 
 .moderator_info {
     font-weight: bold;
     float: right;
 }
 
 .refmap {
     border: 1px dashed #aaa;
     padding: 0.5em;
     display: table;
 }
 
 .fav {
     color: blue;
 }
 
 .not_fav {
     color: #ccc;
 }
 
 .role {
     text-decoration: underline;
 }
 
 .form-email {
     display: none;
 }
 
 .bar-value {
     background: #E3E7F2;
     padding: .1em 1ex;
     moz-box-sizing: border-box;
     box-sizing: border-box;
     height: 1.5em;
 }
 
 .bar-bg {
     background: #EA4649;
     border: 1px solid #666;
     margin: 0 1ex 1em 1ex;
     position: relative;
     overflow: hidden;
 }
 
 .bar-text {
     padding: 2px;
     position: absolute;
     left: 0;
     top: 0;
 }
 
 .skipped_replies {
     margin: 1ex;
 }
 
 #mark-panel {
     background: #eee;
     border-bottom: 1px solid #182F6F;
 }
 
 .mark_btn {
     display: inline-block;
     padding: .2em 1ex;
     border-left: 1px solid #182F6F;
 }
 
 .mark_btn:first-child {
     border-left: none;
 }
 
 .mark_btn:last-child {
     border-right: 1px solid #182F6F;
 }
 
 .current_page {
     border-bottom: 1px solid #FFF;
     padding: 0px 0.5ex;
 }
 
 .image-mode-tab a {
     text-decoration: none;
 }
 .image-mode-tab .current_mode::before {
     content: "✓ ";
     padding: 0 0 0 .5ex;
     color: #182F6F;
     background: #FFF;
 }
 .image-mode-tab .current_mode {
     padding: 0 .5ex 0 0;
     color: #182F6F;
     background: #FFF;
 }
 
 .gallery_image_metadata {
     margin-bottom: 1em;
 }
 
 .gallery_image {
     padding: 4px;
     margin: .5em 0 0 1ex;
     text-align: center;
     vertical-align: top;
 }
 
 .swappable-form-full > form {
     display: table;
     width: 100%;
 }
 
 #id_models li {
     list-style: none;
 }
 
 #id_q {
     margin-left: 1ex;
 }
 
 .br {
     margin-top: 0.5em;
     margin-bottom: 0.5em;
 }
 
 .message, .refmap {
     margin-top: .5em;
 }
 
 .user-cast {
     padding: 0.2em .5ex;
     background: #008;
     color: #FFF;
     display: inline-block;
     text-decoration: none;
 }
 
 .highlight {
     background-color: #D4F0F9;
 }
+
+.dead_post {
+    border-right: 1ex solid #666;
+}

boards/static/js/main.js

@@ -1,116 +1,99 b''
 /*
  @licstart  The following is the entire license notice for the
  JavaScript code in this page.
 
 
  Copyright (C) 2013  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.
  */
 
 if (window.Intl) {
     var LOCALE = window.navigator.language;
     var FORMATTER = new Intl.DateTimeFormat(
             LOCALE,
             {
                 weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
                 hour: 'numeric', minute: '2-digit', second: '2-digit'
             }
     );
 }
 
 /**
  * An email is a hidden file to prevent spam bots from posting. It has to be
  * hidden.
  */
 function hideEmailFromForm() {
     $('.form-email').parent().parent().hide();
 }
 
 /**
  * Highlight code blocks with code highlighter
  */
 function highlightCode(node) {
     node.find('pre code').each(function(i, e) {
         hljs.highlightBlock(e);
     });
 }
 
 /**
  * Translate timestamps to local ones for all <time> tags inside node.
  */
 function translate_time(node) {
     if (window.Intl === null) {
         return;
     }
 
     var elements;
 
     if (node === null) {
         elements = $('time');
     } else {
         elements = node.find('time');
     }
 
     if (!elements.length) {
         return;
     }
 
     elements.each(function() {
         var element = $(this);
         var dateAttr = element.attr('datetime');
         if (dateAttr) {
             var date = new Date(dateAttr);
             element.text(FORMATTER.format(date));
         }
     });
 }
 
-/**
- * We use buttons viewed as a form with link and hidden inputs to ensure
- * the search crawlers don't index or click them.
- *
- * But we need to submit the form by clicking the links. That's why these
- * handlers are here.
- */
-function addPostButtonActions() {
-    $('.post-button-form > a').each(function() {
-        $(this).click(function() {
-            $(this).parent().submit();
-        });
-    });
-}
-
 $( document ).ready(function() {
     hideEmailFromForm();
 
     $("a[href='#top']").click(function() {
         $("html, body").animate({ scrollTop: 0 }, "slow");
         return false;
     });
 
     addImgPreview();
 
     addRefLinkPreview();
 
     highlightCode($(document));
 
     translate_time(null);
-
-    addPostButtonActions();
 });

boards/templates/boards/posting_general.html

@@ -1,193 +1,188 b''
 {% extends "boards/base.html" %}
 
 {% load i18n %}
 {% load cache %}
 {% load board %}
 {% load static %}
 
 {% block head %}
     {% if tag %}
         <title>{{ tag.name }} - {{ site_name }}</title>
     {% else %}
         <title>{{ site_name }}</title>
     {% endif %}
 
     {% if current_page.has_previous %}
         <link rel="prev" href="
             {% if tag %}
                 {% url "tag" tag_name=tag.name page=current_page.previous_page_number %}
             {% else %}
                 {% url "index" page=current_page.previous_page_number %}
             {% endif %}
         " />
     {% endif %}
     {% if current_page.has_next %}
         <link rel="next" href="
             {% if tag %}
                 {% url "tag" tag_name=tag.name page=current_page.next_page_number %}
             {% else %}
                 {% url "index" page=current_page.next_page_number %}
             {% endif %}
         " />
     {% endif %}
 
 {% endblock %}
 
 {% block content %}
 
     {% get_current_language as LANGUAGE_CODE %}
 
 {% if tag %}
     <div class="tag_info">
         <h2>
             <form action="{% url 'tag' tag.name %}" method="post" class="post-button-form">
-                <input type="hidden" name="method"
                 {% if is_favorite %}
-                    <input type="hidden" name="method" value="unsubscribe" />
-                    <a class="fav" href="#">★</a>
+                    <button name="method" value="unsubscribe" class="fav">★</button>
                 {% else %}
-                    <input type="hidden" name="method" value="subscribe" />
-                    <a class="not_fav" href="#">★</a>
+                    <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 %}
-                    <input type="hidden" name="method" value="unhide" />
-                    <a class="fav" href="#">H</a>
+                    <button name="method" value="unhide" class="fav">H</button>
                 {% else %}
-                    <input type="hidden" name="method" value="hide" />
-                    <a class="not_fav" href="#">H</a>
+                    <button name="method" value="hide" class="not_fav">H</button>
                 {% endif %}
             </form>
             {% autoescape off %}
                 {{ tag.get_view }}
             {% endautoescape %}
             {% if moderator %}
             <span class="moderator_info">[<a href="{% url 'admin:boards_tag_change' tag.id %}">{% trans 'Edit tag' %}</a>]</span>
             {% endif %}
         </h2>
         <p>{% blocktrans with thread_count=tag.get_thread_count post_count=tag.get_post_count %}This tag has {{ thread_count }} threads and {{ post_count }} posts.{% endblocktrans %}</p>
     </div>
 {% endif %}
 
     {% if threads %}
         {% if current_page.has_previous %}
             <div class="page_link">
                 <a href="
             {% if tag %}
                 {% url "tag" tag_name=tag.name page=current_page.previous_page_number %}
             {% else %}
                 {% url "index" page=current_page.previous_page_number %}
             {% endif %}
                 ">{% trans "Previous page" %}</a>
             </div>
         {% endif %}
 
         {% for thread in threads %}
             {% cache 600 thread_short thread.id thread.last_edit_time moderator LANGUAGE_CODE %}
             <div class="thread">
                 {% post_view thread.get_opening_post 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>
             {% endcache %}
         {% endfor %}
 
         {% if current_page.has_next %}
             <div class="page_link">
                 <a href="
             {% if tag %}
                 {% url "tag" tag_name=tag.name page=current_page.next_page_number %}
             {% else %}
                 {% url "index" page=current_page.next_page_number %}
             {% endif %}
                 ">{% 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" %}"/>
                 </div>
                 (ctrl-enter)
             </form>
             </div>
             <div>
                 {% trans 'Tags must be delimited by spaces. Text or image is required.' %}
             </div>
             <div><a href="{% url "staticpage" name="help" %}">
                 {% trans 'Text syntax' %}</a></div>
         </div>
     </div>
 
     <script src="{% static 'js/form.js' %}"></script>
 
 {% endblock %}
 
 {% block metapanel %}
 
     <span class="metapanel">
         <b><a href="{% url "authors" %}">{{ site_name }}</a> {{ version }}</b>
         {% trans "Pages:" %}
         <a href="
             {% if tag %}
                 {% url "tag" tag_name=tag.name page=paginator.page_range|first %}
             {% else %}
                 {% url "index" page=paginator.page_range|first %}
             {% endif %}
         ">&lt;&lt;</a>
         [
         {% for page in paginator.center_range %}
             <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 %}
         ]
         <a href="
             {% if tag %}
                 {% url "tag" tag_name=tag.name page=paginator.page_range|last %}
             {% else %}
                 {% url "index" page=paginator.page_range|last %}
             {% endif %}
         ">&gt;&gt;</a>
         [<a href="rss/">RSS</a>]
     </span>
 
 {% endblock %}