From a02c22c54394e5522d913a6abb5dfc28f86b8c17 Mon Sep 17 00:00:00 2001
From: "Casper V. Kristensen" <casper@vkristensen.dk>
Date: Wed, 23 Sep 2020 00:20:51 +0200
Subject: [PATCH] Move container div from base to templates, to allow for
 varying widths.

---
 .../templates/registration/login.html         |  18 +-
 .../registration/password_change_form.html    |  18 +-
 .../templates/registration/signup.html        |  30 +--
 drakul/bank/templates/bank/base.html          |  36 ++--
 drakul/base/static/css/main.css               |  10 +
 drakul/base/templates/base.html               |   6 +-
 .../raids/templates/raids/raid_calendar.html  |  94 +++++-----
 drakul/raids/templates/raids/raid_change.html | 171 +++++++++---------
 .../templates/raids/raid_confirm_delete.html  |  12 +-
 .../templates/raids/raid_create_form.html     |   4 +-
 drakul/raids/templates/raids/raid_detail.html |  73 ++++----
 drakul/users/templates/users/attendance.html  |  46 ++---
 12 files changed, 273 insertions(+), 245 deletions(-)

diff --git a/drakul/authentication/templates/registration/login.html b/drakul/authentication/templates/registration/login.html
index cd39532..8cf9ba9 100644
--- a/drakul/authentication/templates/registration/login.html
+++ b/drakul/authentication/templates/registration/login.html
@@ -6,13 +6,15 @@
 
 
 {% block content %}
-<div class="d-flex justify-content-center align-items-center pt-5">
-    <form class="m-auto" method="post" action="{% url 'login' %}">
-        {% csrf_token %}
-        {{ form | crispy }}
-        <button type="submit" class="btn btn-primary btn-block">Log In</button>
-        <input type="hidden" name="next" value="{{ next }}">
-        <p class="text-center mt-2"><a href="{% url 'signup' %}">Sign Up</a></p>
-    </form>
+<div class="container">
+    <div class="d-flex justify-content-center align-items-center pt-5">
+        <form class="m-auto" method="post" action="{% url 'login' %}">
+            {% csrf_token %}
+            {{ form | crispy }}
+            <button type="submit" class="btn btn-primary btn-block">Log In</button>
+            <input type="hidden" name="next" value="{{ next }}">
+            <p class="text-center mt-2"><a href="{% url 'signup' %}">Sign Up</a></p>
+        </form>
+    </div>
 </div>
 {% endblock content %}
diff --git a/drakul/authentication/templates/registration/password_change_form.html b/drakul/authentication/templates/registration/password_change_form.html
index e1623f4..b429fa9 100644
--- a/drakul/authentication/templates/registration/password_change_form.html
+++ b/drakul/authentication/templates/registration/password_change_form.html
@@ -6,13 +6,15 @@
 
 
 {% block content %}
-<div class="d-flex justify-content-center align-items-center mt-5">
-    <form class="m-auto" method="post" action="{% url 'password_change' %}">
-        <h2>Change Password</h2>
-        <hr>
-        {% csrf_token %}
-        {{ form | crispy }}
-        <button type="submit" class="btn btn-primary btn-block">Change Password</button>
-    </form>
+<div class="container">
+    <div class="d-flex justify-content-center align-items-center mt-5">
+        <form class="m-auto" method="post" action="{% url 'password_change' %}">
+            <h2>Change Password</h2>
+            <hr>
+            {% csrf_token %}
+            {{ form | crispy }}
+            <button type="submit" class="btn btn-primary btn-block">Change Password</button>
+        </form>
+    </div>
 </div>
 {% endblock content %}
diff --git a/drakul/authentication/templates/registration/signup.html b/drakul/authentication/templates/registration/signup.html
index 8616956..47a3a1e 100644
--- a/drakul/authentication/templates/registration/signup.html
+++ b/drakul/authentication/templates/registration/signup.html
@@ -6,19 +6,21 @@
 
 
 {% block content %}
