From 079dcc5d28548a321ede81c19b4d3f910768ed88 Mon Sep 17 00:00:00 2001
From: Peter Pfeufer <info@ppfeufer.de>
Date: Sun, 12 Nov 2023 21:50:17 +0100
Subject: [PATCH] [FIX] Tabbed navigation

---
 .../templates/corputils/corpstats.html        | 164 ++++++++++++------
 1 file changed, 109 insertions(+), 55 deletions(-)

diff --git a/allianceauth/corputils/templates/corputils/corpstats.html b/allianceauth/corputils/templates/corputils/corpstats.html
index 9d75b5e7..971b47cb 100644
--- a/allianceauth/corputils/templates/corputils/corpstats.html
+++ b/allianceauth/corputils/templates/corputils/corpstats.html
@@ -1,65 +1,115 @@
 {% extends 'corputils/base.html' %}
+
 {% load i18n %}
 {% load humanize %}
+
 {% block member_data %}
     {% if corpstats %}
         <div>
-            <table class="table">
+            <table class="table text-center">
                 <tr>
-                    <td class="text-center col-lg-6{% if corpstats.corp.alliance %}{% else %}col-lg-offset-3{% endif %}">
-                            <img class="ra-avatar" src="{{ corpstats.corp.logo_url_64 }}" alt="{{ corpstats.corp.corporation_name }}">
-                        </td>
+                    <td>
+                        <img class="ra-avatar" src="{{ corpstats.corp.logo_url_64 }}" alt="{{ corpstats.corp.corporation_name }}">
+                    </td>
+
                     {% if corpstats.corp.alliance %}
-                        <td class="text-center col-lg-6">
+                        <td>
                             <img class="ra-avatar" src="{{ corpstats.corp.alliance.logo_url_64 }}" alt="{{ corpstats.corp.alliance.alliance_name }}">
                         </td>
                     {% endif %}
                 </tr>
+
                 <tr>
-                    <td class="text-center"><h4>{{ corpstats.corp.corporation_name }}</h4></td>
+                    <td><p class="h4">{{ corpstats.corp.corporation_name }}</p></td>
+
                     {% if corpstats.corp.alliance %}
-                        <td class="text-center"><h4>{{ corpstats.corp.alliance.alliance_name }}</h4></td>
+                        <td><p class="h4">{{ corpstats.corp.alliance.alliance_name }}</p></td>
                     {% endif %}
                 </tr>
             </table>
         </div>
 
         <div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <ul class="nav nav-pills pull-left">
-                        <li class="active"><a href="#mains" data-toggle="pill">{% translate 'Mains' %} ({{ total_mains }})</a></li>
-                        <li><a href="#members" data-toggle="pill">{% translate 'Members' %} ({{ corpstats.member_count }})</a></li>
-                        <li><a href="#unregistered" data-toggle="pill">{% translate 'Unregistered' %} ({{ unregistered.count }})</a></li>
+            <div class="card card-default">
+                <div class="card-header clearfix" role="tablist">
+                    <ul class="nav nav-pills text-right float-start">
+                        <li class="nav-item">
+                            <a
+                                class="nav-link active"
+                                id="mains"
+                                data-bs-toggle="tab"
+                                href="#tab-mains"
+                                role="tab"
+                                aria-controls="tab-mains"
+                                aria-selected="true"
+                            >
+                                {% translate 'Mains' %} ({{ total_mains }})
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a
+                                class="nav-link"
+                                id="members"
+                                data-bs-toggle="tab"
+                                href="#tab-members"
+                                role="tab"
+                                aria-controls="tab-members"
+                                aria-selected="false"
+                            >
+                                {% translate 'Members' %} ({{ corpstats.member_count }})
+                            </a>
+                        </li>
+
+                        <li class="nav-item">
+                            <a
+                                class="nav-link"
+                                id="unregistered"
+                                data-bs-toggle="tab"
+                                href="#tab-unregistered"
+                                role="tab"
+                                aria-controls="tab-unregistered"
+                                aria-selected="false"
+                            >
+                                {% translate 'Unregistered' %} ({{ unregistered.count }})
+                            </a>
+                        </li>
                     </ul>
