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,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 %}

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}

View file

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

View file

@ -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">

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}

View file

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

View file

@ -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 %}

View file

@ -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 %}