-<div class="d-flex justify-content-center align-items-center pt-5">
-    <form class="m-auto" method="post" action="{% url 'signup' %}">
-        <h2>Sign Up</h2>
-        <hr>
-        {% csrf_token %}
-        {{ user_form | crispy }}
-        <h5 class="mt-5">Character</h5>
-        <hr>
-        {{ character_form | crispy }}
-        <hr>
-        <button type="submit" class="btn btn-primary btn-block">Sign Up</button>
-        <input type="hidden" name="next" value="{{ next }}">
-        <p class="text-center mt-2"><a href="{% url 'login' %}">Log In</a></p>
-    </form>
+<div class="container">
+    <div class="d-flex justify-content-center align-items-center pt-5">
+        <form class="m-auto" method="post" action="{% url 'signup' %}">
+            <h2>Sign Up</h2>
+            <hr>
+            {% csrf_token %}
+            {{ user_form | crispy }}
+            <h5 class="mt-5">Character</h5>
+            <hr>
+            {{ character_form | crispy }}
+            <hr>
+            <button type="submit" class="btn btn-primary btn-block">Sign Up</button>
+            <input type="hidden" name="next" value="{{ next }}">
+            <p class="text-center mt-2"><a href="{% url 'login' %}">Log In</a></p>
+        </form>
+    </div>
 </div>
 {% endblock content %}
diff --git a/drakul/bank/templates/bank/base.html b/drakul/bank/templates/bank/base.html
index 7dfcf56..8b2c817 100644
--- a/drakul/bank/templates/bank/base.html
+++ b/drakul/bank/templates/bank/base.html
@@ -4,24 +4,26 @@
 
 
 {% block content %}
-<h2>Bank</h2>
-<div class="card">
-    <div class="card-header d-flex">
-        <div class="nav nav-tabs card-header-tabs mr-auto">
-            <a class="nav-item nav-link {% active 'bank' %}" href="{% url 'bank' %}">Items</a>
-            <a class="nav-item nav-link {% active 'bank_item_log' %}" href="{% url 'bank_item_log' %}">Log</a>
-            <a class="nav-item nav-link {% active 'bank_money_log' %}" href="{% url 'bank_money_log' %}">Money</a>
-            {% if perms.bank.add_itemtransaction and perms.bank.add_moneytransaction %}
-                <a class="nav-item nav-link {% active 'bank_import' %}" href="{% url 'bank_import' %}">Import</a>
-            {% endif %}
+<div class="container">
+    <h2>Bank</h2>
+    <div class="card">
+        <div class="card-header d-flex">
+            <div class="nav nav-tabs card-header-tabs mr-auto">
+                <a class="nav-item nav-link {% active 'bank' %}" href="{% url 'bank' %}">Items</a>
+                <a class="nav-item nav-link {% active 'bank_item_log' %}" href="{% url 'bank_item_log' %}">Log</a>
+                <a class="nav-item nav-link {% active 'bank_money_log' %}" href="{% url 'bank_money_log' %}">Money</a>
+                {% if perms.bank.add_itemtransaction and perms.bank.add_moneytransaction %}
+                    <a class="nav-item nav-link {% active 'bank_import' %}" href="{% url 'bank_import' %}">Import</a>
+                {% endif %}
+            </div>
+            {% block bank_header %}{% endblock bank_header %}
         </div>
-        {% block bank_header %}{% endblock bank_header %}
+        <div class="card-body p-0">
+            {% block bank_content %}
+            {% endblock bank_content %}
+        </div>
+        {% block bank_footer %}
+        {% endblock bank_footer %}
     </div>
-    <div class="card-body p-0">
-        {% block bank_content %}
-        {% endblock bank_content %}
-    </div>
-    {% block bank_footer %}
-    {% endblock bank_footer %}
 </div>
 {% endblock content %}
