Migrate 'col-xs' to 'col' and 'hidden-xs' to 'd-none d-sm-block'

flaskbb/templates/errors/forbidden_page.html

@@ -4,12 +4,10 @@
 {% block content %}
 
 <div class="card page">
-    <div class="card-body page-body">
-        <div class="col-md-12 col-sm-12 col-xs-12">
-            <h1>{% trans %}403 - Forbidden Page{% endtrans %}</h1>
-            <p>{% trans %}You do not have the permission to view this page.{% endtrans %}</p>
-            <p><a href="{{url_for('forum.index')}}">{% trans %}Back to the Forums{% endtrans %}</a></p>
-        </div>
+    <div class="card-body">
+        <h1 class="card-title">{% trans %}403 - Forbidden Page{% endtrans %}</h1>
+        <p class="card-text mb-0">{% trans %}You do not have the permission to view this page.{% endtrans %}</p>
+        <p class="card-text"><a href="{{url_for('forum.index')}}">{% trans %}Back to the Forums{% endtrans %}</a></p>
     </div>
 </div>
 

flaskbb/templates/errors/page_not_found.html

@@ -4,12 +4,10 @@
 {% block content %}
 
 <div class="card page">
-    <div class="card-body page-body">
-        <div class="col-md-12 col-sm-12 col-xs-12">
-            <h1>{% trans %}404 - Page not found!{% endtrans %}</h1>
-            <p>{% trans %}The page you were looking for does not exist.{% endtrans %}</p>
-            <p><a href="{{url_for('forum.index')}}">{% trans %}Back to the Forums{% endtrans %}</a></p>
-        </div>
+    <div class="card-body">
+        <h1 class="card-title">{% trans %}404 - Page not found!{% endtrans %}</h1>
+        <p class="card-text mb-0">{% trans %}The page you were looking for does not exist.{% endtrans %}</p>
+        <p class="card-text"><a href="{{url_for('forum.index')}}">{% trans %}Back to the Forums{% endtrans %}</a></p>
     </div>
 </div>
 

flaskbb/templates/errors/server_error.html

@@ -4,11 +4,9 @@
 {% block content %}
 
 <div class="card page">
-    <div class="card-body page-body">
-        <div class="col-md-12 col-sm-12 col-xs-12">
-            <h1>{% trans %}500 - Server Error{% endtrans %}</h1>
-            <p>{% trans %}Something went wrong!{% endtrans %}</p>
-        </div>
+    <div class="card-body">
+        <h1 class="card-title">{% trans %}500 - Server Error{% endtrans %}</h1>
+        <p class="card-text">{% trans %}Something went wrong!{% endtrans %}</p>
     </div>
 </div>
 

flaskbb/templates/errors/too_many_logins.html

@@ -4,12 +4,10 @@
 {% block content %}
 
 <div class="card page">
-    <div class="card-body page-body">
-        <div class="col-md-12 col-sm-12 col-xs-12">
-            <h1>{% trans %}429 - Too Many Requests{% endtrans %}</h1>
-            <p>{% trans %}In order to prevent brute force attacks on accounts we have limited the amount of requests on this route.{% endtrans %}</p>
-            <p>Please try again in <strong>{{ timeout }}</strong>.</p>
-        </div>
+    <div class="card-body">
+        <h1 class="card-title">{% trans %}429 - Too Many Requests{% endtrans %}</h1>
+        <p class="card-text mb-0">{% trans %}In order to prevent brute force attacks on accounts we have limited the amount of requests on this route.{% endtrans %}</p>
+        <p class="card-text">{% trans %}Please try again in{% endtrans %} <strong>{{ timeout }}</strong></p>
     </div>
 </div>
 

flaskbb/templates/forum/category_layout.html

@@ -17,7 +17,7 @@
             <div class="col-md-5 col-sm-5 col-8 forum-info ps-3">
                 <!-- Icon -->
                 <div class="forum-status">
-                    <span class="fa fa-external-link fa-fw forum-external"></span>
+                    <span class="fas fa-external-link fa-fw forum-external"></span>
                 </div>
 
                 <!-- Forum Name -->
