Finished header w/ navigation

flaskbb/templates/macros.html

@@ -300,6 +300,11 @@
 </li>
 {% endmacro %}
 
+{% macro is_active(endpoint, active=False) %}
+    {%- if endpoint == request.endpoint or active == True -%}
+        active
+    {%- endif -%}
+{% endmacro %}
 
 {% macro navlink(endpoint, name, active=False) %}
 <li {% if endpoint == request.endpoint or active %}class="active"{% endif %}>

flaskbb/themes/aurora/src/flaskbb.scss

@@ -0,0 +1,59 @@
+body {
+    background-color: #E8F1F2;
+}
+
+.flaskbb-layout {
+    padding-top: 20px;
+    color: #5a5a5a;
+}
+
+.flaskbb-header {
+    color: #fff;
+    text-align: left;
+    text-shadow: 0 1px 0 rgba(0,0,0,.1);
+    background-color: #3276b1;
+    background-image: -webkit-linear-gradient(top, #285e8e 0%, #3276b1 100%);
+    background-image: linear-gradient(to bottom, #285e8e 0%, #3276b1 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#285e8e', endColorstr='#3276b1', GradientType=0);
+    border: 1px solid #cad7e1;
+    border-bottom: 0;
+    border-radius: 0.25em 0.25em 0 0;
+
+    position: relative;
+    height: 12em;
+    padding: 2.5em 2em;
+    margin-top: 2.5em;
+
+    .flaskbb-meta {
+        .flaskbb-title {
+            color: #fff;
+            font-size: 3em;
+            font-weight: bold;
+        }
+        .flaskbb-subtitle {
+            color: #e8ecf1;
+        }
+    }
+}
+
+.forum-navigation {
+    border: 1px solid #cad7e1;
+    border-radius: 0 0 0.25em 0.25em;
+    .navbar-nav .user-btn {
+        padding-right: 2em;
+        padding-left: 1em;
+    }
+
+
+    .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
+        color: #555;
+        background-color: #e7e7e7;
+    }
+
+}
+
+.flaskbb-breadcrumb {
+    border: 1px solid #cad7e1;
+    border-radius: 0;
+}

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

@@ -0,0 +1,45 @@
+body {
+  background-color: #E8F1F2; }
+
+.flaskbb-layout {
+  padding-top: 20px;
+  color: #5a5a5a; }
+
+.flaskbb-header {
+  color: #fff;
+  text-align: left;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  background-color: #3276b1;
+  background-image: -webkit-linear-gradient(top, #285e8e 0%, #3276b1 100%);
+  background-image: linear-gradient(to bottom, #285e8e 0%, #3276b1 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#285e8e', endColorstr='#3276b1', GradientType=0);
+  border: 1px solid #cad7e1;
+  border-bottom: 0;
+  border-radius: 0.25em 0.25em 0 0;
+  position: relative;
+  height: 12em;
+  padding: 2.5em 2em;
+  margin-top: 2.5em; }
+  .flaskbb-header .flaskbb-meta .flaskbb-title {
+    color: #fff;
+    font-size: 3em;
+    font-weight: bold; }
+  .flaskbb-header .flaskbb-meta .flaskbb-subtitle {
+    color: #e8ecf1; }
+
+.forum-navigation {
+  border: 1px solid #cad7e1;
+  border-radius: 0 0 0.25em 0.25em; }
+  .forum-navigation .navbar-nav .user-btn {
+    padding-right: 2em;
+    padding-left: 1em; }
+  .forum-navigation .navbar-nav > li > a:hover, .forum-navigation .navbar-default .navbar-nav > li > a:focus {
+    color: #555;
+    background-color: #e7e7e7; }
+
+.flaskbb-breadcrumb {
+  border: 1px solid #cad7e1;
+  border-radius: 0; }
+
+/*# sourceMappingURL=flaskbb.css.map */

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

@@ -0,0 +1,14 @@
+{% set page_title = category.title %}
+{% set active_forum_nav=True %}
+
+{% 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>
+
+{% include theme("forum/category_layout.html") %}
+
+{% endblock %}

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

@@ -0,0 +1,96 @@
+<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>
+
+        {% for forum, forumsread in forums %}
+        <tr>
+            <td align="center" valign="center" width="4%">
+
+            {% 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>
+
+                <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>
+            <!-- End external -->
+            {% else %}
+
+            {% 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>
+
+            <td valign="top">
+                <strong><a href="{{ forum.url }}">{{ forum.title }}</a></strong>
+
+                <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 %}
+                </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>
+
+            <td valign="top" align="right" style="white-space: nowrap">
+                {% 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 />
+
+                    {% 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 %}
+
+                {% else %}
+                {% trans %}No posts.{% endtrans %}
+                {% endif %}
+            {% endif %}
+            </td>
+        </tr>
+        {% endfor %}
+
+    </tbody>
+</table>

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

@@ -0,0 +1,41 @@
+{% extends theme("layout.html") %}
+{% block content %}
+
+<ol class="breadcrumb flaskbb-breadcrumb">
+    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+</ol>
+
+{% for category, forums in categories %}
+    {% include theme("forum/category_layout.html") %}
+{% endfor %}
+
+<!-- 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>
+    <tbody>
+        <tr>
+            <td>
+                {% trans %}Total number of registered users{% endtrans %}: <strong>{{ user_count }}</strong> <br />
+                {% trans %}Total number of topics{% endtrans %}: <strong>{{ topic_count }}</strong> <br />
+                {% trans %}Total number of posts{% endtrans %}: <strong>{{ post_count }}</strong> <br />
+            </td>
+            <td>
+                {% trans %}Newest registered user{% endtrans %}: {% if newest_user %}<a href="{{ newest_user.url }}">{{ newest_user.username }}</a>{% else %}{% trans %}No users{% endtrans %}{% endif %}<br />
+                {% trans %}Registered users online{% endtrans %}: <strong>{{ online_users }}</strong> <br />
+                {% if config["REDIS_ENABLED"] %}
+                {% trans %}Guests online{% endtrans %}: <strong>{{ online_guests }}</strong> <br />
+                {% endif %}
+            </td>
+        </tr>
+
+    </tbody>
+</table>
+
+{% endblock %}

flaskbb/themes/aurora/templates/layout.html

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="FlaskBB is a forum software written in Flask">
+        <meta name="author" content="FlaskBB Team">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
+        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
+        <title>
+        {% block title %}
+            {%- if not page_title -%}
+                {{ flaskbb_config["PROJECT_TITLE"] }} - {{ flaskbb_config["PROJECT_SUBTITLE"] }}
+            {%- else -%}
+                {{ page_title }} - {{ flaskbb_config["PROJECT_TITLE"] }}
+            {%- endif -%}
+        {% endblock %}
+        </title>
+
+        {% block stylesheets %}
+        <!-- libraries and dependencies -->
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}" >
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/pygments.css') }}">
+        <!-- aurora theme -->
+        <link rel="stylesheet" href="{{ theme_static('css/flaskbb.css') }}">
+        {% endblock %}
+
+        {# for extra stylesheets. e.q. a template has to add something #}
+        {% block css %}
+        {% endblock %}
+
+        {# for various extra things #}
+        {% block head_extra %}
+        {% endblock %}
+    </head>
+
+    <body>
+
+        <!-- main forum layout -->
+        <div class="flaskbb-layout">
+            <div class="container">
+                <!-- forum header - place for the project title and subtitle -->
+                <div class="flaskbb-header">
+                    <div class="flaskbb-meta">
+                        <div class="flaskbb-title">FlaskBB</div>
+                        <div class="flaskbb-subtitle">A lightweight forum software in Flask.</div>
+                    </div>
+                </div>
+            </div>
+            <!-- forum menu - contains all the navigation items -->
+            {% block navigation %}
+                {% include theme('navigation.html') %}
+            {% endblock %}
+
+            {% block messages %}
+            <div class="flashed-messages">
+                {% include theme('flashed_messages.html') %}
+            </div>
+            {% endblock %}
+
+            <div class="container">
+            {% block content %}
+            {% endblock %}
+            </div>
+
+            <div class="container">
+            {% block footer %}
+            <div class="flaskbb-footer">
+                <p class="text-muted pull-left">powered by <a href="http://flask.pocoo.org">Flask</a></p>
+                <p class="text-muted pull-right">&copy; 2013 - 2015 - <a href="http://flaskbb.org">FlaskBB.org</a></p>
+            </div>
+            {% endblock %}
+            </div>
+
+        </div> <!-- end flaskbb-layout -->
+
+        {% block javascript %}
+        <!-- libraries and dependencies -->
+        <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
+        <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
+        <!-- flaskbb's javascript -->
+        <script src="{{ url_for('static', filename='js/flaskbb.js') }}"></script>
+        {% endblock %}
+
+        {# for extra scripts in other templates. #}
+        {% block scripts %}
+        {% endblock %}
+    </body>
+</html>

flaskbb/themes/aurora/templates/navigation.html

@@ -0,0 +1,84 @@
+<div class="container">
+    <div class="navbar navbar-default forum-navigation">
+        <!-- Brand and toggle get grouped for better mobile display -->
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+        </div>
+
+        <div class="collapse navbar-collapse">
+            <!-- navbar left -->
+            <ul class="nav navbar-nav forum-nav">
+                {%- from theme("macros.html") import is_active, topnav with context -%}
+                {{ emit_event("before-first-navigation-element") }}
+
+                {{ topnav(endpoint='forum.index', name=_('Forum'), icon='fa fa-comment', active=active_forum_nav) }}
+                {{ topnav(endpoint='forum.memberlist', name=_('Memberlist'), icon='fa fa-user') }}
+                {{ topnav(endpoint='forum.search', name=_('Search'), icon='fa fa-search') }}
+
+                {{ emit_event("after-last-navigation-element") }}
+            </ul>
+
+            <!-- navbar right -->
+            <ul class="nav navbar-nav navbar-right">
+
+                {% if current_user and current_user.is_authenticated() %}
+                <!-- Inbox -->
+                <li class="dropdown {{ is_active('message.inbox') }}">
+                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
+                        <span class="fa fa-envelope"></span> Inbox <span class="label label-info">{{ current_user.pm_unread }}</span>
+                    </a>
+                    <ul class="dropdown-menu">
+                        <li><a href="{{ url_for('message.inbox') }}"><span class="fa fa-envelope"></span> {% trans %}Private Messages{% endtrans %}</a></li>
+                        <li><a href="{{ url_for('message.new_conversation') }}"><span class="fa fa-pencil"></span> {% trans %}New Message{% endtrans %}</a></li>
+                    </ul>
+                </li>
+
+                <!-- Topic Tracker -->
+                {{ topnav(endpoint='forum.topictracker', name=_('Topic Tracker'), icon='fa fa-book') }}
+
+                <!-- User Menu -->
+                <li>
+                    <div class="btn-group navbar-btn user-btn">
+                        <a class="btn btn-primary" href="{{ url_for('user.profile', username=current_user.username) }}">
+                            <span class="fa fa-user"></span> {{ current_user.username }}
+                        </a>
+                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                        <ul class="dropdown-menu" role="menu">
+                            <li><a href="{{ url_for('forum.topictracker') }}"><span class="fa fa-book"></span> {% trans %}Topic Tracker{% endtrans %}</a></li>
+                            <li class="divider"></li>
+
+                            <li><a href="{{ url_for('user.settings') }}"><span class="fa fa-cogs"></span> {% trans %}Settings{% endtrans %}</a></li>
+                            {% if current_user|is_admin_or_moderator %}
+                            <li><a href="{{ url_for('management.overview') }}"><span class="fa fa-cog"></span> {% trans %}Management{% endtrans %}</a></li>
+                            <li class="divider"></li>
+                            {% endif %}
+
+                            <li><a href="{{ url_for('auth.logout') }}"><span class="fa fa-power-off"></span> {% trans %}Logout{% endtrans %}</a></li>
+                        </ul>
+                    </div>
+                </li>
+                {% else %}
+                <!-- Not logged in - Login/Register -->
+                <li>
+                    <div class="btn-group navbar-btn user-btn">
+                        <a class="btn btn-primary" href="{{ url_for('auth.login') }}">
+                            <span class="fa fa-user"></span> {% trans %}Login{% endtrans %}
+                        </a>
+                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
+                        <ul class="dropdown-menu" role="menu">
+                            <li><a href="{{ url_for('auth.register') }}">{% trans %}Register{% endtrans %}</a></li>
+                            <li><a href="{{ url_for('auth.forgot_password') }}">{% trans %}Reset Password{% endtrans %}</a></li>
+                        </ul>
+                    </div>
+                </li>
+                {% endif %}
+
+            </ul> <!-- end navbar right -->
+        </div> <!-- end navbar-collapse -->
+    </div> <!-- end navbar -->
+</div> <!-- end container -->