Parse text with <p> tag. Use single newline after replying a post. Removed

striped form error message background

boards/mdx_neboard.py

@@ -1,152 +1,152 b''
 # coding=utf-8
 
 import re
 import bbcode
 
 import boards
 
 
 __author__ = 'neko259'
 
 
 REFLINK_PATTERN = re.compile(r'\d+')
 
 
 class TextFormatter():
     """
     An interface for formatter that can be used in the text format panel
     """
 
     def __init__(self):
         pass
 
     name = ''
 
     # Left and right tags for the button preview
     preview_left = ''
     preview_right = ''
 
     # Left and right characters for the textarea input
     format_left = ''
     format_right = ''
 
 
 class AutolinkPattern():
     def handleMatch(self, m):
         link_element = etree.Element('a')
         href = m.group(2)
         link_element.set('href', href)
         link_element.text = href
 
         return link_element
 
 
 class QuotePattern(TextFormatter):
     name = 'q'
     preview_left = '<span class="multiquote">'
     preview_right = '</span>'
 
     format_left = '[quote]'
     format_right = '[/quote]'
 
 
 class SpoilerPattern(TextFormatter):
     name = 'spoiler'
     preview_left = '<span class="spoiler">'
     preview_right = '</span>'
 
     format_left = '[spoiler]'
     format_right = '[/spoiler]'
 
     def handleMatch(self, m):
         quote_element = etree.Element('span')
         quote_element.set('class', 'spoiler')
         quote_element.text = m.group(2)
 
         return quote_element
 
 
 class CommentPattern(TextFormatter):
     name = ''
     preview_left = '<span class="comment">// '
     preview_right = '</span>'
 
     format_left = '[comment]'
     format_right = '[/comment]'
 
 
 class StrikeThroughPattern(TextFormatter):
     name = 's'
     preview_left = '<span class="strikethrough">'
     preview_right = '</span>'
 
     format_left = '[s]'
     format_right = '[/s]'
 
 
 class ItalicPattern(TextFormatter):
     name = 'i'
     preview_left = '<i>'
     preview_right = '</i>'
 
     format_left = '[i]'
     format_right = '[/i]'
 
 
 class BoldPattern(TextFormatter):
     name = 'b'
     preview_left = '<b>'
     preview_right = '</b>'
 
     format_left = '[b]'
     format_right = '[/b]'
 
 
 class CodePattern(TextFormatter):
     name = 'code'
     preview_left = '<code>'
     preview_right = '</code>'
 
     format_left = '[code]'
     format_right = '[/code]'
 
 
 def render_reflink(tag_name, value, options, parent, context):
     if not REFLINK_PATTERN.match(value):
         return u'>>%s' % value
 
     post_id = int(value)
 
     posts = boards.models.Post.objects.filter(id=post_id)
     if posts.exists():
         post = posts[0]
 
         return u'<a href=%s>&gt;&gt;%s</a>' % (post.get_url(), post_id)
     else:
         return u'>>%s' % value
 
 
 def bbcode_extended(markup):
-    parser = bbcode.Parser()
+    parser = bbcode.Parser(newline='</p><p>')
     parser.add_formatter('post', render_reflink, strip=True)
     parser.add_simple_formatter('quote',
             u'<span class="multiquote">%(value)s</span>')
     parser.add_simple_formatter('comment',
             u'<span class="comment">//%(value)s</span>')
     parser.add_simple_formatter('spoiler',
             u'<span class="spoiler">%(value)s</span>')
     parser.add_simple_formatter('s',
             u'<span class="strikethrough">%(value)s</span>')
     parser.add_simple_formatter('code',
             u'<pre><code>%(value)s</pre></code>')
-    return parser.format(markup)
+    return '<p>%s</p>' % parser.format(markup)
 
 formatters = [
     QuotePattern,
     SpoilerPattern,
     ItalicPattern,
     BoldPattern,
     CommentPattern,
     StrikeThroughPattern,
     CodePattern,
 ]

boards/static/css/md/base_page.css

@@ -1,448 +1,440 b''
 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: #444;
     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;
 }
 
 p {
     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;
-    padding: 3px;
-    background: repeating-linear-gradient(
-        -45deg,
-        #330,
-        #330 10px,
-        #111 10px,
-        #111 20px
-    );
 }
 
 .post-form input:not([name="image"]), .post-form textarea {
     background: #333;
     color: #fff;
     border: solid 1px;
     padding: 0;
     font: medium sans-serif;
     width: 100%;
 }
 
 .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 {
     border-left: solid 4px #ccc;
     padding: 3px;
     display: inline-block;
     background: #222;
     border-right: solid 1px #ccc;
     border-top: solid 1px #ccc;
     border-bottom: solid 1px #ccc;
 }
 
 .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;
 }
 
 .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;
 }
 
 .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;
 }
 
 .footer {
     margin: 5px;
 }
 
 .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 {
     margin: 5px;
 }
 
 .current_page {
     border: solid 1px #afdcec;
     padding: 2px;
 }
 
 .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;
     border: 1px dashed #666;
     margin: 0.2ex;
     padding: 0.1ex;
 }
 
 #id_models li {
     list-style: none;
 }
 
 #id_q {
     margin-left: 1ex;
 }
 
 ul {
     padding-left: 0px;
 }
 
 /* Reflink preview */
 .post_preview {
     border-left: 1px solid #777;
     border-right: 1px solid #777;
 }
 
 /* Code highlighter */
 .hljs {
     color: #fff;
     background: #000;
     display: inline-block;
 }

boards/static/js/thread.js

@@ -1,61 +1,61 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.
  */
 
 function moveCaretToEnd(el) {
         if (typeof el.selectionStart == "number") {
             el.selectionStart = el.selectionEnd = el.value.length;
         } else if (typeof el.createTextRange != "undefined") {
             el.focus();
             var range = el.createTextRange();
             range.collapse(false);
             range.select();
         }
 }
 
 function addQuickReply(postId) {
-    var textToAdd = '[post]' + postId + '[/post]\n\n';
+    var textToAdd = '[post]' + postId + '[/post]\n';
     var selection = window.getSelection().toString();
     if (selection.length > 0) {
-        textToAdd += '[quote]' + selection + '[/quote]\n\n';
+        textToAdd += '[quote]' + selection + '[/quote]\n';
     }
 
     var textAreaId = 'textarea';
     $(textAreaId).val($(textAreaId).val()+ textToAdd);
 
     var textarea = document.getElementsByTagName('textarea')[0];
     $(textAreaId).focus();
     moveCaretToEnd(textarea);
 
     $("html, body").animate({ scrollTop: $(textAreaId).offset().top }, "slow");
 }
 
 function scrollToBottom() {
     var $target = $('html,body');
     $target.animate({scrollTop: $target.height()}, "fast");
 }
 
 $(document).ready(function() {
     swapForm();
 })