Finish user profile

flaskbb/templates/user/all_posts.html

@@ -1,25 +1,24 @@
 {% extends theme("user/profile_layout.html") %}
-{% from theme('macros.html') import render_pagination, topic_pages %}
+{%- from theme("_macros/pagination.html") import render_pagination, topic_pages %}
 
 {% 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>
+<ol class="breadcrumb flaskbb-breadcrumb bg-light">
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ user.url }}">{{ user.username }}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Posts{% endtrans %}</li>
+</ol>
 {% endblock %}
 
 {% block profile_content %}
-<!-- middle column -->
-<div class="col-md-9 col-sm-9 col-xs-12 profile-content">
+<div class="col-12 profile-content">
 
     {% for post in posts.items %}
-    <div class="panel page-panel">
-        <div class="panel-heading page-head topic-head">
-            <a href="{{ post.url }}">{% trans topic_title=post.topic.title %}In topic <strong>{{ topic_title }}</strong>{% endtrans %}</a>
+    <div class="card page mb-3">
+        <div class="card-header page-header topic-header  fw-normal">
+            <a href="{{ post.url }}">{% trans topic_title=post.topic.title %}<strong>{{ topic_title }}</strong>{% endtrans %}</a>
         </div>
-        <div class="panel-body page-body topic-content">
-            <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="card-body page-body topic-content">
+            <div class="col-12 ps-3">
                 <div class="topic-created">
                     {{ post.date_created|format_datetime }}
                 </div>
@@ -31,7 +30,7 @@
     </div>
     {% else %}
     <div class="row">
-        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="col-12">
             <div class="alert-message alert-message-info" role="alert">
                 {% trans %}No posts yet{% endtrans %}
             </div>
@@ -40,10 +39,8 @@
     {% endfor %}
 
     {% if posts.items %}
-    <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 class="col-12 controls-col">
+        {{ render_pagination(posts, url_for('user.view_all_posts', username=user.username)) }}
     </div>
     {% endif %}
 

flaskbb/templates/user/all_topics.html

@@ -1,21 +1,20 @@
 {% extends theme("user/profile_layout.html") %}