diff --git a/drakul/base/static/css/main.css b/drakul/base/static/css/main.css
index f61688f..e4f47f5 100644
--- a/drakul/base/static/css/main.css
+++ b/drakul/base/static/css/main.css
@@ -1,3 +1,13 @@
+.container {
+	max-width: 1140px;
+}
+
+@media (min-width:1600px) {
+    .container-wide {
+        max-width: 1500px
+    }
+}
+
 /* WoW class-coloured text */
 .color-druid, .color-class-1 {color: #ff7d0a;}
 .color-hunter, .color-class-2 {color: #abd473;}
diff --git a/drakul/base/templates/base.html b/drakul/base/templates/base.html
index f8742b7..b2c8964 100644
--- a/drakul/base/templates/base.html
+++ b/drakul/base/templates/base.html
@@ -43,10 +43,8 @@
         </header>
 
         <main class="flex-shrink-0" role="main">
-            <div class="container">
-                {% block content %}
-                {% endblock content %}
-            </div>
+            {% block content %}
+            {% endblock content %}
         </main>
 
         <footer class="footer mt-auto">
diff --git a/drakul/raids/templates/raids/raid_calendar.html b/drakul/raids/templates/raids/raid_calendar.html
index f6c6957..2c2ea0a 100644
--- a/drakul/raids/templates/raids/raid_calendar.html
+++ b/drakul/raids/templates/raids/raid_calendar.html
@@ -4,52 +4,54 @@
 
 
 {% block content %}
-<h2>Raids</h2>
-<div class="d-flex justify-content-center mb-1">
-    <div class="btn-group" role="group" aria-label="Calendar navigation controls">
-        <a class="btn btn-secondary" role="button" href="{% url 'raid_calendar' previous_month.year previous_month.month %}">&lt;</a>
-        <a class="btn btn-secondary" role="button" href="{% url 'raid_calendar' %}">{{ month | date:"YEAR_MONTH_FORMAT" }}</a>
-        <a class="btn btn-secondary" role="button" href="{% url 'raid_calendar' next_month.year next_month.month %}">&gt;</a>
+<div class="container">
+    <h2>Raids</h2>
+    <div class="d-flex justify-content-center mb-1">
+        <div class="btn-group" role="group" aria-label="Calendar navigation controls">
+            <a class="btn btn-secondary" role="button" href="{% url 'raid_calendar' previous_month.year previous_month.month %}">&lt;</a>
+            <a class="btn btn-secondary" role="button" href="{% url 'raid_calendar' %}">{{ month | date:"YEAR_MONTH_FORMAT" }}</a>
+            <a class="btn btn-secondary" role="button" href="{% url 'raid_calendar' next_month.year next_month.month %}">&gt;</a>
+        </div>
+    </div>
+    <table class="raid-calendar table table-bordered bg-white mb-1">
+        <thead class="thead-light text-center">
+        <tr>
+            <th scope="col" class="w-14">Monday</th>
+            <th scope="col" class="w-14">Tuesday</th>
+            <th scope="col" class="w-14">Wednesday</th>
+            <th scope="col" class="w-14">Thursday</th>
+            <th scope="col" class="w-14">Friday</th>
+            <th scope="col" class="w-14">Saturday</th>
+            <th scope="col" class="w-14">Sunday</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for week in calendar %}
+        <tr>
+            {% for day in week %}
+            <td class="{% if day.date.month != month.month %}o-50{% endif %} {% if day.date == today %}table-warning{% endif %}">
+                <p class="mb-2"><small>{{ day.date | date:"j" }}</small></p>
+                <div class="d-flex flex-column">
+                    {% for instance_reset in day.instance_resets %}
+                    <span class="mb-1 badge badge-light text-left text-wrap font-weight-normal">
+                        <span class="text-monospace">{{ instance_reset.time }}</span> <span class="text-muted">{{ instance_reset.name }} Resets</span>
+                    </span>
+                    {% endfor %}
+                    {% for raid in day.raids %}
+                    <a class="mb-1 badge response-status-{{ raid.max_status | default:0 }}-bg text-left text-wrap font-weight-normal" href="{% url 'raid_detail' raid.id %}">
+                        <span class="text-monospace">{{ raid.date.time }}</span> <strong>{{ raid.title }}</strong>
+                    </a>
+                    {% endfor %}
+                </div>
+            </td>
+            {% endfor %}
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+
+    <div class="d-flex justify-content-end">
+        {% if perms.raids.add_raid %}<a class="btn btn-success" role="button" href="{% url 'raid_create' %}">Add New</a>{% endif %}
     </div>
 </div>
-<table class="raid-calendar table table-bordered bg-white mb-1">
-    <thead class="thead-light text-center">
-    <tr>
-        <th scope="col" class="w-14">Monday</th>
-        <th scope="col" class="w-14">Tuesday</th>
-        <th scope="col" class="w-14">Wednesday</th>
-        <th scope="col" class="w-14">Thursday</th>
-        <th scope="col" class="w-14">Friday</th>
-        <th scope="col" class="w-14">Saturday</th>
-        <th scope="col" class="w-14">Sunday</th>
-    </tr>
-    </thead>
-    <tbody>
-    {% for week in calendar %}
-    <tr>
-        {% for day in week %}
-        <td class="{% if day.date.month != month.month %}o-50{% endif %} {% if day.date == today %}table-warning{% endif %}">
-            <p class="mb-2"><small>{{ day.date | date:"j" }}</small></p>
-            <div class="d-flex flex-column">
-                {% for instance_reset in day.instance_resets %}
-                <span class="mb-1 badge badge-light text-left text-wrap font-weight-normal">
-                    <span class="text-monospace">{{ instance_reset.time }}</span> <span class="text-muted">{{ instance_reset.name }} Resets</span>
-                </span>
-                {% endfor %}
-                {% for raid in day.raids %}
-                <a class="mb-1 badge response-status-{{ raid.max_status | default:0 }}-bg text-left text-wrap font-weight-normal" href="{% url 'raid_detail' raid.id %}">
-                    <span class="text-monospace">{{ raid.date.time }}</span> <strong>{{ raid.title }}</strong>
-                </a>
-                {% endfor %}
-            </div>
-        </td>
-        {% endfor %}
-    </tr>
-    {% endfor %}
-    </tbody>
-</table>
-
-<div class="d-flex justify-content-end">
-    {% if perms.raids.add_raid %}<a class="btn btn-success" role="button" href="{% url 'raid_create' %}">Add New</a>{% endif %}
-</div>
 {% endblock content %}
diff --git a/drakul/raids/templates/raids/raid_change.html b/drakul/raids/templates/raids/raid_change.html
index 23aaa87..bab8516 100644
--- a/drakul/raids/templates/raids/raid_change.html
+++ b/drakul/raids/templates/raids/raid_change.html
@@ -6,100 +6,103 @@
 
 
 {% block content %}
-<div class="card mb-3">
-    <h5 class="card-header">Raid Details</h5>
-    <div class="card-body">
-        {% crispy raid_form %}
+<div class="container container-wide">
+    <div class="card mb-3">
+        <h5 class="card-header">Raid Details</h5>
+        <div class="card-body">
+            {% crispy raid_form %}
+        </div>
     </div>
 </div>
-
-<div class="card mb-3">
-    <h5 class="card-header">Raid Responses</h5>
-    <div class="card-body">
-        <form class="responses-form table-borderless" method="post" action="{% url 'raid_change' raid.id %}">
-            {% crispy raid_response_formset raid_response_formset_helper %}
-            <hr>
-            <div class="row">
-                <div class="form-group col-lg-6">
-                    <label>Change Status</label>
-                    <div class="input-group">
-                        <div class="input-group-prepend">
-                            <label class="input-group-text" for="change-status-from-status-select">Set all</label>
+<div class="container container-wide">
+    <div class="card mb-3">
+        <h5 class="card-header">Raid Responses</h5>
+        <div class="card-body">
+            <form class="responses-form table-borderless" method="post" action="{% url 'raid_change' raid.id %}">
+                {% crispy raid_response_formset raid_response_formset_helper %}
+                <hr>
+                <div class="row">
+                    <div class="form-group col-lg-6">
+                        <label>Change Status</label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <label class="input-group-text" for="change-status-from-status-select">Set all</label>
+                            </div>
+                            <select class="custom-select" id="change-status-from-status-select">
+                                <option value="1">Signed Off</option>
+                                <option value="2">Backup</option>
+                                <option selected value="3">Signed Up</option>
+                                <option value="4">Standby</option>
+                                <option value="5">Confirmed</option>
+                            </select>
+                            <div class="input-group-append input-group-prepend">
+                                <label class="input-group-text" for="change-status-to-status-select">to</label>
+                            </div>
+                            <select class="custom-select" id="change-status-to-status-select">
+                                <option value="1">Signed Off</option>
+                                <option value="2">Backup</option>
+                                <option value="3">Signed Up</option>
+                                <option value="4">Standby</option>
+                                <option selected value="5">Confirmed</option>
+                            </select>
+                            <div class="input-group-append">
+                                <button class="btn btn-outline-secondary" type="button"
+                                        onclick="changeSignupStatus(
+                                            from=document.querySelector('#change-status-from-status-select').value,
+                                            to=document.querySelector('#change-status-to-status-select').value
+                                        );"
+                                >Go</button>
+                            </div>
                         </div>
