Half way done with the index view

flaskbb/themes/aurora/src/flaskbb.scss

@@ -1,3 +1,9 @@
+@mixin not-last-child($selector) {
+  & #{$selector}:not(:last-child) {
+    @content;
+  }
+}
+
 body {
     background-color: #E8F1F2;
 }
@@ -57,3 +63,51 @@ body {
     border: 1px solid #cad7e1;
     border-radius: 0;
 }
+
+.index-view .row {
+    margin: 0;
+}
+
+.category-panel {
+    border: 1px solid #cad7e1;
+    border-radius: 0;
+}
+
+// forum-body,..?
+.category-body {
+    padding: 0;
+    .category-meta {
+        padding-top: 0.5em;
+        height: 2.5em;
+        background-color: #e8ecf1;
+        border-bottom: 1px solid #cad7e1;
+
+        .forum-name, .forum-stats, .forum-last-post {
+            font-weight: bold;
+        }
+    }
+    .category-content {
+        margin-top: 1em;
+        padding-bottom: 1em;
+        &:not(:last-child) {
+            border-bottom: 1px solid #cad7e1;
+        }
+    }
+
+}
+
+// topic?
+.forum-info {
+    position: relative;
+    float: left;
+    .forum-status {
+        font-size: 2em;
+        padding-right: 0.5em;
+    }
+    .forum-name {
+
+    }
+    .forum-description {
+
+    }
+}

flaskbb/themes/aurora/static/css/flaskbb.css

@@ -42,4 +42,33 @@ body {
   border: 1px solid #cad7e1;
   border-radius: 0; }
 
