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

This commit is contained in:
Casper V. Kristensen 2020-09-23 00:20:51 +02:00
parent 4bcdf7eca9
commit a02c22c543
Signed by: caspervk
GPG key ID: 289CA03790535054
12 changed files with 273 additions and 245 deletions

View file

@ -6,7 +6,8 @@
{% block content %} {% 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' %}"> <form class="m-auto" method="post" action="{% url 'login' %}">
{% csrf_token %} {% csrf_token %}
{{ form | crispy }} {{ form | crispy }}
@ -14,5 +15,6 @@
<input type="hidden" name="next" value="{{ next }}"> <input type="hidden" name="next" value="{{ next }}">
<p class="text-center mt-2"><a href="{% url 'signup' %}">Sign Up</a></p> <p class="text-center mt-2"><a href="{% url 'signup' %}">Sign Up</a></p>
</form> </form>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

@ -6,7 +6,8 @@
{% block content %} {% 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' %}"> <form class="m-auto" method="post" action="{% url 'password_change' %}">
<h2>Change Password</h2> <h2>Change Password</h2>
<hr> <hr>
@ -14,5 +15,6 @@
{{ form | crispy }} {{ form | crispy }}
<button type="submit" class="btn btn-primary btn-block">Change Password</button> <button type="submit" class="btn btn-primary btn-block">Change Password</button>
</form> </form>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

@ -6,7 +6,8 @@
{% block content %} {% 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' %}"> <form class="m-auto" method="post" action="{% url 'signup' %}">
<h2>Sign Up</h2> <h2>Sign Up</h2>
<hr> <hr>
@ -20,5 +21,6 @@
<input type="hidden" name="next" value="{{ next }}"> <input type="hidden" name="next" value="{{ next }}">
<p class="text-center mt-2"><a href="{% url 'login' %}">Log In</a></p> <p class="text-center mt-2"><a href="{% url 'login' %}">Log In</a></p>
</form> </form>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

@ -4,8 +4,9 @@
{% block content %} {% block content %}
<h2>Bank</h2> <div class="container">
<div class="card"> <h2>Bank</h2>
<div class="card">
<div class="card-header d-flex"> <div class="card-header d-flex">
<div class="nav nav-tabs card-header-tabs mr-auto"> <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' %}" href="{% url 'bank' %}">Items</a>
@ -23,5 +24,6 @@
</div> </div>
{% block bank_footer %} {% block bank_footer %}
{% endblock bank_footer %} {% endblock bank_footer %}
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

@ -1,3 +1,13 @@
.container {
max-width: 1140px;
}
@media (min-width:1600px) {
.container-wide {
max-width: 1500px
}
}
/* WoW class-coloured text */ /* WoW class-coloured text */
.color-druid, .color-class-1 {color: #ff7d0a;} .color-druid, .color-class-1 {color: #ff7d0a;}
.color-hunter, .color-class-2 {color: #abd473;} .color-hunter, .color-class-2 {color: #abd473;}

View file

@ -43,10 +43,8 @@
</header> </header>
<main class="flex-shrink-0" role="main"> <main class="flex-shrink-0" role="main">
<div class="container">
{% block content %} {% block content %}
{% endblock content %} {% endblock content %}
</div>
</main> </main>
<footer class="footer mt-auto"> <footer class="footer mt-auto">

View file

@ -4,15 +4,16 @@
{% block content %} {% block content %}
<h2>Raids</h2> <div class="container">
<div class="d-flex justify-content-center mb-1"> <h2>Raids</h2>
<div class="d-flex justify-content-center mb-1">
<div class="btn-group" role="group" aria-label="Calendar navigation controls"> <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' 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' %}">{{ 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> <a class="btn btn-secondary" role="button" href="{% url 'raid_calendar' next_month.year next_month.month %}">&gt;</a>
</div> </div>
</div> </div>
<table class="raid-calendar table table-bordered bg-white mb-1"> <table class="raid-calendar table table-bordered bg-white mb-1">
<thead class="thead-light text-center"> <thead class="thead-light text-center">
<tr> <tr>
<th scope="col" class="w-14">Monday</th> <th scope="col" class="w-14">Monday</th>
@ -47,9 +48,10 @@
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </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 %} {% if perms.raids.add_raid %}<a class="btn btn-success" role="button" href="{% url 'raid_create' %}">Add New</a>{% endif %}
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

@ -6,14 +6,16 @@
{% block content %} {% block content %}
<div class="card mb-3"> <div class="container container-wide">
<div class="card mb-3">
<h5 class="card-header">Raid Details</h5> <h5 class="card-header">Raid Details</h5>
<div class="card-body"> <div class="card-body">
{% crispy raid_form %} {% crispy raid_form %}
</div> </div>
</div>
</div> </div>
<div class="container container-wide">
<div class="card mb-3"> <div class="card mb-3">
<h5 class="card-header">Raid Responses</h5> <h5 class="card-header">Raid Responses</h5>
<div class="card-body"> <div class="card-body">
<form class="responses-form table-borderless" method="post" action="{% url 'raid_change' raid.id %}"> <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"> <input class="btn btn-primary float-right" type="submit" name="submit" value="Save">
</form> </form>
</div> </div>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

@ -6,9 +6,11 @@
{% block content %} {% block content %}
<form method="post"> <div class="container">
<form method="post">
{% csrf_token %} {% csrf_token %}
<p>Are you sure you want to delete "{{ object }}"?</p> <p>Are you sure you want to delete "{{ object }}"?</p>
<button type="submit" class="btn btn-danger">Confirm</button> <button type="submit" class="btn btn-danger">Confirm</button>
</form> </form>
</div>
{% endblock content %} {% endblock content %}

View file

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

View file

@ -32,7 +32,7 @@
{% endif %} {% endif %}
<div class="mb-4"></div> <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-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
@ -50,7 +50,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% for status, status_responses in raid_responses.items %} {% for status, status_responses in raid_responses.items %}
{% regroup status_responses by group as group_responses_list %} {% regroup status_responses by group as group_responses_list %}
@ -109,7 +109,7 @@
{% endfor %} {% endfor %}
{% 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> <h6 class="card-header">Comments</h6>
<div class="card-body"> <div class="card-body">
{% for comment in raid.comments.all %} {% for comment in raid.comments.all %}
@ -133,6 +133,7 @@
</form> </form>
{% endif %} {% endif %}
</div> </div>
</div>
</div> </div>
{% endblock content %} {% endblock content %}

View file

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