-                        <select class="custom-select" id="change-status-from-status-select">
-                            <option value="1">Signed Off</option>
-                            <option value="2">Backup</option>
-                            <option selected value="3">Signed Up</option>
-                            <option value="4">Standby</option>
-                            <option value="5">Confirmed</option>
-                        </select>
-                        <div class="input-group-append input-group-prepend">
-                            <label class="input-group-text" for="change-status-to-status-select">to</label>
-                        </div>
-                        <select class="custom-select" id="change-status-to-status-select">
-                            <option value="1">Signed Off</option>
-                            <option value="2">Backup</option>
-                            <option value="3">Signed Up</option>
-                            <option value="4">Standby</option>
-                            <option selected value="5">Confirmed</option>
-                        </select>
-                        <div class="input-group-append">
-                            <button class="btn btn-outline-secondary" type="button"
-                                    onclick="changeSignupStatus(
-                                        from=document.querySelector('#change-status-from-status-select').value,
-                                        to=document.querySelector('#change-status-to-status-select').value
-                                    );"
-                            >Go</button>
+                    </div>
+                    <div class="form-group col-lg-6">
+                        <label>Give Attendance</label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <label class="input-group-text" for="set-attendance-status-select">Give all</label>
+                            </div>
+                            <select class="custom-select" id="set-attendance-status-select">
+                                <option value="1">Signed Off</option>
+                                <option value="2">Backup</option>
+                                <option value="3">Signed Up</option>
+                                <option value="4">Standby</option>
+                                <option selected value="5">Confirmed</option>
+                            </select>
+                            <input type="number" class="form-control" id="set-attendance-value-input" aria-label="Attendance Input" value="1.0">
+                            <div class="input-group-append">
+                                <button class="btn btn-outline-secondary" type="button"
+                                        onclick="setAttendanceForStatus(
+                                            status=document.querySelector('#set-attendance-status-select').value,
+                                            value=document.querySelector('#set-attendance-value-input').value
+                                        )"
+                                >Go</button>
+                            </div>
                         </div>
                     </div>
                 </div>
