Small fix for the bumplimit bar.

boards/static/css/md/base_page.css

@@ -1,334 +1,343 b''
 html {
     background: #555;
     color: #ffffff;
 }
 
 #admin_panel {
     background: #FF0000;
     color: #00FF00
 }
 
 .input_field {
 
 }
 
 .input_field_name {
 
 }
 
 .input_field_error {
     color: #FF0000;
 }
 
 
 .title {
     font-weight: bold;
     color: #ffcc00;
 }
 
 .link, a {
     color: #afdcec;
 }
 
 .block {
     display: inline-block;
     vertical-align: top;
 }
 
 .tag {
     color: #b4cfec;
 }
 
 .post_id {
     color: #fff380;
 }
 
 .post, .dead_post, #posts-table {
     background: #333;
     margin: 5px;
     padding: 10px;
     border: solid 1px #888;
     clear: left;
     word-wrap: break-word;
 }
 
 .metadata {
     padding: 5px;
     margin-top: 10px;
     border: solid 1px #666;
     font-size: 0.9em;
     color: #ddd;
     display: table;
 }
 
 .navigation_panel, .tag_info {
     background: #444;
     margin: 5px;
     padding: 10px;
     border: 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 {
     display: table;
     background: #333344;
     border: solid 1px #888;
     color: #fff;
     padding: 10px;
     margin: 5;
 }
 
 .form-row {
     display: table-row;
 }
 
 .form-label, .form-input, .form-errors {
     display: table-cell;
 }
 
 .form-label {
     padding: .25em 1ex .25em 0;
     vertical-align: top;
 }
 
 .form-input {
     padding: .25em 0;
 }
 
 .form-errors {
     padding-left: 1ex;
     font-weight: bold;
     vertical-align: middle;
 }
 
 .post-form input, .post-form textarea {
     background: #333;
     color: #fff;
     border: solid 1px;
     padding: 0;
     width: 100%;
 }
 
 .form-submit {
     border-bottom: 2px solid #ddd;
     margin-bottom: .5em;
     padding-bottom: .5em;
 }
 
 .form-title {
     font-weight: bold;
 }
 
 input[type="submit"] {
     background: #222;
     border: solid 1px #fff;
     color: #fff;
 }
 
 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;
 
     height: 150px;
 }
 
 .post > .metadata {
     clear: left;
 }
 
 .get {
     font-weight: bold;
     color: #d55;
 }
 
 * {
     text-decoration: none;
 }
 
 .dead_post {
     background-color: #442222;
 }
 
 .mark_btn {
     padding: 2px 4px;
     border: 1px solid;
 }
 
 .mark_btn:hover {
     background: #555;
 }
 
 .quote {
     color: #92cf38;
     font-style: italic;
 }
 
 .spoiler {
     background: white;
     color: white;
 }
 
 .spoiler:hover {
     color: black;
 }
 
 .comment {
     color: #eb2;
     font-style: italic;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
 .last-replies {
     margin-left: 3ex;
 }
 
 .thread {
     margin-bottom: 3ex;
 }
 
 .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;
     display: table;
     margin: 5px;
     padding: 5px;
     border: 1px solid #888;
 }
 
 .image-mode-tab > label {
     margin: 0 1ex;
 }
 
 .image-mode-tab > label > input {
     margin-right: .5ex;
 }
 
 #posts-table {
     margin: 5px;
 }
 
 .tag_info {
     display: table;
 }
 
 .tag_info > h2 {
     margin: 0;
 }
 
 .post-info {
     color: #ddd;
 }
 
 .moderator_info {
     color: #e99d41;
     float: right;
     border: dashed 1px;
     padding: 3px;
 }
 
 .refmap {
     font-size: 0.9em;
     color: #ccc;
     margin-top: 1em;
 }
 
 input[type="submit"]:hover {
         background: #555;
 }
 
 .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);
-    padding: 2px;
     font-size: 0.9em;