-                    <div class="pull-right hidden-xs">
-                        {% translate "Last update:" %} {{ corpstats.last_update|naturaltime }}&nbsp;
-                        <a class="btn btn-success" type="button" href="{% url 'corputils:update' corpstats.corp.corporation_id %}" title="Update Now">
-                            <span class="glyphicon glyphicon-refresh"></span>
+
+                    <div class="float-end d-none d-sm-block">
+                        {% translate "Last update:" %} {{ corpstats.last_update|naturaltime }}
+
+                        <a
+                            class="btn btn-success btn-sm ms-2"
+                            type="button"
+                            href="{% url 'corputils:update' corpstats.corp.corporation_id %}"
+                            title="{% translate 'Update Now' %}"
+                        >
+                            <i class="fa-solid fa-rotate"></i>
                         </a>
                     </div>
-                    <div class="clearfix"></div>
                 </div>
 
-                <div class="panel-body">
+                <div class="card-body">
                     <div class="tab-content">
-                        <div class="tab-pane fade in active" id="mains">
+                        <div class="tab-pane fade show active" id="tab-mains" role="tabpanel" aria-labelledby="tab-mains">
                             {% if mains %}
                                 <div class="table-responsive">
                                     <table class="table table-hover" id="table-mains">
                                         <thead>
                                             <tr>
-                                                <th style="height:1em;"><!-- Must have text or height to prevent clipping --></th>
+                                                <th style="min-height: 1rem;"><!-- Must have a text or height to prevent clipping --></th>
                                                 <th></th>
                                             </tr>
                                         </thead>
+
                                         <tbody>
                                             {% for id, main in mains.items %}
                                                 <tr>
-                                                    <td class="text-center" style="vertical-align:middle">
+                                                    <td class="text-center" style="vertical-align: middle;">
                                                         <div class="thumbnail" style="border: 0 none; box-shadow: none; background: transparent;">
                                                             <img src="{{ main.main.portrait_url_64 }}" class="img-circle" alt="{{ main.main }}">
-                                                            <div class="caption text-center">
+                                                            <div class="caption">
                                                                 {{ main.main }}
                                                             </div>
                                                         </div>
@@ -70,22 +120,22 @@
                                                                 {% if forloop.first %}
                                                                     <tr>
                                                                         <th></th>
-                                                                        <th class="text-center">{% translate "Character" %}</th>
-                                                                        <th class="text-center">{% translate "Corporation" %}</th>
-                                                                        <th class="text-center">{% translate "Alliance" %}</th>
-                                                                        <th class="text-center"></th>
+                                                                        <th>{% translate "Character" %}</th>
+                                                                        <th>{% translate "Corporation" %}</th>
+                                                                        <th>{% translate "Alliance" %}</th>
+                                                                        <th></th>
                                                                     </tr>
                                                                 {% endif %}
                                                                 <tr>
-                                                                    <td class="text-center" style="width:5%">
+                                                                    <td style="width: 5%;">
                                                                         <div class="thumbnail" style="border: 0 none; box-shadow: none; background: transparent;">
                                                                             <img src="{{ alt.portrait_url_32 }}" class="img-circle" alt="{{ alt.character_name }}">
                                                                         </div>
                                                                     </td>
-                                                                    <td class="text-center" style="width:30%">{{ alt.character_name }}</td>
-                                                                    <td class="text-center" style="width:30%">{{ alt.corporation_name }}</td>
-                                                                    <td class="text-center" style="width:30%">{{ alt.alliance_name }}</td>
-                                                                    <td class="text-center" style="width:5%">
+                                                                    <td style="width: 30%;">{{ alt.character_name }}</td>
+                                                                    <td style="width: 30%;">{{ alt.corporation_name }}</td>
+                                                                    <td style="width: 30%;">{{ alt.alliance_name }}</td>
+                                                                    <td style="width: 5%;">
                                                                         <a href="https://zkillboard.com/character/{{ alt.character_id }}/" class="badge bg-danger" target="_blank">
                                                                             {% translate "Killboard" %}
                                                                         </a>
@@ -101,43 +151,45 @@
                                 </div>
                             {% endif %}
                         </div>
-                        <div class="tab-pane fade" id="members">
+
+                        <div class="tab-pane fade" id="tab-members" role="tabpanel" aria-labelledby="tab-members">
                             {% if members %}
                                 <div class="table-responsive">
                                     <table class="table table-hover" id="table-members">
                                         <thead>
                                             <tr>
                                                 <th></th>