-                <div class="form-group col-lg-6">
-                    <label>Give Attendance</label>
-                    <div class="input-group">
-                        <div class="input-group-prepend">
-                            <label class="input-group-text" for="set-attendance-status-select">Give all</label>
+                <hr>
+                <div class="row">
+                    <div class="col-xl-7">
+                        <div class="alert alert-primary d-flex justify-content-around" role="alert">
+                            <div><span id="total-signed-off" class="font-weight-bold">?</span> Signed Off</div>
+                            <div><span id="total-backup" class="font-weight-bold">?</span> Backup</div>
+                            <div><span id="total-signed-up" class="font-weight-bold">?</span> Signed Up</div>
+                            <div><span id="total-standby" class="font-weight-bold">?</span> Standby</div>
+                            <div><span id="total-confirmed" class="font-weight-bold">?</span> Confirmed</div>
                         </div>
-                        <select class="custom-select" id="set-attendance-status-select">
-                            <option value="1">Signed Off</option>
-                            <option value="2">Backup</option>
-                            <option value="3">Signed Up</option>
-                            <option value="4">Standby</option>
-                            <option selected value="5">Confirmed</option>
-                        </select>
-                        <input type="number" class="form-control" id="set-attendance-value-input" aria-label="Attendance Input" value="1.0">
-                        <div class="input-group-append">
-                            <button class="btn btn-outline-secondary" type="button"
-                                    onclick="setAttendanceForStatus(
-                                        status=document.querySelector('#set-attendance-status-select').value,
-                                        value=document.querySelector('#set-attendance-value-input').value
-                                    )"
-                            >Go</button>
+                    </div>
+                    <div class="col-xl-5">
+                        <div class="alert alert-success d-flex justify-content-around" role="alert">
+                            <div class="font-weight-bolder">Confirmed</div>
+                            <div><span id="total-confirmed-tank" class="font-weight-bold">?</span> Tanks</div>
+                            <div><span id="total-confirmed-healer" class="font-weight-bold">?</span> Healers</div>
+                            <div><span id="total-confirmed-damage" class="font-weight-bold">?</span> Damage</div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <hr>
-            <div class="row">
-                <div class="col-xl-7">
-                    <div class="alert alert-primary d-flex justify-content-around" role="alert">
-                        <div><span id="total-signed-off" class="font-weight-bold">?</span> Signed Off</div>
-                        <div><span id="total-backup" class="font-weight-bold">?</span> Backup</div>
-                        <div><span id="total-signed-up" class="font-weight-bold">?</span> Signed Up</div>
-                        <div><span id="total-standby" class="font-weight-bold">?</span> Standby</div>
-                        <div><span id="total-confirmed" class="font-weight-bold">?</span> Confirmed</div>
-                    </div>
-                </div>
-                <div class="col-xl-5">
-                    <div class="alert alert-success d-flex justify-content-around" role="alert">
-                        <div class="font-weight-bolder">Confirmed</div>
-                        <div><span id="total-confirmed-tank" class="font-weight-bold">?</span> Tanks</div>
-                        <div><span id="total-confirmed-healer" class="font-weight-bold">?</span> Healers</div>
-                        <div><span id="total-confirmed-damage" class="font-weight-bold">?</span> Damage</div>
-                    </div>
-                </div>
-            </div>
-            <input class="btn btn-primary float-right" type="submit" name="submit" value="Save">
-        </form>
+                <input class="btn btn-primary float-right" type="submit" name="submit" value="Save">
+            </form>
+        </div>
     </div>
 </div>
 {% endblock content %}