@@ -50,7 +50,7 @@
                 <!-- Icon -->
                 <div class="forum-status">
                     {% if forum.locked %}
-                        <span class="fa fa-lock fa-fw forum-locked"></span>
+                        <span class="fas fa-lock fa-fw forum-locked"></span>
                     {% elif forum|forum_is_unread(forumsread, current_user) %}
                         <span class="fas fa-comments fa-fw forum-unread"></span>
                     {% else %}

flaskbb/templates/forum/index.html

@@ -13,12 +13,12 @@
         </div>
         <div class="card-body page-body">
             <div class="row page-row">
-                <div class="col-md-6 col-sm-6 col-xs-12">
+                <div class="col-md-6 col-sm-6 col-12">
                     <p class="flaskbb-stats">{% trans %}Total number of registered users{% endtrans %}: <strong>{{ user_count }}</strong></p>
                     <p class="flaskbb-stats">{% trans %}Total number of topics{% endtrans %}: <strong>{{ topic_count }}</strong></p>
                     <p class="flaskbb-stats">{% trans %}Total number of posts{% endtrans %}: <strong>{{ post_count }}</strong></p>
                 </div>
-                <div class="col-md-6 col-sm-6 col-xs-12">
+                <div class="col-md-6 col-sm-6 col-12">
                     <p class="flaskbb-stats">{% trans %}Newest registered user{% endtrans %}: {% if newest_user %}<a href="{{ newest_user.url }}">{{ newest_user.username }}</a>{% else %}{% trans %}No users{% endtrans %}{% endif %}</p>
                     <p class="flaskbb-stats">{% trans %}Registered users online{% endtrans %}: <strong>{{ online_users }}</strong></p>
                     {% if config["REDIS_ENABLED"] %}

flaskbb/templates/forum/search_result.html

@@ -20,7 +20,7 @@
             {% for post in result['post'] %}
             <div id="{{ post.id }}" class="row post-row clearfix">
 
-                <div class="author col-md-2 col-sm-3 col-xs-12">
+                <div class="author col-md-2 col-sm-3 col-12">
                     <!-- Registered User -->
                     {% if post.user_id %}
                     <div class="author-name"><h4><a href="{{ post.user.url }}">{{ post.user.username }}</a></h4></div>
@@ -52,7 +52,7 @@
 
                 </div>
 
-                <div class="post-box col-md-10 col-sm-9 col-xs-12">
+                <div class="post-box col-md-10 col-sm-9 col-12">
 
                     <div class="post-meta clearfix">
                         <div class="pull-left">
@@ -81,7 +81,7 @@
             {% else %}
             <!-- cheating a bit here with page-row :P -->
             <div class="row page-row clearfix">
-                <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No posts found matching your search criteria.{% endtrans %}</div>
+                <div class="col-md-12 col-sm-12 col-12">{% trans %}No posts found matching your search criteria.{% endtrans %}</div>
             </div>
             {% endfor %}
         </div>
@@ -95,23 +95,23 @@
         </div>
         <div class="card-body page-body">
             <div class="page-meta">