+    height: 1.5em;
 }
 
 .bar-bg {
+    position: relative;
     border: solid 1px #888;
     margin: 5px;
+    overflow: hidden;
+}
+
+.bar-text {
+    padding: 2px;
+    position: absolute;
+    left: 0;
+    top: 0;
 }
  No newline at end of file

boards/static/css/pg/base_page.css

@@ -1,329 +1,339 b''
 html {
     background: rgb(238, 238, 238);
     color: rgb(51, 51, 51);
 }
 
 #admin_panel {
     background: #FF0000;
     color: #00FF00
 }
 
 .input_field {
 
 }
 
 .input_field_name {
 
 }
 
 .input_field_error {
     color: #FF0000;
 }
 
 
 .title {
     font-weight: bold;
     color: #333;
     font-size: 2ex;
 }
 
 .link, a {
     color: rgb(255, 102, 0);
 }
 
 .block {
     display: inline-block;
     vertical-align: top;
 }
 
 .tag {
     color: #222;
 }
 
 .post_id:hover {
     color: #11f;
 }
 
 .post_id {
     color: #444;
 }
 
 .post, .dead_post, #posts-table {
     margin: 5px;
     padding: 10px;
     background: rgb(221, 221, 221);
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
     clear: left;
     word-wrap: break-word;
     display: table;
 }
 
 .metadata {
     padding: 5px;
     margin-top: 10px;
     border: solid 1px #666;
     font-size: 0.9em;
     display: table;
 }
 
 .navigation_panel, .tag_info {
     margin: 5px;
     padding: 10px;
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
 }
 
 .navigation_panel .link {
     border-right: 1px solid #000;
     font-weight: bold;
     margin-right: 1ex;
     padding-right: 1ex;
 }
 .navigation_panel .link:last-child {
     border-left: 1px solid #000;
     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 {
     display: table;
     padding: 10px;
     margin: 5px
 }
 
 .form-row {
     display: table-row;
 }
 
 .form-label, .form-input, .form-errors {
     display: table-cell;
 }
 
 .form-label {
     padding: .25em 1ex .25em 0;
     vertical-align: top;
 }
 
 .form-input {
     padding: .25em 0;
 }
 
 .form-errors {
     padding-left: 1ex;
     font-weight: bold;
     vertical-align: middle;
 }
 
 .post-form input, .post-form textarea {
     background: #fff;
     color: #000;
     border: solid 1px;
     padding: 0;
     width: 100%;
 }
 
 .form-submit {
     border-bottom: 2px solid #ddd;
     margin-bottom: .5em;
     padding-bottom: .5em;
 }
 
 .form-title {
     font-weight: bold;
 }
 
 input[type="submit"] {
     background: #fff;
     border: solid 1px #000;
     color: #000;
 }
 
 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;
 
     height: 150px;
 }
 
 .post > .metadata {
     clear: left;
 }
 
 .get {
     font-weight: bold;
     color: #d55;
 }
 
 * {
     text-decoration: none;
 }
 
 .dead_post {
     background-color: #ecc;
 }
 
 .quote {
     color: #080;
     font-style: italic;
 }
 
 .spoiler {
     background: white;
     color: white;
 }
 
 .spoiler:hover {
     color: black;
 }
 
 .comment {
     color: #8B6914;
     font-style: italic;
 }
 
 a:hover {
     text-decoration: underline;
 }
 
 .last-replies {
     margin-left: 3ex;
 }
 
 .thread {
     margin-bottom: 3ex;
 }
 
 .post:target {
     border: solid 2px black;
 }
 
 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 {
     display: table;
     margin: 5px;
     padding: 5px;
     background: rgb(221, 221, 221);
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
 }
 
 .image-mode-tab > label {
     margin: 0 1ex;
 }
 
 .image-mode-tab > label > input {
     margin-right: .5ex;
 }
 
 #posts-table {
     margin: 5px;
 }
 
 .tag_info {
     display: table;
 }
 
 .tag_info > h2 {
     margin: 0;
 }
 
 .moderator_info {
     color: #e99d41;
     border: dashed 1px;
     padding: 3px;
 }
 
 .refmap {
     font-size: 0.9em;
     color: #444;
     margin-top: 1em;
 }
 
 input[type="submit"]:hover {
         background: #ccc;
 }
 
 
 .fav {
     color: rgb(255, 102, 0);
 }
 
 .not_fav {
     color: #555;
 }
 
 .role {
     text-decoration: underline;
 }
 
 .form-email {
     display: none;
 }
 
 .mark_btn {
     padding: 2px 4px;
     border: 1px solid;
 }
 
 .mark_btn:hover {
     background: #ccc;
 }
 
 .bar-value {
     background: rgba(251, 199, 16, 0.61);
     padding: 2px;
     font-size: 0.9em;
+    height: 1.5em;
 }
 
 .bar-bg {
+    position: relative;
     border: 1px solid rgb(204, 204, 204);
     border-radius: 5px 5px 5px 5px;
     margin: 5px;
+    overflow: hidden;
+}
+
+.bar-text {
+    padding: 2px;
+    position: absolute;
+    left: 0;
+    top: 0;
 }
  No newline at end of file