diff --git a/drakul/raids/templates/raids/raid_confirm_delete.html b/drakul/raids/templates/raids/raid_confirm_delete.html
index 7216ce6..cf0c0ef 100644
--- a/drakul/raids/templates/raids/raid_confirm_delete.html
+++ b/drakul/raids/templates/raids/raid_confirm_delete.html
@@ -6,9 +6,11 @@
 
 
 {% block content %}
-<form method="post">
-    {% csrf_token %}
-    <p>Are you sure you want to delete "{{ object }}"?</p>
-    <button type="submit" class="btn btn-danger">Confirm</button>
-</form>
+<div class="container">
+    <form method="post">
+        {% csrf_token %}
+        <p>Are you sure you want to delete "{{ object }}"?</p>
+        <button type="submit" class="btn btn-danger">Confirm</button>
+    </form>
+</div>
 {% endblock content %}
diff --git a/drakul/raids/templates/raids/raid_create_form.html b/drakul/raids/templates/raids/raid_create_form.html
index 68ba280..4e3bcfb 100644
--- a/drakul/raids/templates/raids/raid_create_form.html
+++ b/drakul/raids/templates/raids/raid_create_form.html
@@ -6,5 +6,7 @@
 
 
 {% block content %}
-{% crispy form %}
+<div class="container">
+    {% crispy form %}
+</div>
 {% endblock content %}
diff --git a/drakul/raids/templates/raids/raid_detail.html b/drakul/raids/templates/raids/raid_detail.html
index e8397d3..198508b 100644
--- a/drakul/raids/templates/raids/raid_detail.html
+++ b/drakul/raids/templates/raids/raid_detail.html
@@ -32,25 +32,25 @@
 {% endif %}
 <div class="mb-4"></div>
 
-<div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
-    <div class="modal-dialog" role="document">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="exportModalLabel">Export</h5>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <p>Export list of characters for automatic invitation using <a href="https://www.curseforge.com/wow/addons/exorsus-raid-tools">Exorsus Raid Tools</a>.</p>
-                <div class="form-group">
-                    <label for="characters-textinput" class="col-form-label">Characters:</label>
-                    <textarea readonly class="form-control" id="characters-textinput" onclick="this.select();"></textarea>
+    <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="exportModalLabel">Export</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p>Export list of characters for automatic invitation using <a href="https://www.curseforge.com/wow/addons/exorsus-raid-tools">Exorsus Raid Tools</a>.</p>
+                    <div class="form-group">
+                        <label for="characters-textinput" class="col-form-label">Characters:</label>
+                        <textarea readonly class="form-control" id="characters-textinput" onclick="this.select();"></textarea>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</div>
 
 {% for status, status_responses in raid_responses.items %}
     {% regroup status_responses by group as group_responses_list %}
@@ -109,29 +109,30 @@
     {% endfor %}
 {% endfor %}
 