-                <div class="col-md-1 col-sm-1 col-xs-1 meta-item">#</div>
-                <div class="col-md-3 col-sm-3 col-xs-5 meta-item">{% trans %}Username{% endtrans %}</div>
-                <div class="col-md-2 col-sm-2 hidden-xs meta-item">{% trans %}Posts{% endtrans %}</div>
-                <div class="col-md-3 col-sm-3 hidden-xs meta-item">{% trans %}Date registered{% endtrans %}</div>
-                <div class="col-md-3 col-sm-3 col-xs-5 meta-item">{% trans %}Group{% endtrans %}</div>
+                <div class="col-md-1 col-sm-1 col-1 meta-item">#</div>
+                <div class="col-md-3 col-sm-3 col-5 meta-item">{% trans %}Username{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block meta-item">{% trans %}Posts{% endtrans %}</div>
+                <div class="col-md-3 col-sm-3 d-none d-sm-block meta-item">{% trans %}Date registered{% endtrans %}</div>
+                <div class="col-md-3 col-sm-3 col-5 meta-item">{% trans %}Group{% endtrans %}</div>
             </div>
             {% for user in result['user'].all() %}
             <div class="row page-row hover clearfix">
-                <div class="col-md-1 col-sm-1 col-xs-1">{{ user.id }}</div>
-                <div class="col-md-3 col-sm-3 col-xs-5"><a href="{{ user.url }}">{{ user.username }}</a></div>
-                <div class="col-md-2 col-sm-2 hidden-xs">{{ user.post_count }}</div>
-                <div class="col-md-3 col-sm-3 hidden-xs">{{ user.date_joined|format_date }}</div>
-                <div class="col-md-3 col-sm-3 col-xs-5">{{ user.primary_group.name }}</div>
+                <div class="col-md-1 col-sm-1 col-1">{{ user.id }}</div>
+                <div class="col-md-3 col-sm-3 col-5"><a href="{{ user.url }}">{{ user.username }}</a></div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block">{{ user.post_count }}</div>
+                <div class="col-md-3 col-sm-3 d-none d-sm-block">{{ user.date_joined|format_date }}</div>
+                <div class="col-md-3 col-sm-3 col-5">{{ user.primary_group.name }}</div>
             </div>
             {% else %}
             <div class="row page-row hover clearfix">
-                <div class="col-md-12 col-sm-12 col-xs-12">{% trans %}No users found matching your search criteria.{% endtrans %}</div>
+                <div class="col-md-12 col-sm-12 col-12">{% trans %}No users found matching your search criteria.{% endtrans %}</div>
             </div>
             {% endfor %}
         </div>
@@ -126,18 +126,18 @@
 
         <div class="card-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 class="col-md-5 col-sm-5 col-8 topic-name">{% trans %}Topic{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block topic-stats">{% trans %}Posts{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block topic-stats">{% trans %}Views{% endtrans %}</div>
+                <div class="col-md-3 col-sm-3 col-4 topic-last-post">{% trans %}Last Post{% endtrans %}</div>
             </div>
 
             {% for topic in result['topic'].all() %}
             <div class="row forum-row hover clearfix">
 
-                <div class="col-md-5 col-sm-5 col-xs-8 topic-info">
+                <div class="col-md-5 col-sm-5 col-8 topic-info">
                     <div class="row">
-                        <div class="col-md-1 col-sm-2 col-xs-2 topic-status">
+                        <div class="col-md-1 col-sm-2 col-2 topic-status">
                         {% if topic.locked %}
                             <span class="fa fa-lock topic-locked"></span>
                         {% elif topic.important %}
@@ -146,7 +146,7 @@
                             <span class="fa fa-comment-o topic-read"></span>
                         {% endif %}
                         </div>
-                        <div class="col-md-11 col-sm-10 col-xs-10">
+                        <div class="col-md-11 col-sm-10 col-10">
                             <div class="topic-name">
                                 <a href="{{ topic.url }}">{{ topic.title }}</a>
                                 <!-- Topic Pagination -->
@@ -164,15 +164,15 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                <div class="col-md-2 col-sm-2 d-none d-sm-block topic-stats">
                     {{ topic.post_count }}
                 </div>
 
-                <div class="col-md-2 col-sm-2 hidden-xs topic-stats">
+                <div class="col-md-2 col-sm-2 d-none d-sm-block topic-stats">
                     {{ topic.views }}
                 </div>
 
-                <div class="col-md-3 col-sm-3 col-xs-4 topic-last-post">
+                <div class="col-md-3 col-sm-3 col-4 topic-last-post">
                     <a href="{{ topic.last_post.url }}">{{ topic.last_post.date_created|time_since }}</a><br />
 
                     <div class="topic-author">
@@ -205,23 +205,23 @@
 
         <div class="card-body category-body">
             <div class="category-meta">
-                <div class="col-md-5 col-sm-5 col-xs-8 forum-name">{% trans %}Forum{% endtrans %}</div>
-                <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Topics{% endtrans %}</div>
-                <div class="col-md-2 col-sm-2 hidden-xs forum-stats">{% trans %}Posts{% endtrans %}</div>
-                <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">{% trans %}Last Post{% endtrans %}</div>
+                <div class="col-md-5 col-sm-5 col-8 forum-name">{% trans %}Forum{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block forum-stats">{% trans %}Topics{% endtrans %}</div>
+                <div class="col-md-2 col-sm-2 d-none d-sm-block forum-stats">{% trans %}Posts{% endtrans %}</div>
+                <div class="col-md-3 col-sm-3 col-4 forum-last-post">{% trans %}Last Post{% endtrans %}</div>
             </div>
             {% for forum in result['forum'].all() %}
             <div class="row category-row hover">
 
                 {% if forum.external %}
-                <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
+                <div class="col-md-5 col-sm-5 col-8 forum-info">
                     <div class="row">
                         <!-- Icon -->
-                        <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
+                        <div class="col-md-1 col-sm-2 col-2 forum-status">
                             <span class="fa fa-external-link forum-external"></span>
                         </div>
 
-                        <div class="col-md-11 col-sm-10 col-xs-10">
+                        <div class="col-md-11 col-sm-10 col-10">
                             <!-- Forum Name -->
                             <div class="forum-name">
                                 <span class="forum-link">{% trans %}Link to{% endtrans %}:</span> <a href="{{ forum.url }}">{{ forum.title }}</a>
@@ -236,24 +236,24 @@
                 </div> <!-- end forum-info -->
 
                 <!-- Post Count -->
-                <div class="col-md-2 col-sm-2 hidden-xs forum-posts">
+                <div class="col-md-2 col-sm-2 d-none d-sm-block forum-posts">
                     -
                 </div>
 
                 <!-- Topic Count -->
-                <div class="col-md-2 col-sm-2 hidden-xs forum-topics">
+                <div class="col-md-2 col-sm-2 d-none d-sm-block forum-topics">
                     -
                 </div>
 
                 <!-- Last Post -->
-                <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">
+                <div class="col-md-3 col-sm-3 col-4 forum-last-post">
                     ---
                 </div>
                 {% else %}
-                <div class="col-md-5 col-sm-5 col-xs-8 forum-info">
+                <div class="col-md-5 col-sm-5 col-8 forum-info">
                     <div class="row">
                         <!-- Icon -->
-                        <div class="col-md-1 col-sm-2 col-xs-2 forum-status">
+                        <div class="col-md-1 col-sm-2 col-2 forum-status">
                             {% if forum.locked %}
                                 <span class="fa fa-lock forum-locked"></span>
                             {% else %}
@@ -261,7 +261,7 @@
                             {% endif %}
                         </div>
 
-                        <div class="col-md-11 col-sm-10 col-xs-10">
+                        <div class="col-md-11 col-sm-10 col-10">
                             <!-- Forum Name -->
                             <div class="forum-name">
                                 <a href="{{ forum.url }}">{{ forum.title }}</a>
@@ -286,17 +286,17 @@
                 </div> <!-- end forum-info -->
 
                 <!-- Post Count -->
-                <div class="col-md-2 col-sm-2 hidden-xs forum-topics">
+                <div class="col-md-2 col-sm-2 d-none d-sm-block forum-topics">
                 {{ forum.topic_count }}
                 </div>
 
                 <!-- Topic Count -->
-                <div class="col-md-2 col-sm-2 hidden-xs forum-posts">
+                <div class="col-md-2 col-sm-2 d-none d-sm-block forum-posts">
                 {{ forum.post_count }}
                 </div>
 
                 <!-- Last Post -->
-                <div class="col-md-3 col-sm-3 col-xs-4 forum-last-post">
+                <div class="col-md-3 col-sm-3 col-4 forum-last-post">
                     {% if forum.last_post_id %}
                     <div class="last-post-title">
                         <a href="{{ forum.last_post_url }}" title="{{ forum.last_post_title }}">
@@ -326,7 +326,7 @@
             </div> <!-- end category-content -->
             {% else %}
             <div class="row category-row">
-                <div class="col-md-12 col-sm-12 col-xs-12">
+                <div class="col-md-12 col-sm-12 col-12">
                     {% trans %}No forums found matching your search criteria.{% endtrans %}
                 </div>
             </div>

flaskbb/templates/forum/topic.html

@@ -32,7 +32,7 @@
             {% for post, user in posts.items %}
             <div id="{{ post.id }}" class="row post-row">
 
-                <div class="author col-md-2 col-sm-3 col-xs-12">
+                <div class="author col-md-2 col-sm-3 col-12">
                     <!-- Registered User -->
                     {% if post.user_id %}
                     <div class="author-name"><h4><a href="{{ user.url }}">{{ user.username }}</a></h4></div>
@@ -93,7 +93,7 @@
                     {% endif %}
                 </div>
 
-                <div class="post-box col-md-10 col-sm-9 col-xs-12">
+                <div class="post-box col-md-10 col-sm-9 col-12">
 
                     <div class="post-meta row">
                         <div class="col-auto me-auto g-0">
@@ -130,7 +130,7 @@
 
                         <!-- Signature Begin -->
                         {% if flaskbb_config["SIGNATURE_ENABLED"] and post.user_id and user.signature %}
-                        <div class="post-signature hidden-xs">
+                        <div class="post-signature d-none d-sm-block">
                         <hr />
                             {{ user.signature|markup }}
                         </div>
@@ -232,7 +232,7 @@
     <form class="form" method="post">
         {{ form.hidden_tag() }}
         <div class="row">
-            <div class="offset-md-2 offset-sm-3 col-md-10 col-sm-9 col-xs-12">
+            <div class="offset-md-2 offset-sm-3 col-md-10 col-sm-9 col-12">
                 {{ render_input_field(form.content, class='flaskbb-editor', style="display: none", required="required") }}
                 {{ render_submit_field(form.submit, div_class="mt-2 float-end") }}
             </div>

flaskbb/templates/forum/topic_horizontal.html

@@ -30,11 +30,11 @@
             {% for post, user in posts.items %}
             <div id="{{ post.id }}" class="row post-row clearfix">
 
-                <div class="author author-horizontal col-md-12 col-sm-12 col-xs-12">
+                <div class="author author-horizontal col-md-12 col-sm-12 col-12">
                     <div class="pull-left">
                         {% if user.avatar %}
                         <div class="author-box">
-                            <div class="author-avatar hidden-xs"><img src="{{ user.avatar }}" alt="avatar"></div>
+                            <div class="author-avatar d-none d-sm-block"><img src="{{ user.avatar }}" alt="avatar"></div>
                         </div>
                         {% endif %}
 
@@ -64,7 +64,7 @@
                     </div>
                 </div>
 
-                <div class="post-box post-horizontal col-md-12 col-sm-12 col-xs-12">
+                <div class="post-box post-horizontal col-md-12 col-sm-12 col-12">
                     <div class="post-meta clearfix">
                         <div class="pull-left">
                             <!-- Creation date / Date modified -->
@@ -88,7 +88,7 @@
                         {{ post.content|markup }}
                         <!-- Signature Begin -->
                         {% if flaskbb_config["SIGNATURE_ENABLED"] and post.user_id and user.signature %}
-                        <div class="post-signature hidden-xs">
+                        <div class="post-signature d-none d-sm-block">
                         <hr />
                             {{ user.signature|markup }}
                         </div>
@@ -181,7 +181,7 @@
     <form class="form" action="#" method="post">
         {{ form.hidden_tag() }}
         <div class="row">
-            <div class="col-md-offset-2 col-sm-offset-3 col-md-10 col-sm-9 col-xs-12">
+            <div class="col-md-offset-2 col-sm-offset-3 col-md-10 col-sm-9 col-12">
                 <div class="editor-box">
                     <div class="editor quickreply">
                             {{ render_quickreply(form.content, div_class="new-message", rows=7, cols=75, placeholder="", **{'data-provide': 'markdown', 'data-autofocus': 'false', 'class': 'flaskbb-editor'}) }}