+.index-view .row {
+  margin: 0; }
+
+.category-panel {
+  border: 1px solid #cad7e1;
+  border-radius: 0; }
+
+.category-body {
+  padding: 0; }
+  .category-body .category-meta {
+    padding-top: 0.5em;
+    height: 2.5em;
+    background-color: #e8ecf1;
+    border-bottom: 1px solid #cad7e1; }
+    .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-content {
+    margin-top: 1em;
+    padding-bottom: 1em; }
+    .category-body .category-content:not(:last-child) {
+      border-bottom: 1px solid #cad7e1; }
+
+.forum-info {
+  position: relative;
+  float: left; }
+  .forum-info .forum-status {
+    font-size: 2em;
+    padding-right: 0.5em; }
+
 /*# sourceMappingURL=flaskbb.css.map */

flaskbb/themes/aurora/templates/forum/category_layout.html

@@ -1,96 +1,145 @@
-<table class="table table-bordered">
-    <thead class="categoryhead">
-        <tr>
-            <td colspan="5">
-                <div><strong><a href="{{ category.url }}">{{ category.title }}</a></strong></div>
-            </td>
-        </tr>
-    </thead>
-    <tbody class="forumbody">
-        <tr class="forum_stats">
-            <td colspan="2"><strong>{% trans %}Forum{% endtrans %}</strong></td>
-            <td width="85" align="center" style="white-space: nowrap"><strong>{% trans %}Topics{% endtrans %}</strong></td>
-            <td width="85" align="center" style="white-space: nowrap"><strong>{% trans %}Posts{% endtrans %}</strong></td>
-            <td width="200" align="center" style="white-space: nowrap"><strong>{% trans %}Last Post{% endtrans %}</strong></td>
-        </tr>
+<div class="panel panel-default category-panel">
+    <div class="panel-heading category-head">
+        <strong><a href="{{ category.url }}">{{ category.title }}</a></strong>
+    </div>
 
+    <div class="panel-body category-body">
+        <div class="category-meta">
+            <div class="col-md-5 forum-name">Forum</div>
+            <div class="col-md-2 forum-stats">Topics</div>
+            <div class="col-md-2 forum-stats">Posts</div>
+            <div class="col-md-3 forum-last-post">Last Post</div>
+        </div>
         {% for forum, forumsread in forums %}
-        <tr>
-            <td align="center" valign="center" width="4%">
-
+        <div class="row category-content">
             {% if forum.external %}
-                <span class="fa fa-external-link" style="font-size: 2em"></span>
-            </td>
+            <div class="col-md-5 forum-info">
+                <!-- Icon -->
+                <div class="forum-status pull-left">
+                    <span class="fa fa-external-link forum-external"></span>
+                </div>
 
-            <td valign="top">
-                <strong><a href="{{ forum.external }}">{{ forum.title }}</a></strong>
+                <!-- Forum Name -->
+                <div class="forum-name">
+                    <span class="forum-link">Link to:</span> <a href="{{ forum.url }}">{{ forum.title }}</a>
+                </div>
 
+                <!-- Forum Description -->
                 <div class="forum-description">
-                    {% autoescape false %}
-                    {{ forum.description|markup }}
-                    {% endautoescape %}
+                    {{ forum.description|markup|safe }}
                 </div>
-            </td>
+            </div> <!-- end forum-info -->
 
-            <td valign="top" align="center" style="white-space: nowrap">-</td>
-            <td valign="top" align="center" style="white-space: nowrap">-</td>
-            <td valign="top" align="right" style="white-space: nowrap">-</td>
-            <!-- End external -->
-            {% else %}
+            <!-- Post Cunt -->
+            <div class="col-md-2 forum-posts">
+                -
+            </div>
 
-            {% if forum.locked %}
-                <span class="fa fa-lock" style="font-size: 2em"></span>
-            {% elif forum|forum_is_unread(forumsread, current_user) %}
-                <span class="fa fa-comments" style="font-size: 2em"></span>
-            {% else %}
-                <span class="fa fa-comments-o" style="font-size: 2em"></span>
-            {% endif %}
-
-            </td>
+            <!-- Topic Count -->
+            <div class="col-md-2 forum-topics">
+                -
+            </div>
 
-            <td valign="top">
-                <strong><a href="{{ forum.url }}">{{ forum.title }}</a></strong>
+            <!-- Last Post -->
+            <div class="col-md-3 forum-last-post">
+                ---
+            </div>
+            {% else %}
+            <div class="col-md-5 forum-info">
+                <!-- Icon -->
+                <div class="forum-status pull-left">
+                    {% if forum.locked %}
+                        <span class="fa fa-lock forum-locked"></span>
+                    {% elif forum|forum_is_unread(forumsread, current_user) %}
+                        <span class="fa fa-comments forum-unread"></span>
+                    {% else %}
+                        <span class="fa fa-comments-o forum-read"></span>
+                    {% endif %}
+                </div>
+                <!-- Forum Name -->
+                <div class="forum-name">
+                    <a href="{{ forum.url }}">{{ forum.title }}</a>
+                </div>
 
+                <!-- Forum Description -->
                 <div class="forum-description">
-                    {% autoescape false %}
-                    {{ forum.description|markup }}
-                    {% endautoescape %}
-                    {% if forum.show_moderators %}
-                    <div class="forum-moderators">
-                        {% trans %}Moderators{% endtrans %}:
-                        {% for moderator in forum.moderators %}
-                        <a href="{{ url_for('user.profile', username=moderator.username) }}">{{ moderator.username }}</a>{% if not loop.last %}, {% endif %}
-                        {% endfor %}
-                    </div>
-                    {% endif %}
+                    {{ forum.description|markup|safe }}
                 </div>
-            </td>
 
-            <td valign="top" align="center" style="white-space: nowrap">{{ forum.topic_count }}</td>
-            <td valign="top" align="center" style="white-space: nowrap">{{ forum.post_count }}</td>
+                <!-- Forum Moderators -->
+                {% if forum.show_moderators %}
+                <div class="forum-moderators">
+                    {% trans %}Moderators{% endtrans %}:
+                    {% for moderator in forum.moderators %}
+                    <a href="{{ url_for('user.profile', username=moderator.username) }}">{{ moderator.username }}</a>{% if not loop.last %}, {% endif %}
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div> <!-- end forum-info -->
+
+            <!-- Post Cunt -->
+            <div class="col-md-2 forum-posts">
+            {{ forum.topic_count }}
+            </div>
+
+            <!-- Topic Count -->
+            <div class="col-md-2 forum-topics">
+            {{ forum.topic_count }}
+            </div>
 
-            <td valign="top" align="right" style="white-space: nowrap">
+            <!-- Last Post -->
+            <div class="col-md-3 forum-last-post">
                 {% if forum.last_post_id %}
-                <a href="{{ forum.last_post_url }}" title="{{ forum.last_post_title }}">
-                    <strong>{{ forum.last_post_title|crop_title }}</strong>
-                </a>
-                <br />
-                {{ forum.last_post_created|time_since }}<br />
+                <div class="last-post-title">
+                    <a href="{{ forum.last_post_url }}" title="{{ forum.last_post_title }}">
+                        <strong>{{ forum.last_post_title|crop_title }}</strong>
+                    </a>
+                </div>
+
+                <div class="last-post-time">
+                    {{ forum.last_post_created|time_since }}
+                </div>
 
+                <div class="last-post-author">
                     {% trans %}by{% endtrans %}
                     {% if forum.last_post_user_id %}
                     <a href="{{ url_for('user.profile', username=forum.last_post_username) }}">{{ forum.last_post_username }}</a>
                     {% else %}
                     {{ forum.last_post_username }}
                     {% endif %}
+                </div>
 
                 {% else %}
                 {% trans %}No posts.{% endtrans %}
                 {% endif %}
-            {% endif %}
-            </td>
-        </tr>
+            </div>
+
+        {% endif %} {# endif forum.external #}
+        </div> <!-- end category-content -->
+
         {% endfor %}
+    </div>
+</div>
+
+{#
+<!--
+            {% if forum.external %}
+                <span class="fa fa-external-link" style="font-size: 2em"></span>
+            </td>
+
+            <td valign="top">
+                <strong><a href="{{ forum.external }}">{{ forum.title }}</a></strong>
 
-    </tbody>
-</table>
+                <div class="forum-description">
+                    {% autoescape false %}
+                    {{ forum.description|markup }}
+                    {% endautoescape %}
+                </div>
+            </td>
+
+            <td valign="top" align="center" style="white-space: nowrap">-</td>
+            <td valign="top" align="center" style="white-space: nowrap">-</td>
+            <td valign="top" align="right" style="white-space: nowrap">-</td>
+            {% endif %}
+-->
+#}

flaskbb/themes/aurora/templates/forum/index.html

@@ -5,17 +5,24 @@
     <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>
 
+<div class="panel panel-default">
+<div class="panel-heading">
+    {% 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">
 <!-- Forum Stats -->
 <table class="table table-bordered">
     <thead>
         <tr>
             <td colspan="2">
-                <strong>{% trans %}Board Statistics{% endtrans %}</strong>
-                [<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>]
+
             </td>
         </tr>
     </thead>
@@ -37,5 +44,6 @@
 
     </tbody>
 </table>
-
+</div>
+</div>
 {% endblock %}