-<div id="comments" class="card mt-4 mb-4">
-    <h6 class="card-header">Comments</h6>
-    <div class="card-body">
-        {% for comment in raid.comments.all %}
-            <div class="card mb-2">
-                <div class="card-body py-3">
-                    <h6 class="card-title mb-1"><strong>{{ comment.user.main.name }}</strong> <small class="card-subtitle text-muted">&middot; {{ comment.date_created }}</small></h6>
-                    <p class="card-text">
-                        {{ comment.body | linebreaksbr }}
-                    </p>
+    <div id="comments" class="card mt-4 mb-4">
+        <h6 class="card-header">Comments</h6>
+        <div class="card-body">
+            {% for comment in raid.comments.all %}
+                <div class="card mb-2">
+                    <div class="card-body py-3">
+                        <h6 class="card-title mb-1"><strong>{{ comment.user.main.name }}</strong> <small class="card-subtitle text-muted">&middot; {{ comment.date_created }}</small></h6>
+                        <p class="card-text">
+                            {{ comment.body | linebreaksbr }}
+                        </p>
+                    </div>
                 </div>
-            </div>
-        {% empty %}
-            <em>No comments.</em>
-        {% endfor %}
+            {% empty %}
+                <em>No comments.</em>
+            {% endfor %}
 
-        {% if comment_form %}
-            <hr class="my-4">
-            <h6>Add Comment</h6>
-            <form class="form" method="post" action="{% url 'raid_detail' raid.id %}">
-                {% crispy comment_form %}
-            </form>
-        {% endif %}
+            {% if comment_form %}
+                <hr class="my-4">
+                <h6>Add Comment</h6>
+                <form class="form" method="post" action="{% url 'raid_detail' raid.id %}">
+                    {% crispy comment_form %}
+                </form>
+            {% endif %}
+        </div>
     </div>
 </div>
 {% endblock content %}
diff --git a/drakul/users/templates/users/attendance.html b/drakul/users/templates/users/attendance.html
index e137c6b..bd2ab3a 100644
--- a/drakul/users/templates/users/attendance.html
+++ b/drakul/users/templates/users/attendance.html
@@ -6,29 +6,31 @@
 
 
 {% block content %}
-<h2>Attendance</h2>
-<table class="table table-dark table-bordered text-center">
-    <thead class="thead-light">
-    <tr>
-        {% for raid in raid_list %}
-        <th><a class="text-reset" href="{% url 'raid_detail' raid.id %}">{{ raid.date | date:"d/m"}}</a></th>
-        {% endfor %}
-        <th>Avg</th>
-        <th></th>
-    </tr>
-    </thead>
-    <tbody class="table-sm">
-        {% for user, user_responses in attendance_matrix.items %}
+<div class="container">
+    <h2>Attendance</h2>
+    <table class="table table-dark table-bordered text-center">
+        <thead class="thead-light">
         <tr>
-            {% for response in user_responses.values %}
-            <td class="response-status-{{ response.status | default_if_none:'no-color' }}-bg">
-                {% attendance_cell response %}
-            </td>
+            {% for raid in raid_list %}
+            <th><a class="text-reset" href="{% url 'raid_detail' raid.id %}">{{ raid.date | date:"d/m"}}</a></th>
             {% endfor %}
-            <td class="font-weight-bold" style="color: {% avg_attendance_color user.avg_attendance %}">{{ user.avg_attendance | floatformat:2 }}</td>
-            <td class="text-left color-class-{{ user.main.klass }}">{{ user.main }}</td>
+            <th>Avg</th>
+            <th></th>
         </tr>
-        {% endfor %}
-    </tbody>
-</table>
+        </thead>
+        <tbody class="table-sm">
+            {% for user, user_responses in attendance_matrix.items %}
+            <tr>
+                {% for response in user_responses.values %}
+                <td class="response-status-{{ response.status | default_if_none:'no-color' }}-bg">
+                    {% attendance_cell response %}
+                </td>
+                {% endfor %}
+                <td class="font-weight-bold" style="color: {% avg_attendance_color user.avg_attendance %}">{{ user.avg_attendance | floatformat:2 }}</td>
+                <td class="text-left color-class-{{ user.main.klass }}">{{ user.main }}</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
 {% endblock %}