-                                                <th class="text-center">{% translate "Character" %}</th>
-                                                <th class="text-center"></th>
-                                                <th class="text-center">{% translate "Main Character" %}</th>
-                                                <th class="text-center">{% translate "Main Corporation" %}</th>
-                                                <th class="text-center">{% translate "Main Alliance" %}</th>
+                                                <th>{% translate "Character" %}</th>
+                                                <th></th>
+                                                <th>{% translate "Main Character" %}</th>
+                                                <th>{% translate "Main Corporation" %}</th>
+                                                <th>{% translate "Main Alliance" %}</th>
                                             </tr>
                                         </thead>
+
                                         <tbody>
                                             {% for member in members %}
                                                 <tr>
                                                     <td><img src="{{ member.portrait_url }}" class="img-circle" alt="{{ member }}"></td>
-                                                    <td class="text-center">{{ member }}</td>
-                                                    <td class="text-center">
+                                                    <td>{{ member }}</td>
+                                                    <td>
                                                         <a href="https://zkillboard.com/character/{{ member.character_id }}/" class="badge bg-danger" target="_blank">{% translate "Killboard" %}</a>
                                                     </td>
-                                                    <td class="text-center">{{ member.character_ownership.user.profile.main_character.character_name }}</td>
-                                                    <td class="text-center">{{ member.character_ownership.user.profile.main_character.corporation_name }}</td>
-                                                    <td class="text-center">{{ member.character_ownership.user.profile.main_character.alliance_name }}</td>
+                                                    <td>{{ member.character_ownership.user.profile.main_character.character_name }}</td>
+                                                    <td>{{ member.character_ownership.user.profile.main_character.corporation_name }}</td>
+                                                    <td>{{ member.character_ownership.user.profile.main_character.alliance_name }}</td>
                                                 </tr>
                                             {% endfor %}
                                             {% for member in unregistered %}
                                                 <tr class="danger">
                                                     <td><img src="{{ member.portrait_url }}" class="img-circle" alt="{{ member.character_name }}"></td>
-                                                    <td class="text-center">{{ member.character_name }}</td>
-                                                    <td class="text-center">
+                                                    <td>{{ member.character_name }}</td>
+                                                    <td>
                                                         <a href="https://zkillboard.com/character/{{ member.character_id }}/" class="badge bg-danger" target="_blank">{% translate "Killboard" %}</a>
                                                     </td>
-                                                    <td class="text-center"></td>
-                                                    <td class="text-center"></td>
-                                                    <td class="text-center"></td>
+                                                    <td></td>
+                                                    <td></td>
+                                                    <td></td>
                                                 </tr>
                                             {% endfor %}
                                         </tbody>
@@ -145,23 +197,25 @@
                                 </div>
                             {% endif %}
                         </div>
-                        <div class="tab-pane fade" id="unregistered">
+
+                        <div class="tab-pane fade" id="tab-unregistered" role="tabpanel" aria-labelledby="tab-unregistered">
                             {% if unregistered %}
                                 <div class="table-responsive">
                                     <table class="table table-hover" id="table-unregistered">
                                         <thead>
                                             <tr>
                                                 <th></th>
-                                                <th class="text-center">{% translate "Character" %}</th>
-                                                <th class="text-center"></th>
+                                                <th>{% translate "Character" %}</th>
+                                                <th></th>
                                             </tr>
                                         </thead>
+
                                         <tbody>
                                             {% for member in unregistered %}
                                                 <tr class="danger">
                                                     <td><img src="{{ member.portrait_url }}" class="img-circle" alt="{{ member.character_name }}"></td>
-                                                    <td class="text-center">{{ member.character_name }}</td>
-                                                    <td class="text-center">
+                                                    <td>{{ member.character_name }}</td>
+                                                    <td>
                                                         <a href="https://zkillboard.com/character/{{ member.character_id }}/" class="badge bg-danger" target="_blank">
                                                             {% translate "Killboard" %}
                                                         </a>
@@ -181,11 +235,11 @@
 {% endblock %}
 
 {% block extra_javascript %}
-    {% include 'bundles/datatables-js.html' %}
+    {% include 'bundles/datatables-js-bs5.html' %}
 {% endblock %}
 
 {% block extra_css %}
-    {% include 'bundles/datatables-css.html' %}
+    {% include 'bundles/datatables-css-bs5.html' %}
 {% endblock %}
 
 {% block extra_script %}