boards/static/css/sw/base_page.css

@@ -1,298 +1,310 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;
 }
 .post-form {
     display: table;
     border-collapse: collapse;
     width: 100%;
 
 }
 .form-row {
     display: table-row;
 }
 .form-label, .form-input {
     display: table-cell;
     vertical-align: top;
 }
 .form-label {
     padding: .25em 1ex .25em 0;
 }
 .form-input {
     padding: .25em 0;
 }
 .form-input > * {
     background: #fff;
     color: #000;
     border: none;
     padding: 0;
     resize: vertical;
     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: right;
 }
 
 .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 {
     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 {
     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;
 }
  No newline at end of file

boards/templates/boards/thread.html

@@ -1,150 +1,152 b''
 {% extends "boards/base.html" %}
 
 {% load i18n %}
 {% load markup %}
 {% load cache %}
 {% load static from staticfiles %}
 
 {% block head %}
     <title>Neboard - {{ posts.0.get_title }}</title>
 {% endblock %}
 
 {% block content %}
     {% get_current_language as LANGUAGE_CODE %}
 
     <script src="{% static 'js/thread.js' %}"></script>
 
 	{% if posts %}
         {% cache 600 thread_view posts.0.last_edit_time moderator LANGUAGE_CODE %}
             {% if bumpable %}
                 <div class="bar-bg">
                     <div class="bar-value" style="width:{{ bumplimit_progress }}%">
+                    </div>
+                    <div class="bar-text">
                         {{ posts_left }} {% trans 'posts to bumplimit' %}
                     </div>
                 </div>
             {% endif %}
         <div class="thread">
 	    {% for post in posts %}
             {% if bumpable %}
                 <div class="post" id="{{ post.id }}">
             {% else %}
                 <div class="post dead_post" id="{{ post.id }}">
             {% endif %}
             {% if post.image %}
                 <div class="image">
                     <a
                             class="thumb"
                             href="{{ post.image.url }}"><img
                             src="{{ post.image.url_200x150 }}"
                             alt="{{ post.id }}"
                             data-width="{{ post.image_width }}"
                             data-height="{{ post.image_height }}"/>
                     </a>
                 </div>
             {% endif %}
             <div class="message">
                 <div class="post-info">
                     <span class="title">{{ post.title }}</span>
                     <a class="post_id" href="#{{ post.id }}">
                         (#{{ post.id }})</a>
                     [{{ post.pub_time }}]
                 [<a href="#" onclick="javascript:addQuickReply('{{ post.id }}')
                     ; return false;">&gt;&gt;</a>]
 
                     {% if moderator %}
                         <span class="moderator_info">
                             [<a href="{% url 'delete' post_id=post.id %}"
                                 >{% trans 'Delete' %}</a>]
                             ({{ post.poster_ip }})
                             [<a href="{% url 'ban' post_id=post.id %}?next={{ request.path }}"
                                 >{% trans 'Ban IP' %}</a>]
                         </span>
                     {% endif %}
                 </div>
                 {% autoescape off %}
                 {{ post.text.rendered }}
                 {% endautoescape %}
             </div>
             {% if post.id == posts.0.id %}
                 <div class="metadata">
                     <span class="tags">{% trans 'Tags' %}:
                         {% for tag in post.tags.all %}
                             <a class="tag" href="{% url 'tag' tag.name %}">
                                 {{ tag.name }}</a>
                         {% endfor %}
                     </span>
                 </div>
             {% endif %}
             </div>
 		{% endfor %}
         </div>
         {% endcache %}
 	{% endif %}
 
     <form id="form" enctype="multipart/form-data" method="post"
             >{% csrf_token %}
         <div class="post-form-w">
 	    <div class="form-title">{% trans "Reply to thread" %} #{{ posts.0.id }}</div>
             <div class="post-form">
                 <div class="form-row">
                     <div class="form-label">{% trans 'Title' %}</div>
                     <div class="form-input">{{ form.title }}</div>
                     <div class="form-errors">{{ form.title.errors }}</div>
                 </div>
                 <div class="form-row">
                     <div class="form-label">{% trans 'Formatting' %}</div>
                     <div class="form-input" id="mark_panel">
                         <span class="mark_btn" id="quote"><span class="quote">&gt;{% trans 'quote' %}</span></span>
                         <span class="mark_btn" id="italic"><i>{% trans 'italic' %}</i></span>
                         <span class="mark_btn" id="bold"><b>{% trans 'bold' %}</b></span>
                         <span class="mark_btn" id="spoiler"><span class="spoiler">{% trans 'spoiler' %}</span></span>
                         <span class="mark_btn" id="comment"><span class="comment">// {% trans 'comment' %}</span></span>
                     </div>
                 </div>
                 <div class="form-row">
                     <div class="form-label">{% trans 'Text' %}</div>
                     <div class="form-input">{{ form.text }}</div>
                     <div class="form-errors">{{ form.text.errors }}</div>
                 </div>
                 <div class="form-row">
                     <div class="form-label">{% trans 'Image' %}</div>
                     <div class="form-input">{{ form.image }}</div>
                     <div class="form-errors">{{ form.image.errors }}</div>
                 </div>
                 <div class="form-row form-email">
                     <div class="form-label">{% trans 'e-mail' %}</div>
                     <div class="form-input">{{ form.email }}</div>
                     <div class="form-errors">{{ form.email.errors }}</div>
                 </div>
                 <div class="form-row">
                     {{ form.captcha }}
                     <div class="form-errors">{{ form.captcha.errors }}</div>
                 </div>
                 <div class="form-row">
                     <div class="form-errors">{{ form.other.errors }}</div>
                 </div>
             </div>
 
             <div class="form-submit"><input type="submit"
                                             value="{% trans "Post" %}"/></div>
             <div><a href="{% url "staticpage" name="help" %}">
                 {% trans 'Text syntax' %}</a></div>
         </div>
     </form>
 
 {% endblock %}
 
 {% block metapanel %}
 
     {% get_current_language as LANGUAGE_CODE %}
 
     <span class="metapanel">
         {% cache 600 thread_meta posts.0.last_edit_time moderator LANGUAGE_CODE %}
             {{ posts.0.get_reply_count }} {% trans 'replies' %},
             {{ posts.0.get_images_count }} {% trans 'images' %}.
             {% trans 'Last update: ' %}{{ posts.0.last_edit_time }}
             [<a href="rss/">RSS</a>]
         {% endcache %}
     </span>
 
 {% endblock %}