Browse Source

Redesigned forum page

sh4nks 9 years ago
parent
commit
9ec13f09d0

+ 2 - 2
flaskbb/templates/macros.html

@@ -383,10 +383,10 @@
 {%- macro topic_pages(topic_obj, per_page=10) -%}
 {% set topic_pages = (topic_obj.post_count / per_page)|round|int %}
 {%- if topic_pages >  1 -%}
-<small>[
+[
     {% for page in range(0, topic_pages) %}
             <a href="{{ url_for('forum.view_topic', topic_id=topic_obj.id) }}?page={{ page+1 }}">{{ page+1 }} </a>
     {% endfor %}
-]</small>
+]
 {%- endif -%}
 {%- endmacro -%}

+ 49 - 2
flaskbb/themes/aurora/src/flaskbb.scss

@@ -76,7 +76,8 @@ body {
 }
 
 
-.index-view .row {
+.index-view .row,
+.forum-view .row {
     margin: 0;
 }
 
@@ -106,6 +107,32 @@ body {
     }
 }
 
+
+// forum specific values
+.forum-body {
+    .forum-meta {
+        .topic-name, .topic-stats, .topic-last-post {
+            font-weight: bold;
+        }
+    }
+    .forum-row {
+        .topic-info {
+            position: relative;
+            .topic-status {
+                font-size: 1em;
+                padding-right: 0.75em;
+                float: left;
+            }
+            .topic-name {
+                font-weight: bold;
+            }
+            .topic-pages {
+                font-size: small;
+            }
+        }
+    }
+}
+
 // category specific values
 .category-body {
     .category-meta, {
@@ -137,7 +164,27 @@ body {
     }
 }
 
-p.stats {
+
+p.flaskbb-stats {
     margin: 0;
     padding: 0;
 }
+
+.controls-row {
+    padding: 0;
+    margin: 0;
+
+    .pagination {
+        padding: 0;
+        margin: 0;
+    }
+}
+
+.inline-form {
+    display: inline;
+    padding: 0px;
+}
+
+.inline-form .btn-link {
+    padding: 0px;
+}

+ 30 - 2
flaskbb/themes/aurora/static/css/flaskbb.css

@@ -53,7 +53,8 @@ body {
   border: 1px solid #cad7e1;
   border-radius: 0; }
 
-.index-view .row {
+.index-view .row,
+.forum-view .row {
   margin: 0; }
 
 .category-panel, .forum-panel, .topic-panel, .widget-panel {
@@ -75,6 +76,19 @@ body {
     .category-body .category-row:not(:last-child), .category-body .forum-row:not(:last-child), .category-body .topic-row:not(:last-child), .category-body .widget-row:not(:last-child), .forum-body .category-row:not(:last-child), .forum-body .forum-row:not(:last-child), .forum-body .topic-row:not(:last-child), .forum-body .widget-row:not(:last-child), .topic-body .category-row:not(:last-child), .topic-body .forum-row:not(:last-child), .topic-body .topic-row:not(:last-child), .topic-body .widget-row:not(:last-child), .widget-body .category-row:not(:last-child), .widget-body .forum-row:not(:last-child), .widget-body .topic-row:not(:last-child), .widget-body .widget-row:not(:last-child) {
       border-bottom: 1px solid #cad7e1; }
 
+.forum-body .forum-meta .topic-name, .forum-body .forum-meta .topic-stats, .forum-body .forum-meta .topic-last-post {
+  font-weight: bold; }
+.forum-body .forum-row .topic-info {
+  position: relative; }
+  .forum-body .forum-row .topic-info .topic-status {
+    font-size: 1em;
+    padding-right: 0.75em;
+    float: left; }
+  .forum-body .forum-row .topic-info .topic-name {
+    font-weight: bold; }
+  .forum-body .forum-row .topic-info .topic-pages {
+    font-size: small; }
+
 .category-body .category-meta .forum-name, .category-body .category-meta .forum-stats, .category-body .category-meta .forum-last-post {
   font-weight: bold; }
 .category-body .category-row .forum-info {
@@ -90,8 +104,22 @@ body {
 .category-body .category-row .forum-last-post .last-post-title {
   font-weight: bold; }
 
-p.stats {
+p.flaskbb-stats {
   margin: 0;
   padding: 0; }
 
+.controls-row {
+  padding: 0;
+  margin: 0; }
+  .controls-row .pagination {
+    padding: 0;
+    margin: 0; }
+
+.inline-form {
+  display: inline;
+  padding: 0px; }
+
+.inline-form .btn-link {
+  padding: 0px; }
+
 /*# sourceMappingURL=flaskbb.css.map */

+ 6 - 6
flaskbb/themes/aurora/templates/forum/category.html

@@ -4,13 +4,13 @@
 {% extends theme("layout.html") %}
 {% block content %}
 
-<ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-    <li class="active">{{ category.title }}</li>
-</ol>
-
 <div class="index-view">
-{% include theme("forum/category_layout.html") %}
+    <ol class="breadcrumb flaskbb-breadcrumb">
+        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li class="active">{{ category.title }}</li>
+    </ol>
+
+    {% include theme("forum/category_layout.html") %}
 </div>
 
 {% endblock %}

+ 5 - 5
flaskbb/themes/aurora/templates/forum/category_layout.html

@@ -5,10 +5,10 @@
 
     <div class="panel-body category-body">
         <div class="category-meta">
-            <div class="col-md-5 col-sm-5 col-xs-8 forum-name">Forum</div>
-            <div class="col-md-2 col-sm-2 hidden-xs forum-stats">Topics</div>
-            <div class="col-md-2 col-sm-2 hidden-xs forum-stats">Posts</div>
-            <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">Last Post</div>
+            <div class="col-md-5 col-sm-5 col-xs-8 forum-name">{% trans %}Forum{% endtrans %}</div>
+            <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Topics{% endtrans %}</div>
+            <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Posts{% endtrans %}</div>
+            <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">{% trans %}Last Post{% endtrans %}</div>
         </div>
         {% for forum, forumsread in forums %}
         <div class="row category-row">
@@ -22,7 +22,7 @@
 
                 <!-- Forum Name -->
                 <div class="forum-name">
-                    <span class="forum-link">Link to:</span> <a href="{{ forum.url }}">{{ forum.title }}</a>
+                    <span class="forum-link">{% trans %}Link to{% endtrans %}:</span> <a href="{{ forum.url }}">{{ forum.title }}</a>
                 </div>
 
                 <!-- Forum Description -->

+ 129 - 0
flaskbb/themes/aurora/templates/forum/forum.html

@@ -0,0 +1,129 @@
+{% set page_title = forum.title %}
+{% set active_forum_nav=True %}
+
+{% extends theme("layout.html") %}
+{% block content %}
+{% from theme('macros.html') import render_pagination, topic_pages %}
+
+<div class="forum-view">
+    <ol class="breadcrumb flaskbb-breadcrumb">
+        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+        <li><a href="{{ forum.category.url }}">{{ forum.category.title }}</a></li>
+        <li class="active">{{ forum.title }}</li>
+    </ol>
+
+    <div class="row controls-row">
+        <div class="pull-left">
+            {{ render_pagination(topics, forum.url) }}
+        </div> <!-- end span pagination -->
+
+        {% if current_user|post_topic(forum) %}
+        <div class="pull-right">
+            <form class="inline-form" method="post" action="{{ url_for('forum.markread', forum_id=forum.id, slug=forum.slug) }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                <button class="btn btn-default">
+                    <span class="fa fa-check"></span> {% trans %}Mark as Read{% endtrans %}
+                </button>
+            </form>
+
+            {% if forum.locked %}
+            <span class="btn btn-primary">
+                <span class="fa fa-lock"></span> {% trans %}Locked{% endtrans %}
+            </span>
+            {% else %}
+            <a href="{{ url_for('forum.new_topic', forum_id=forum.id, slug=forum.slug) }}" class="btn btn-primary">
+                <span class="fa fa-pencil"></span> {% trans %}New Topic{% endtrans %}
+            </a>
+            {% endif %}
+        </div>
+        {% endif %}
+    </div>
+
+    <div class="panel panel-default forum-panel">
+        <div class="panel-heading forum-head">
+            <a href="{{ forum.url }}">{{ forum.title }}</a>
+        </div>
+
+        <div class="panel-body forum-body">
+            <div class="forum-meta">
+                <div class="col-md-5 col-sm-5 col-xs-8 topic-name">{% trans %}Topic{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Posts{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">{% trans %}Views{% endtrans %}</div>
+                <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
+            </div>
+
+            {% for topic, topicread in topics.items %}
+            <div class="row forum-row clearfix">
+
+                <div class="col-md-5 col-sm-5 col-xs-8 topic-info">
+
+                    <div class="topic-status">
+                    {% if topic.locked %}
+                        <span class="fa fa-lock topic-locked"></span>
+                    {% elif topic.important %}
+                        {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                            <span class="fa fa-star topic-starred-unread"></span>
+                        {% else %}
+                            <span class="fa fa-star-o topic-starred-read"></span>
+                        {% endif %}
+                    {% else %}
+                        {% if topic|topic_is_unread(topicread, current_user, forumsread) %}
+                            <span class="fa fa-comment topic-unread" style="font-size: 2em"></span>
+                        {% else %}
+                            <span class="fa fa-comment-o topic-read" style="font-size: 2em"></span>
+                        {% endif %}
+                    {% endif %}
+                    </div>
+
+                    <div class="topic-name">
+                        <a href="{{ topic.url }}">{{ topic.title }}</a>
+                        <!-- Topic Pagination -->
+                        <span class="topic-pages">{{ topic_pages(topic, flaskbb_config["POSTS_PER_PAGE"]) }}</span>
+                    </div>
+
+                    <div class="topic-author">
+                        {% trans %}by{% endtrans %}
+                        {% if topic.user_id %}
+                         <a href="{{ topic.user.url }}">{{ topic.user.username }}</a>
+                        {% else %}
+                        {{ topic.username }}
+                        {% endif %}
+                    </div>
+                </div>
+
+                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                    {{ topic.post_count }}
+                </div>
+
+                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                    {{ topic.views }}
+                </div>
+
+                <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">
+                    <a href="{{ topic.last_post.url }}">{{ topic.last_post.date_created|time_since }}</a><br />
+
+                    <div class="topic-author">
+                        {% trans %}by{% endtrans %}
+                        {% if topic.last_post.user_id %}
+                        <a href="{{ topic.last_post.user.url }}">{{ topic.last_post.user.username }}</a>
+                        {% else %}
+                        {{ topic.last_post.username }}
+                        {% endif %}
+                    </div>
+                </div>
+
+            </div>  <!-- end forum-row -->
+            {% else %}
+                {% trans %}No Topics.{% endtrans %}
+            </div> <!-- end forum-row -->
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="row controls-row">
+        <a class="btn btn-default" href="{{ url_for('forum.manage_forum', forum_id=forum.id, slug=forum.slug) }}">
+            <span class="fa fa-tasks"></span> {% trans %}Moderation Mode{% endtrans %}
+        </a>
+    </div>
+</div>
+{% endblock %}

+ 26 - 26
flaskbb/themes/aurora/templates/forum/index.html

@@ -1,34 +1,34 @@
 {% extends theme("layout.html") %}
 {% block content %}
 
-<ol class="breadcrumb flaskbb-breadcrumb">
-    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-</ol>
-
 <div class="index-view">
-{% for category, forums in categories %}
-    {% include theme("forum/category_layout.html") %}
-{% endfor %}
-</div>
+    <ol class="breadcrumb flaskbb-breadcrumb">
+        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    </ol>
 
-<div class="panel panel-default widget-panel">
-    <div class="panel-heading widget-head">
-        {% trans %}Board Statistics{% endtrans %}
-        [<a href="{{ url_for('forum.who_is_online') }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;">{% trans %}Who is online?{% endtrans %}</a>]
-    </div>
-    <div class="panel-body">
-        <div class="row widget-row">
-            <div class="col-md-6">
-                <p class="stats">{% trans %}Total number of registered users{% endtrans %}: <strong>{{ user_count }}</strong></p>
-                <p class="stats">{% trans %}Total number of topics{% endtrans %}: <strong>{{ topic_count }}</strong></p>
-                <p class="stats">{% trans %}Total number of posts{% endtrans %}: <strong>{{ post_count }}</strong></p>
-            </div>
-            <div class="col-md-6 pull-right">
-                <p class="stats">{% trans %}Newest registered user{% endtrans %}: {% if newest_user %}<a href="{{ newest_user.url }}">{{ newest_user.username }}</a>{% else %}{% trans %}No users{% endtrans %}{% endif %}</p>
-                <p class="stats">{% trans %}Registered users online{% endtrans %}: <strong>{{ online_users }}</strong></p>
-                {% if config["REDIS_ENABLED"] %}
-                <p class="stats">{% trans %}Guests online{% endtrans %}: <strong>{{ online_guests }}</strong></p>
-                {% endif %}
+    {% for category, forums in categories %}
+        {% include theme("forum/category_layout.html") %}
+    {% endfor %}
+
+    <div class="panel panel-default widget-panel">
+        <div class="panel-heading widget-head">
+            {% trans %}Board Statistics{% endtrans %}
+            [<a href="{{ url_for('forum.who_is_online') }}" onclick="window.open(this.href, 'wio_window','width=500,height=500'); return false;">{% trans %}Who is online?{% endtrans %}</a>]
+        </div>
+        <div class="panel-body">
+            <div class="row widget-row">
+                <div class="col-md-6">
+                    <p class="flaskbb-stats">{% trans %}Total number of registered users{% endtrans %}: <strong>{{ user_count }}</strong></p>
+                    <p class="flaskbb-stats">{% trans %}Total number of topics{% endtrans %}: <strong>{{ topic_count }}</strong></p>
+                    <p class="flaskbb-stats">{% trans %}Total number of posts{% endtrans %}: <strong>{{ post_count }}</strong></p>
+                </div>
+                <div class="col-md-6 pull-right">
+                    <p class="flaskbb-stats">{% trans %}Newest registered user{% endtrans %}: {% if newest_user %}<a href="{{ newest_user.url }}">{{ newest_user.username }}</a>{% else %}{% trans %}No users{% endtrans %}{% endif %}</p>
+                    <p class="flaskbb-stats">{% trans %}Registered users online{% endtrans %}: <strong>{{ online_users }}</strong></p>
+                    {% if config["REDIS_ENABLED"] %}
+                    <p class="flaskbb-stats">{% trans %}Guests online{% endtrans %}: <strong>{{ online_guests }}</strong></p>
+                    {% endif %}
+                </div>
             </div>
         </div>
     </div>