[WIP] profile view redesign

flaskbb/themes/aurora/src/flaskbb.scss

@@ -1112,3 +1112,92 @@ p.flaskbb-stats {
         color: #444;
     }
 }
+
+
+.profile-content {
+
+}
+
+.profile-picture {
+    text-align: center;
+
+    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-signature {
+
+}
+
+
+
+.profile-groupname {
+    text-align: center;
+    margin-top: 20px;
+    color: #5b9bd1;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.profile-buttons {
+    text-align: center;
+    margin-top: 10px;
+    margin-bottom: 15px;
+
+    .btn {
+        text-transform: uppercase;
+        font-size: 11px;
+        font-weight: 600;
+        padding: 6px 15px;
+        margin-right: 5px;
+    }
+
+}
+
+.profile-sidebar {
+    padding: 7px 0;
+    border-right: 1px solid $border-color;
+    ul li {
+        border-bottom: 1px solid #f0f4f7;
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        a {
+            color: #93a3b5;
+            font-size: 14px;
+            font-weight: 400;
+
+            &:hover {
+                background-color: #fafcfd;
+                color: #5b9bd1;
+            }
+
+            i {
+                margin-right: 8px;
+                font-size: 14px;
+            }
+        }
+
+        &.active {
+            border-bottom: none;
+
+            a {
+                color: #5b9bd1;
+                background-color: #f6f9fb;
+                //border-right: 2px solid #5b9bd1;
+            }
+
+        }
+    }
+
+}

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

@@ -1,141 +1,104 @@
-{% extends theme("layout.html") %}
-{% block content %}
+{% extends theme("user/profile_layout.html") %}
+
+{% block breadcrumb %}
 <ul class="breadcrumb flaskbb-breadcrumb">
     <li><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
     <li class="active">{{ user.username }}</li>
 </ul>
+{% endblock %}
 
-<div class="page-view">
-    <div class="row">
-        <!-- left column -->
-        <div class="col-md-2 col-sm-3 col-xs-12">
-            <div class="panel page-panel">
-                <div class="panel-heading page-head">
-                    <a href="{{ user.url }}">{{ user.username }}</a>
-                </div>
-
-                <div class="panel-body page-body">
-                    <div class="col-md-12 col-sm-12 col-xs-12 profile-stats">
-                        <div class="profile-picture">
-                            {% if user.avatar %}
-                            <img src="{{ user.avatar }}" alt="Avatar" class="profile-avatar">
-                            {% endif %}
-                        </div>
+{% block profile_content %}
+<!-- middle column -->
+<div class="col-md-9 col-sm-9 col-xs-12">
 
-                        <div class="profile-online">
-                            {% if user|is_online %}
-                            <span class="label label-success" data-toggle="tooltip" data-placement="right" title="online">Online</span>
-                            {% else %}
-                            <span class="label label-default" data-toggle="tooltip" data-placement="right" title="offline">Offline</span>
-                            {% endif %}
-                        </div>
 
-                        <div class="profile-pm">
-                            {% if current_user.is_authenticated() %}
-                            <a href="{{ url_for('message.new_conversation') }}?to_user={{ user.username }}">{% trans %}Send a Message{% endtrans %}</a>
-                            {% endif %}
-                        </div>
+                        <div class="tab-content">
+                            <div role="tabpanel" class="tab-pane active" id="overview">
 
-                        <div class="profile-topics">
-                            <a href="{{ url_for('user.view_all_topics', username=user.username) }}">{% trans %}All Topics{% endtrans %}</a>
-                        </div>
+                                {{ user.notes }}
 
-                        <div class="profile-posts">
-                            <a href="{{ url_for('user.view_all_posts', username=user.username) }}">{% trans %}All Posts{% endtrans %}</a>
+                            </div>
+                            <div role="tabpanel" class="tab-pane" id="statistics">
+
+                                {{ user.post_count }}
+
+                            </div>
                         </div>
-                    </div>
-                </div>
-            </div> <!-- end profile widget -->
-        </div> <!-- end col -->
-
-
-        <!-- middle column -->
-        <div class="col-md-7 col-sm-5 col-xs-12">
-            <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 %}
-                    {% 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 -->
-
-
-        <!-- right column -->
-        <div class="col-md-3 col-sm-4 col-xs-12">
-            <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>
-
-                </div>
-            </div> <!-- end panel-widget -->
-
-        </div> <!-- end col -->
-    </div> <!-- end row -->
-</div>
-{% endblock %}
 
-{% block scripts %}
-    <script>
-    $(function () {
-      $('[data-toggle="tooltip"]').tooltip()
-    })
-    </script>
+    <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 %}
+            {% 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 -->
+
+<!-- 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>
+
+        </div>
+    </div> <!-- end panel-widget -->
+
+</div> <!-- end col -->
 {% endblock %}

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

@@ -0,0 +1,81 @@
+{% extends theme("layout.html") %}
+{% block content %}
+
+{% block breadcrumb %}
+{% endblock %}
+
+<div class="page-view">
+    <div class="row">
+        <div class="col-md-12 col-sm-12 col-xs-12">
+            <div class="panel page-panel">
+                <div class="panel-heading page-head">
+                    <a href="{{ user.url }}">{{ user.username }}</a>
+                </div>
+                <div class="panel-body page-body">
+                    {% block profile_sidebar %}
+                    <div class="col-md-3 col-sm-3 col-xs-12 profile-sidebar">
+                        <div class="profile-picture">
+                            {% if user.avatar %}
+                            <img src="{{ user.avatar }}" alt="{{ user.username }}'s Avatar">
+                            {% endif %}
+                        </div>
+
+                        <div class="profile-groupname">
+                            {{ 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>
+
+                        <div class="profile-lastseen"></div>
+
+                        <ul class="nav profile-sidenav">
+                            <li class="active">
+                                <a href="#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">
+                                    <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 %}
+                                </a>
+                            </li>
+
+                            <li>
+                                <a href="{{ url_for('user.view_all_posts', username=user.username) }}">
+                                    <span class="fa fa-comment"></span> {% trans %}All Posts{% endtrans %}
+                                </a>
+                            </li>
+                        </ul>
+
+                    </div>
+                    {% endblock %}
+
+                    {% block profile_content %}
+                    {% endblock %}
+
+                </div> <!-- end profile widget -->
+            </div> <!-- end page-panel -->
+        </div> <!-- end col -->
+    </div> <!-- end row -->
+</div> <!-- end page-view -->
+
+{% endblock %} {# content #}
+
+{% block scripts %}
+    <script>
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
+{% endblock %}