-{% from theme('macros.html') import render_pagination, topic_pages %}
+{%- from theme("_macros/pagination.html") import render_pagination, topic_pages %}
 
 {% 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>
+<ol class="breadcrumb flaskbb-breadcrumb bg-light">
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item"><a href="{{ user.url }}">{{ user.username }}</a></li>
+    <li class="breadcrumb-item active">{% trans %}Topics{% endtrans %}</li>
+</ol>
 {% endblock %}
 
 {% block profile_content %}
-<!-- middle column -->
-<div class="col-md-9 col-sm-9 col-xs-12 profile-content">
+<div class="col-12 profile-content">
 
     {% for topic in topics.items %}
-    <div class="panel page-panel">
-        <div class="panel-heading page-head topic-head">
+    <div class="card page mb-3">
+        <div class="card-header page-header topic-header fw-normal">
             {% trans trimmed
                 topic_url=topic.url,
                 topic_title=topic.title,
@@ -26,8 +25,8 @@
                 in forum <a href="{{ forum_url }}">{{ forum_title }}</a>
             {% endtrans %}
         </div>
-        <div class="panel-body page-body topic-content">
-            <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="card-body page-body topic-content">
+            <div class="col-12 ps-3">
                 <div class="topic-created">
                     {{ topic.date_created|format_datetime }}
                 </div>
@@ -39,7 +38,7 @@
     </div>
     {% else %}
     <div class="row">
-        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="col-12">
             <div class="alert-message alert-message-info" role="alert">
                 {% trans %}No topics yet{% endtrans %}
             </div>
@@ -48,10 +47,8 @@
     {% endfor %}
 
     {% if topics.items %}
-    <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 class="col-12 controls-col">
+        {{ render_pagination(topics, url_for('user.view_all_topics', username=user.username)) }}
     </div>
     {% endif %}
 

flaskbb/templates/user/profile.html

@@ -1,31 +1,28 @@
 {% 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>
+<ol class="breadcrumb flaskbb-breadcrumb bg-light">
+    <li class="breadcrumb-item"><a href="{{ url_for('forum.index') }}">{% trans %}Forum{% endtrans %}</a></li>
+    <li class="breadcrumb-item active"><a href="{{ user.url }}">{{ user.username }}</a></li>
+</ol>
 {% endblock %}
 
 {% block profile_content %}
-<!-- middle column -->
-<div class="col-md-9 col-sm-9 col-xs-12 profile-content">
-
-
+<div class="col-12 profile-content">
     <div class="tab-content">
         <div role="tabpanel" class="tab-pane active" id="overview">
             {% if user.notes %}
-            <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">
+            <div class="card page">
+                <div class="card-header page-header">{% trans %}Info{% endtrans %}</div>
+                <div class="card-body page-body">
+                    <div class="col-12 profile-field">
                         {{ user.notes|markup }}
                     </div>
                 </div>
             </div> <!-- end profile widget -->
             {% else %}
             <div class="row">
-                <div class="col-md-12 col-sm-12 co-xs-12">
+                <div class="col-12">
                     <div class="alert-message alert-message-info" role="alert">
                         {% trans %}User has not added any notes.{% endtrans %}
                     </div>
@@ -34,10 +31,10 @@
             {% endif %}
 
             {% 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">
+            <div class="card page">
+                <div class="card-header page-header">{% trans %}Signature{% endtrans %}</div>
+                <div class="card-body page-body">
+                    <div class="col-12 profile-field">
                         {{ user.signature|markup }}
                     </div>
                 </div>
@@ -45,50 +42,6 @@
             {% endif %}
 
         </div>
-        {# Other information available for use:
-         # TODO: eventually use the information (i don't how i should represent it.. any ideas?)
-        <div role="tabpanel" class="tab-pane" id="info">
-            <div>
-                {% trans %}Group{% endtrans %}:
-                {{ user.primary_group.name }}
-            </div>
-            <div>
-                {% trans %}Joined{% endtrans %}:
-                {{ user.date_joined|format_date }}
-            </div>
-            <div>
-                {% trans %}Posts{% endtrans %}:
-                {{ user.post_count }} ({{ user.posts_per_day }} per day)
-            </div>
-            <div>
-                {% trans %}Last seen{% endtrans %}:
-                {%- if user.lastseen -%} {{ user.lastseen|time_since }} {%- else -%} {% trans %}Never seen{% endtrans %} {%- endif -%}
-            </div>
-            <div>
-                {% trans %}Last post{% endtrans %}:
-                {%- if user.last_post -%}
-                    <a href="{{ user.last_post.url }}">{{ user.last_post.date_created|time_since }}</a>
-                {%- else -%}
-                    {% trans %}Never{% endtrans %}
-                {%- endif -%}
-            </div>
-            <div>
-                {% trans %}Location{% endtrans %}:
-                {%- if user.location -%} {{ user.location }} {%- else -%} {% trans %}No Info{% endtrans %} {%- endif -%}
-            </div>
-            <div>
-                {% trans %}Birthday{% endtrans %}:
-                {% if user.birthday %}
-                    {{ user.birthday|format_date }}
-                {% else %}
-                    {% trans %}No Info{% endtrans %}
-                {% endif %}
-                {% if user.gender %}
-                    ({{ user.gender }})
-                {% endif %}
-            </div>
-        </div>
-        #}
     </div>
 </div> <!-- end col -->
 {% endblock %}

flaskbb/templates/user/profile_layout.html

@@ -1,4 +1,4 @@
-{%- from theme("macros.html") import sidebar with context -%}
+{%- from theme("_macros/navigation.html") import sidebar with context -%}
 {% extends theme("layout.html") %}
 {% set page_title = _("%(user)s - User", user=user.username) %}
 
@@ -6,91 +6,107 @@
 
 {% 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 class="pull-right">
-                    {# Ban user #}
-                    {% if current_user|can_ban_user and not user.permissions['banned'] %}
-                    <form class="inline-form" method="post" action="{{ url_for('management.ban_user', user_id=user.id) }}">
-                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                        <button class="btn btn-xs btn-danger">
-                            <i class="fa fa-ban"></i> {% trans %}Ban{% endtrans %}
-                        </button>
-                    </form>
-                    {% endif %}
-
-                    {# Unban user #}
-                    {% if current_user|can_ban_user and user.permissions['banned'] %}
-                    <form class="inline-form" method="post" action="{{ url_for('management.unban_user', user_id=user.id) }}">
-                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
-                        <button class="btn btn-xs btn-warning">
-                            <i class="fa fa-ban"></i> {% trans %}Unban{% endtrans %}
-                        </button>
-                    </form>
-                    {% endif %}
+    <div class="card profile">
 
-                    {% if current_user|can_edit_user %}
-                    <a class="btn btn-xs btn-primary" href="{{ url_for('management.edit_user', user_id=user.id)}}"><i class="fa fa-pencil"></i> {% trans %}Edit{% endtrans %}</a>
-                    {% endif %}
+        <div class="card-header profile-header bg-white">
+            <div class="row">
+                <div class="col-12 col-sm-auto mb-3">
+                    <div class="mx-auto" style="width: 150px;">
+                        <div class="d-flex justify-content-center align-items-center">
+                            <img class="rounded" src="{{ url_for('static', filename='avatar150x150.png') }}" alt="" />
+                        </div>
                     </div>
                 </div>
-                <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">
-                            {% if user.avatar %}
-                            <img src="{{ user.avatar }}" alt="{{ user.username }}'s Avatar">
-                            {% endif %}
-                        </div>
-
-                        <div class="profile-groupname">
-                            {{ user.primary_group.name }}
+                <div class="col d-flex flex-column flex-sm-row justify-content-between mb-3">
+                    <div class="text-sm-left mb-2 mb-sm-0">
+                        <h4 class="pt-sm-2 pb-1 mb-0 text-nowrap">{{ user.username }}</h4>
+                        <p class="mb-0">{{ user.primary_group.name }}</p>
+                        <div class="text-muted">
+                            <small>
+                                {%- if user|is_online %}
+                                <span class="badge bg-success">{% trans %}online{% endtrans %}</span>
+                                {%- else %}
+                                    {%- if user.lastseen -%}
+                                    Last seen {{ user.lastseen|time_since }}
+                                    {%- else -%}
+                                    {% trans %}Never seen{% endtrans %}
+                                    {%- endif -%}
+                                {%- endif %}
+                            </small>
                         </div>
+                        <div class="mt-2">
 
-                        <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">{% trans %}online{% endtrans %}</span>
-                            {%- else %}
-                            <span class="label label-default">{% trans %}offline{% endtrans %}</span>
-                            {%- endif %}
-                        </div>
+                            {% if current_user|can_edit_user %}
+                            <a class="btn btn-sm btn-primary" href="{{ url_for('management.edit_user', user_id=user.id)}}">
+                                <span class="fas fa-edit"></span> {% trans %}Edit{% endtrans %}
+                            </a>
+                            {% endif %}
 
-                        <div class="profile-sidebar-stats">
-                            <div class="profile-posts">
-                                {{ user.post_count }} {% trans %}posts{% endtrans %}
-                            </div>
+                            {# Ban user #}
+                            {% if current_user|can_ban_user and not user.permissions['banned'] %}
+                            <form class="d-inline" method="post" action="{{ url_for('management.ban_user', user_id=user.id) }}">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                                <button class="btn btn-sm btn-danger">
+                                    <span class="fas fa-ban"></span> {% trans %}Ban{% endtrans %}
+                                </button>
+                            </form>
+                            {# Unban user #}
+                            {% elif current_user|can_ban_user and user.permissions['banned'] %}
+                            <form class="d-inline" method="post" action="{{ url_for('management.unban_user', user_id=user.id) }}">
+                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+                                <button class="btn btn-sm btn-warning">
+                                    <span class="fas fa-ban"></span> {% trans %}Unban{% endtrans %}
+                                </button>
+                            </form>
+                            {% endif %}
 
-                            <div class="profile-date">
+                        </div>
+                    </div>
+                    <div class="text-sm-right col-2">
+                        <!-- TODO: Make this nicer -->
+                        <div class="row">
+                            <div class="col text-end text-nowrap" style="max-width: 80px;">Joined:</div>
+                            <div class="col ps-0 float-start text-nowrap">
                                 {{ user.date_joined|format_date }}
                             </div>
-
-                            {{ run_hook("flaskbb_tpl_profile_sidebar_stats", user=user) }}
                         </div>
-
-                    {{ sidebar(
-                        run_hook(
-                            "flaskbb_tpl_profile_sidebar_links",
-                            user=user,
-                            is_markup=False
-                            ),
-                            extra_class="profile-sidebar"
-                        )
-                    }}
+                        <div class="row">
+                            <div class="col text-end text-nowrap" style="max-width: 80px;">Posts:</div>
+                            <div class="col ps-0 text-start text-nowrap">{{ user.post_count }}</div>
+                        </div>
+                        <div class="row">
+                            <div class="col text-end text-nowrap" style="max-width: 80px;">Topics:</div>
+                            <div class="col ps-0 float-start text-nowrap">{{ user.topic_count }}</div>
+                        </div>
                     </div>
-                    {% endblock %}
+                </div>
+
+            </div>
+            {% block profile_navigation %}
+
+                {{ sidebar(
+                    run_hook(
+                        "flaskbb_tpl_profile_sidebar_links",
+                        user=user,
+                        is_markup=False
+                    ),
+                    extra_class="nav-tabs card-header-tabs profile-header-tab"
+                    )
+                }}
 
-                    {% block profile_content %}
-                    {% endblock %}
+            {% endblock %}
+        </div>
+
+        <div class="card-body page-body">
+            <div class="row">
+                {% block profile_content %}
+                {% endblock %}
+            </div>
 
-                </div> <!-- end profile widget -->
-            </div> <!-- end page-panel -->
         </div> <!-- end col -->
     </div> <!-- end row -->
 </div> <!-- end page-view -->
 
-{% endblock %} {# content #}
+
+{% endblock content %}