Redesign profile panel

Still needs a few refinements though..

flaskbb/themes/aurora/src/flaskbb.scss

@@ -314,6 +314,8 @@ body {
 
 // author
 .author {
+    text-shadow: 0px 1px 0px #fff;
+
     // probably not the best name but i couldn't come up with a better one
     &.author-horizontal {
         min-height: 9em;
@@ -442,7 +444,7 @@ body {
     .category-body {
         background-color: $category-panel;
 
-        .category-meta, {
+        .category-meta {
             background-color: $category-meta-background;
             border-bottom: 1px solid $category-meta-border;
 
@@ -487,7 +489,7 @@ body {
     }
     .page-body {
         background-color: $page-panel;
-        .page-meta, {
+        .page-meta {
             background-color: $page-meta-background;
             border-bottom: 1px solid $page-meta-border;
         }
@@ -549,8 +551,7 @@ body {
             position: absolute;
             width: 0;
             height: 0;
-            border-style: solid;
-            border-color: transparent;
+            border: solid transparent;
         }
         .arrow.left:after, .arrow.left:before {
             border-left: 0;
@@ -964,7 +965,7 @@ p.flaskbb-stats {
 
 .editor > .md-editor {
     &.active {
-        border-color: none;
+        border-color: transparent;
         box-shadow: none;
     }
 
@@ -1114,8 +1115,23 @@ p.flaskbb-stats {
 }
 
 
+.page-body.profile-body {
+    background-color: $author-box-background;
+}
+
 .profile-content {
+    background-color: #fff;
+    border-left: 1px solid $border-color;
+    min-height: 34.5em;
 
+    .topic-head {
+        font-weight: normal;
+    }
+
+    .topic-created {
+        font-size: 0.75em;
+        padding-bottom: 0.75em;
+    }
 }
 
 .profile-picture {
@@ -1137,13 +1153,22 @@ p.flaskbb-stats {
 
 }
 
+.profile-sidebar-stats {
+    text-shadow: 0 1px 0 #fff;
+}
+
+.profile-groupname, .profile-online, .profile-location,
+.profile-posts, .profile-date, .profile-buttons {
+    text-align: center;
+    margin-top: 0.2em;
+}
 
 
 .profile-groupname {
     text-align: center;
-    margin-top: 20px;
-    color: #5b9bd1;
-    font-size: 16px;
+    margin-top: 0.75em;
+    color: $fresh-blue;
+    font-size: 1.2em;
     font-weight: 600;
 }
 
@@ -1153,9 +1178,10 @@ p.flaskbb-stats {
     margin-bottom: 15px;
 
     .btn {
+        text-shadow: none;
         text-transform: uppercase;
         font-size: 11px;
-        font-weight: 600;
+        font-weight: 700;
         padding: 6px 15px;
         margin-right: 5px;
     }
@@ -1164,22 +1190,24 @@ p.flaskbb-stats {
 
 .profile-sidebar {
     padding: 7px 0;
-    border-right: 1px solid $border-color;
-    ul li {
-        border-bottom: 1px solid #f0f4f7;
+    //border-right: 1px solid $border-color;
+    //background-color: $author-box-background;
 
+    ul li {
         &:last-child {
             border-bottom: none;
         }
 
         a {
-            color: #93a3b5;
+            color: $navigation-font-color;
             font-size: 14px;
             font-weight: 400;
+            border-left: 2px solid transparent;
 
             &:hover {
-                background-color: #fafcfd;
-                color: #5b9bd1;
+                background-color: $author-box-background;
+                border-right: 2px solid $fresh-blue;
+                border-left: 2px solid $fresh-blue;
             }
 
             i {
@@ -1189,12 +1217,10 @@ p.flaskbb-stats {
         }
 
         &.active {
-            border-bottom: none;
-
             a {
-                color: #5b9bd1;
-                background-color: #f6f9fb;
-                //border-right: 2px solid #5b9bd1;
+                background-color: $author-box-background;
+                border-right: 2px solid $fresh-blue;
+                border-left: 2px solid $fresh-blue;
             }
 
         }

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

@@ -159,43 +159,45 @@ body {
       .topic-body .post-box .post-footer .post-menu .btn-icon:hover {
         background-color: #f8f8f8; }
 
-.author.author-horizontal {
-  min-height: 9em;
-  border-bottom: 1px solid #cad7e1; }
-  .author.author-horizontal .author-box {
-    float: left;
-    margin-top: 0.5em; }
-    .author.author-horizontal .author-box .author-avatar {
-      margin-top: 0em;
-      margin-right: 1em; }
-    .author.author-horizontal .author-box .author-online, .author.author-horizontal .author-box .author-offline {
+.author {
+  text-shadow: 0px 1px 0px #fff; }
+  .author.author-horizontal {
+    min-height: 9em;
+    border-bottom: 1px solid #cad7e1; }
+    .author.author-horizontal .author-box {
+      float: left;
       margin-top: 0.5em; }
-    .author.author-horizontal .author-box .author-name {
-      margin-top: -0.5em; }
-.author .author-name h4 {
-  float: left;
-  margin-bottom: 0; }
-.author .author-title h5 {
-  margin-top: 0;
-  font-weight: 600;
-  clear: both; }
-.author .author-avatar {
-  margin: 0.5em 0; }
-  .author .author-avatar img {
-    border-radius: 0.25em;
-    height: auto;
-    width: 8em; }
-.author .author-online, .author .author-offline {
-  margin-top: 0.75em;
-  margin-left: 0.25em;
-  float: left;
-  width: 0.5em;
-  height: 0.5em;
-  border-radius: 50%; }
-.author .author-online {
-  background: #5cb85c; }
-.author .author-offline {
-  background: #555; }
+      .author.author-horizontal .author-box .author-avatar {
+        margin-top: 0em;
+        margin-right: 1em; }
+      .author.author-horizontal .author-box .author-online, .author.author-horizontal .author-box .author-offline {
+        margin-top: 0.5em; }
+      .author.author-horizontal .author-box .author-name {
+        margin-top: -0.5em; }
+  .author .author-name h4 {
+    float: left;
+    margin-bottom: 0; }
+  .author .author-title h5 {
+    margin-top: 0;
+    font-weight: 600;
+    clear: both; }
+  .author .author-avatar {
+    margin: 0.5em 0; }
+    .author .author-avatar img {
+      border-radius: 0.25em;
+      height: auto;
+      width: 8em; }
+  .author .author-online, .author .author-offline {
+    margin-top: 0.75em;
+    margin-left: 0.25em;
+    float: left;
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 50%; }
+  .author .author-online {
+    background: #5cb85c; }
+  .author .author-offline {
+    background: #555; }
 
 .profile-picture {
   margin: 0.5em 0; }
@@ -303,8 +305,7 @@ body {
       position: absolute;
       width: 0;
       height: 0;
-      border-style: solid;
-      border-color: transparent; }
+      border: solid transparent; }
     .conversation-panel .arrow.left:after, .conversation-panel .arrow.left:before {
       border-left: 0; }
     .conversation-panel .arrow.left:before {
@@ -578,7 +579,7 @@ p.flaskbb-stats {
     width: 100%; }
 
 .editor > .md-editor.active {
-  border-color: none;
+  border-color: transparent;
   box-shadow: none; }
 .editor > .md-editor > .md-footer, .editor > .md-editor > .md-header {
   background: #f8f8f8; }
@@ -684,4 +685,76 @@ p.flaskbb-stats {
   .alert-message.alert-message-notice h4 {
     color: #444; }
 
+.page-body.profile-body {
+  background-color: #e8ecf1; }
+
+.profile-content {
+  background-color: #fff;
+  border-left: 1px solid #cad7e1;
+  min-height: 34.5em; }
+  .profile-content .topic-head {
+    font-weight: normal; }
+  .profile-content .topic-created {
+    font-size: 0.75em;
+    padding-bottom: 0.75em; }
+
+.profile-picture {
+  text-align: center; }
+  .profile-picture img {
+    float: none;
+    margin: 0 auto;
+    width: 50%;
+    height: 50%;
+    -webkit-border-radius: 50% !important;
+    -moz-border-radius: 50% !important;
+    border-radius: 50% !important; }
+
+.profile-sidebar-stats {
+  text-shadow: 0 1px 0 #fff; }
+
+.profile-groupname, .profile-online, .profile-location,
+.profile-posts, .profile-date, .profile-buttons {
+  text-align: center;
+  margin-top: 0.2em; }
+
+.profile-groupname {
+  text-align: center;
+  margin-top: 0.75em;
+  color: #0088cc;
+  font-size: 1.2em;
+  font-weight: 600; }
+
+.profile-buttons {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 15px; }
+  .profile-buttons .btn {
+    text-shadow: none;
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 6px 15px;
+    margin-right: 5px; }
+
+.profile-sidebar {
+  padding: 7px 0; }
+  .profile-sidebar ul li:last-child {
+    border-bottom: none; }
+  .profile-sidebar ul li a {
+    color: #555;
+    font-size: 14px;
+    font-weight: 400;
+    border-left: 2px solid transparent; }
+    .profile-sidebar ul li a:hover {
+      background-color: #e8ecf1;
+      border-right: 2px solid #0088cc;
+      border-left: 2px solid #0088cc; }
+    .profile-sidebar ul li a i {
+      margin-right: 8px;
+      font-size: 14px; }
+  .profile-sidebar ul li.active a {
+    background-color: #e8ecf1;
+    border-right: 2px solid #0088cc;
+    border-left: 2px solid #0088cc; }
+
 /*# sourceMappingURL=flaskbb.css.map */

flaskbb/themes/aurora/templates/user/all_posts.html

@@ -1,46 +1,69 @@
-{% extends theme('layout.html') %}
-{% block content %}
-{% from theme('macros.html') import render_pagination %}
+{% extends theme("user/profile_layout.html") %}
+{% from theme('macros.html') import render_pagination, topic_pages %}
 
-<div class="page-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li ><a href="{{ user.url }}">{{ user.username }}</a></li>
-        <li class="active">{% trans %}All Posts{% endtrans %}</li>
-    </ol>
+{% block breadcrumb %}
+<ul class="breadcrumb flaskbb-breadcrumb">
+    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li><a href="{{ user.url }}">{{ user.username }}</a></li>
+    <li class="active">{% trans %}Posts{% endtrans %}</li>
+</ul>
+{% endblock %}
 
-    <div class="row controls-row">
-        <div class="col-md-12 col-sm-12 col-xs-12 controls-col">
-            <div class="pull-left">
-                {{ render_pagination(posts, url_for('user.view_all_posts', username=user.username)) }}
-            </div>
-        </div>
-    </div>
+{% block profile_navigation %}
+<ul class="nav profile-sidenav" id="profile-tabs" role="tablist">
+    <li>
+        <a href="{{ user.url }}">
+            <span class="fa fa-home"></span> {% trans %}Overview{% endtrans %}
+        </a>
+    </li>
+    {#
+    <li>
+        <a href="{{ user.url }}">
+            <span class="fa fa-line-chart"></span> {% trans %}Statistics{% endtrans %}
+        </a>
+    </li>
+    #}
+    <li>
+        <a href="{{ url_for('user.view_all_topics', username=user.username) }}">
+            <span class="fa fa-comments"></span> {% trans %}Topics{% endtrans %}
+        </a>
+    </li>
+
+    <li class="active">
+        <a href="{{ url_for('user.view_all_posts', username=user.username) }}">
+            <span class="fa fa-comment"></span> {% trans %}Posts{% endtrans %}
+        </a>
+    </li>
+</ul>
+{% endblock %}
 
+
+{% block profile_content %}
+<!-- middle column -->
+<div class="col-md-9 col-sm-9 col-xs-12 profile-content">
+
+    {% for post in posts.items %}
     <div class="panel page-panel">
         <div class="panel-heading page-head">
-            {% trans user=user.username %}All Posts created by {{user}}{% endtrans %}
+            <a href="{{ post.topic.url }}">{{ post.topic.title }}</a>
         </div>
-        <div class="panel-body page-body">
-            {% for post in posts.items %}
-            <div class="row page-row clearfix">
-                <div class="col-md-12 col-sm-12 col-xs-12">
-                    <strong><a href="{{ post.topic.url }}">{{ post.topic.title }}</a></strong>
-                    in <a href="{{ post.topic.forum.url }}">{{ post.topic.forum.title }}</a>
-                    <span class="divider"> - </span><small>{{ post.date_created|time_since }}</small>
+        <div class="panel-body page-body topic-content">
+            <div class="col-md-12 col-sm-12 col-xs-12">
+                <div class="topic-created">
+                    {{ post.date_created|format_date('%d %B %Y - %H:%M') }}
                 </div>
-                <div class="col-md-12 col-sm-12 col-xs-12">
+                <div class="topic-content">
                     {{ post.content|markup|safe }}
                 </div>
             </div>
-            {% else %}
-            <div class="row page-row clearfix">
-                <div class="col-md-12 col-sm-12 col-xs-12">
-                    {% trans %}No posts.{% endtrans %}
-                </div>
-            </div>
-            {% endfor %}
         </div>
     </div>
+    {% else %}
+    <div class="row">
+        <div class="col-md-12 col-sm-12 col-xs-12">
+            {% trans %}The user has not written any posts yet.{% endtrans %}
+        </div>
+    </div>
+    {% endfor %}
 </div>
 {% endblock %}

flaskbb/themes/aurora/templates/user/all_topics.html

@@ -1,97 +1,80 @@
-{% extends theme('layout.html') %}
-{% block content %}
+{% extends theme("user/profile_layout.html") %}
 {% from theme('macros.html') import render_pagination, topic_pages %}
 
-<div class="page-view">
-    <ol class="breadcrumb flaskbb-breadcrumb">
-        <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
-        <li ><a href="{{ user.url }}">{{ user.username }}</a></li>
-    <li class="active">{% trans %}All Topics{% endtrans %}</li>
-    </ol>
+{% block breadcrumb %}
+<ul class="breadcrumb flaskbb-breadcrumb">
+    <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li><a href="{{ user.url }}">{{ user.username }}</a></li>
+    <li class="active">{% trans %}Topics{% endtrans %}</li>
+</ul>
+{% endblock %}
 
-    <div class="row controls-row">
-        <div class="col-md-12 col-sm-12 col-xs-12 controls-col">
-            <div class="pull-left">
-                {{ render_pagination(topics, url_for('user.view_all_topics', username=user.username)) }}
-            </div>
-        </div>
-    </div>
+{% block profile_navigation %}
+<ul class="nav profile-sidenav" id="profile-tabs" role="tablist">
+    <li>
+        <a href="{{ user.url }}">
+            <span class="fa fa-home"></span> {% trans %}Overview{% endtrans %}
+        </a>
+    </li>
+    {#
+    <li>
+        <a href="{{ user.url }}">
+            <span class="fa fa-line-chart"></span> {% trans %}Statistics{% endtrans %}
+        </a>
+    </li>
+    #}
+    <li class="active">
+        <a href="{{ url_for('user.view_all_topics', username=user.username) }}">
+            <span class="fa fa-comments"></span> {% trans %}Topics{% endtrans %}
+        </a>
+    </li>
 
-    <div class="panel forum-panel">
-        <div class="panel-heading forum-head">
-            {% trans user=user.username %}All Topics created by {{user}}{% endtrans %}
-        </div>
+    <li>
+        <a href="{{ url_for('user.view_all_posts', username=user.username) }}">
+            <span class="fa fa-comment"></span> {% trans %}Posts{% endtrans %}
+        </a>
+    </li>
+</ul>
+{% endblock %}
 
-        <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>
+{% block profile_content %}
+<!-- middle column -->
+<div class="col-md-9 col-sm-9 col-xs-12 profile-content">
 
-            {% for topic in topics.items %}
-            <div class="row forum-row hover clearfix">
+    {% for topic in topics.items %}
 
-                <div class="col-md-5 col-sm-5 col-xs-8 topic-info">
-                    <div class="row">
-                        <div class="col-md-1 col-sm-2 col-xs-2 topic-status">
-                        {% if topic.locked %}
-                            <span class="fa fa-lock topic-locked"></span>
-                        {% elif topic.important %}
-                            <span class="fa fa-star-o topic-starred-read"></span>
-                        {% else %}
-                            <span class="fa fa-comment-o topic-read"></span>
-                        {% endif %}
-                        </div>
-                        <div class="col-md-11 col-sm-10 col-xs-10">
-                            <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="panel page-panel">
+        <div class="panel-heading page-head topic-head">
+            <strong><a href="{{ topic.url }}">{{ topic.title }}</a></strong> in <a href="{{ topic.forum.url }}">{{ topic.forum.title }}</a>
+        </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>
-                </div>
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
-                    {{ topic.post_count }}
+        <div class="panel-body page-body topic-content">
+            <div class="col-md-12 col-sm-12 col-xs-12">
+                <div class="topic-created">
+                    {{ topic.date_created|format_date('%d %B %Y - %H:%M') }}
                 </div>
-
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
-                    {{ topic.views }}
+                <div class="topic-content">
+                {{ topic.first_post.content|markup|safe }}
                 </div>
+            </div>
+        </div>
+    </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>
+    {% else %}
+    <div class="row">
+        <div class="col-md-12 col-sm-12 co-xs-12">
+            {% trans %}The user has not opened any topics yet.{% endtrans %}
+        </div>
+    </div> <!-- end forum-row -->
+    {% endfor %}
 
-            </div>  <!-- end forum-row -->
-            {% else %}
-            <div class="row forum-row clearfix">
-                <div class="col-md-12 col-sm-12 co-xs-12">
-                    {% trans %}No topics.{% endtrans %}
-                </div>
-            </div> <!-- end forum-row -->
-            {% endfor %}
+    {% if topics.items|length >= 1 %}
+    <div class="col-md-12 col-sm-12 col-xs-12 controls-col">
+        <div class="pull-left">
+            {{ render_pagination(topics, url_for('user.view_all_topics', username=user.username)) }}
         </div>
     </div>
+    {% endif %}
+
 </div>
 {% endblock %}

flaskbb/themes/aurora/templates/user/profile.html

@@ -9,96 +9,43 @@
 
 {% block profile_content %}
 <!-- middle column -->
-<div class="col-md-9 col-sm-9 col-xs-12">
-
-
-                        <div class="tab-content">
-                            <div role="tabpanel" class="tab-pane active" id="overview">
-
-                                {{ user.notes }}
-
-                            </div>
-                            <div role="tabpanel" class="tab-pane" id="statistics">
-
-                                {{ user.post_count }}
-
-                            </div>
-                        </div>
-
-    <div class="panel page-panel">
-        <div class="panel-heading page-head">{% trans %}Info{% endtrans %}</div>
-        <div class="panel-body page-body">
-            <div class="col-md-12 col-sm-12 col-xs-12 profile-field">
-            {% if user.notes %}
-                {{ user.notes|markup|safe }}
-            {% else %}
-                {% trans %}User has not added any notes about him.{% endtrans %}
+<div class="col-md-9 col-sm-9 col-xs-12 profile-content">
+
+
+    <div class="tab-content">
+        <div role="tabpanel" class="tab-pane active" id="overview">
+
+            <div class="panel page-panel">
+                <div class="panel-heading page-head">{% trans %}Info{% endtrans %}</div>
+                <div class="panel-body page-body">
+                    <div class="col-md-12 col-sm-12 col-xs-12 profile-field">
+                    {% if user.notes %}
+                        {{ user.notes|markup|safe }}
+                    {% else %}
+                        <p>{% trans %}User has not added any notes about him.{% endtrans %}</p>
+                    {% endif %}
+                    </div>
+                </div>
+            </div> <!-- end profile widget -->
+
+
+            {% if user.signature %}
+            <div class="panel page-panel">
+                <div class="panel-heading page-head">{% trans %}Signature{% endtrans %}</div>
+                <div class="panel-body page-body">
+                    <div class="col-md-12 col-sm-12 col-xs-12 profile-field">
+                        {{ user.signature|markup|safe }}
+                    </div>
+                </div>
+            </div> <!-- end profile widget -->
             {% endif %}
-            </div>
-        </div>
-    </div> <!-- end profile widget -->
 
-    {% if user.signature %}
-    <div class="panel page-panel">
-        <div class="panel-heading page-head">{% trans %}Signature{% endtrans %}</div>
-        <div class="panel-body page-body">
-            <div class="col-md-12 col-sm-12 col-xs-12 profile-field">
-                {{ user.signature|markup|safe }}
-            </div>
         </div>
-    </div> <!-- end profile widget -->
-    {% endif %}
-</div> <!-- end col -->
+        <div role="tabpanel" class="tab-pane" id="info">
 
-<!-- right column -->
-<div class="col-md-3 col-sm-4 col-xs-12" style="display:none">
-    <div class="panel page-panel">
-        <div class="panel-heading page-head">{% trans %}User Stats{% endtrans %}</div>
-        <div class="panel-body page-body">
-
-            <div class="profile-stats">
-                <div class="col-md-5 col-sm-6 col-xs-6"><p class="stats-right">{% trans %}Group{% endtrans %}:</p></div>
-                <div class="col-md-7 col-sm-6 col-xs-6"><p>{{ user.primary_group.name }}</p></div>
-            </div>
-
-            <div class="profile-stats">
-                <div class="col-md-5 col-sm-6 col-xs-6"><p class="stats-right">{% trans %}Joined{% endtrans %}:</p></div>
-                <div class="col-md-7 col-sm-6 col-xs-6"><p>{{ user.date_joined|format_date('%b %d %Y') }}</p></div>
-            </div>
-
-            <div class="profile-stats">
-                <div class="col-md-5 col-sm-6 col-xs-6"><p class="stats-right">{% trans %}Posts{% endtrans %}:</p></div>
-                <div class="col-md-7 col-sm-6 col-xs-6"><p>{{ user.post_count }} ({{ user.posts_per_day }} per day)</p></div>
-            </div>
-
-            <div class="profile-stats">
-                <div class="col-md-5 col-sm-6 col-xs-6"><p class="stats-right">{% trans %}Last seen{% endtrans %}:</p></div>
-                <div class="col-md-7 col-sm-6 col-xs-6"><p>{%- if user.lastseen -%} {{ user.lastseen|time_since }} {%- else -%} {% trans %}Never seen{% endtrans %} {%- endif -%}</p></div>
-            </div>
-
-            <div class="profile-stats">
-                <div class="col-md-5 col-sm-6 col-xs-6"><p class="stats-right">{% trans %}Last post{% endtrans %}:</p></div>
-                <div class="col-md-7 col-sm-6 col-xs-6"><p>
-                    {%- if user.last_post -%}
-                    <a href="{{ user.last_post.url }}">{{ user.last_post.date_created|time_since }}</a>
-                    {%- else -%}
-                        {% trans %}Never{% endtrans %}
-                    {%- endif -%}
-              </p></div>
-            </div>
-
-            <div class="profile-stats">
-              <div class="col-md-5 col-sm-6 col-xs-6"><p class="stats-right">{% trans %}Location{% endtrans %}:</p></div>
-              <div class="col-md-7 col-sm-6 col-xs-6"><p>{%- if user.location -%} {{ user.location }} {%- else -%} {% trans %}No Info{% endtrans %} {%- endif -%}</p></div>
-            </div>
-
-            <div class="profile-stats">
-              <div class="col-md-5 col-sm-6 col-xs-6"><p class="stats-right">{% trans %}Birthday{% endtrans %}:</p></div>
-              <div class="col-md-7 col-sm-6 col-xs-6"><p>{% if user.birthday %} {{ user.birthday|format_date('%b %d %Y') }} {% else %} {% trans %}No Info{% endtrans %} {% endif %} {% if user.gender %} ({{ user.gender }}) {% endif %}</p></div>
-            </div>
+            {{ user.post_count }}
 
         </div>
-    </div> <!-- end panel-widget -->
-
+    </div>
 </div> <!-- end col -->
 {% endblock %}

flaskbb/themes/aurora/templates/user/profile_layout.html

@@ -11,7 +11,7 @@
                 <div class="panel-heading page-head">
                     <a href="{{ user.url }}">{{ user.username }}</a>
                 </div>
-                <div class="panel-body page-body">
+                <div class="panel-body page-body profile-body">
                     {% block profile_sidebar %}
                     <div class="col-md-3 col-sm-3 col-xs-12 profile-sidebar">
                         <div class="profile-picture">
@@ -24,40 +24,59 @@
                             {{ user.primary_group.name }}
                         </div>
 
-                        <div class="profile-buttons">
-                            {% if current_user.is_authenticated() %}
-                            <a class="btn btn-primary" href="{{ url_for('message.new_conversation') }}?to_user={{ user.username }}">
-                                {% trans %}Message{% endtrans %}
-                            </a>
-                            {% endif %}
+                        <div class="profile-online" data-toggle="tooltip" data-placement="top" title="{%- if user.lastseen -%} {{ user.lastseen|time_since }} {%- else -%} {% trans %}Never seen{% endtrans %} {%- endif -%}">
+                            {%- if user|is_online %}
+                            <span class="label label-success">online</span>
+                            {%- else %}
+                            <span class="label label-default">offline</span>
+                            {%- endif %}
                         </div>
 
-                        <div class="profile-lastseen"></div>
+                        <div class="profile-sidebar-stats">
+                            <div class="profile-posts">
+                                {{ user.post_count }} posts
+                            </div>
+
+                            <div class="profile-date">
+                                {{ user.date_joined|format_date('%b %d %Y') }}
+                            </div>
 
-                        <ul class="nav profile-sidenav">
+                            <div class="profile-buttons">
+                                {% if current_user.is_authenticated() %}
+                                <a class="btn btn-primary" href="{{url_for('message.new_conversation') }}?to_user={{ user.username }}">
+                                    {% trans %}Message{% endtrans %}
+                                </a>
+                                {% endif %}
+                            </div>
+                        </div>
+
+                        {% block profile_navigation %}
+                        <ul class="nav profile-sidenav" id="profile-tabs" role="tablist">
                             <li class="active">
-                                <a href="#overview" role="tab" data-toggle="tab">
+                                <a href="{{ user.url }}#overview" role="tab" data-toggle="tab">
                                     <span class="fa fa-home"></span> {% trans %}Overview{% endtrans %}
                                 </a>
                             </li>
+                            {#
                             <li>
-                                <a href="#info" role="tab" data-toggle="tab">
+                                <a href="{{ user.url }}#info" role="tab" data-toggle="tab">
                                     <span class="fa fa-line-chart"></span> {% trans %}Statistics{% endtrans %}
                                 </a>
                             </li>
+                            #}
                             <li>
                                 <a href="{{ url_for('user.view_all_topics', username=user.username) }}">
-                                    <span class="fa fa-comments"></span> {% trans %}All Topics{% endtrans %}
+                                    <span class="fa fa-comments"></span> {% trans %}Topics{% endtrans %}
                                 </a>
                             </li>
 
                             <li>
                                 <a href="{{ url_for('user.view_all_posts', username=user.username) }}">
-                                    <span class="fa fa-comment"></span> {% trans %}All Posts{% endtrans %}
+                                    <span class="fa fa-comment"></span> {% trans %}Posts{% endtrans %}
                                 </a>
                             </li>
                         </ul>
-
+                        {% endblock %}
                     </div>
                     {% endblock %}
 
@@ -77,5 +96,8 @@
     $(function () {
       $('[data-toggle="tooltip"]').tooltip()
     })
+
+    $('#profile-tabs a[href="#overview"]').tab('show') // Select tab by name
+    //$('#profile-tabs a[href="#info"]').tab('show') // Select tab by name
     </script>
 {% endblock %}