Move container div from base to templates, to allow for varying widths.

drakul/authentication/templates/registration/login.html

@@ -6,7 +6,8 @@
 
 
 {% block content %}
-<div class="d-flex justify-content-center align-items-center pt-5">
+<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 }}
@@ -14,5 +15,6 @@
             <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 %}

drakul/authentication/templates/registration/password_change_form.html

@@ -6,7 +6,8 @@
 
 
 {% block content %}
-<div class="d-flex justify-content-center align-items-center mt-5">
+<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>
@@ -14,5 +15,6 @@
             {{ form | crispy }}
             <button type="submit" class="btn btn-primary btn-block">Change Password</button>
         </form>
+    </div>
 </div>
 {% endblock content %}

drakul/authentication/templates/registration/signup.html

@@ -6,7 +6,8 @@
 
 
 {% block content %}
-<div class="d-flex justify-content-center align-items-center pt-5">
+<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>
@@ -20,5 +21,6 @@
             <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 %}

drakul/bank/templates/bank/base.html

@@ -4,8 +4,9 @@
 
 
 {% block content %}
-<h2>Bank</h2>
-<div class="card">
+<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>
@@ -23,5 +24,6 @@
         </div>
         {% block bank_footer %}
         {% endblock bank_footer %}
+    </div>
 </div>
 {% endblock content %}

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;}

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>
         </main>
 
         <footer class="footer mt-auto">

drakul/raids/templates/raids/raid_calendar.html

@@ -4,15 +4,16 @@
 
 
 {% block content %}
-<h2>Raids</h2>
-<div class="d-flex justify-content-center mb-1">
+<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">
+    </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>
@@ -47,9 +48,10 @@
         </tr>
         {% endfor %}
         </tbody>
-</table>
+    </table>
 
-<div class="d-flex justify-content-end">
+    <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>
 {% endblock content %}

drakul/raids/templates/raids/raid_change.html

@@ -6,14 +6,16 @@
 
 
 {% block content %}
-<div class="card mb-3">
+<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">
+<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 %}">
@@ -101,6 +103,7 @@
                 <input class="btn btn-primary float-right" type="submit" name="submit" value="Save">
             </form>
         </div>
+    </div>
 </div>
 {% endblock content %}
 

drakul/raids/templates/raids/raid_confirm_delete.html

@@ -6,9 +6,11 @@
 
 
 {% block content %}
-<form method="post">
+<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>
+    </form>
+</div>
 {% endblock content %}

drakul/raids/templates/raids/raid_create_form.html

@@ -6,5 +6,7 @@
 
 
 {% block content %}
-{% crispy form %}
+<div class="container">
+    {% crispy form %}
+</div>
 {% endblock content %}

drakul/raids/templates/raids/raid_detail.html

@@ -32,7 +32,7 @@
 {% 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 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">
@@ -50,7 +50,7 @@
                 </div>
             </div>
         </div>
-</div>
+    </div>
 
 {% for status, status_responses in raid_responses.items %}
     {% regroup status_responses by group as group_responses_list %}
@@ -109,7 +109,7 @@
     {% endfor %}
 {% endfor %}
 
-<div id="comments" class="card mt-4 mb-4">
+    <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 %}
@@ -133,6 +133,7 @@
                 </form>
             {% endif %}
         </div>
+    </div>
 </div>
 {% endblock content %}
 

drakul/users/templates/users/attendance.html

@@ -6,8 +6,9 @@
 
 
 {% block content %}
-<h2>Attendance</h2>
-<table class="table table-dark table-bordered text-center">
+<div class="container">
+    <h2>Attendance</h2>
+    <table class="table table-dark table-bordered text-center">
         <thead class="thead-light">
         <tr>
             {% for raid in raid_list %}
@@ -30,5 +31,6 @@
             </tr>
             {% endfor %}
         </tbody>
-</table>
+    </table>
+</div>
 {% endblock %}