change to use icons

This commit is contained in:
2021-12-10 15:57:36 -06:00
parent 8e6a3fc7c2
commit 8d2cba39f7
3 changed files with 23 additions and 36 deletions

View File

@@ -0,0 +1 @@
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");

View File

@@ -2,13 +2,17 @@
{% with events_active="active" %}
{% block precontent %}
<div class="d-flex justify-content-center justify-content-md-center border-bottom bg-white">
<a class="btn btn-outline-secondary btn-sm d-md-flex my-auto align-items-md-center my-3 mx-3" href="{% url 'edit lineup' event_id=previous_event.id %}" role="button">&lt; {{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}</a>
<a class="btn btn-outline-secondary btn-sm d-md-flex my-auto align-items-md-center my-3 mx-3" href="{% url 'edit lineup' event_id=previous_event.id %}" role="button">
<i class="bi bi-chevron-left"></i>{{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}
</a>
<div>
<h6 class="text-center m-1">{{ event.away_team.name }} vs. {{ event.home_team.name }}</h6>
<p class="text-center text-muted m-1">{{ event.start|date:"l, F j, Y g:i A" }}<br>{{ event.venue.name }}</p>
<h6 class="text-muted m-1"></h6>
</div>
<a class="btn btn-outline-secondary btn-sm align-items-center my-auto my-3 mx-3" href="{% url 'edit lineup' event_id=next_event.id %}" role="button">{{ next_event.start|date:"D" }}&nbsp;{{ next_event.start|date:"n/j" }} &gt;</a>
<a class="btn btn-outline-secondary btn-sm align-items-center my-auto my-3 mx-3" href="{% url 'edit lineup' event_id=next_event.id %}" role="button">
{{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}<i class="bi bi-chevron-right"></i>
</a>
</div>
<ul class="nav nav-pills nav-fill bg-white" role="tablist">
@@ -54,7 +58,7 @@
<div class="card my-1">
<div class="card-header"><h5>Bench</h5></div>
<div class="card-body p-0">
{% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none"%}
{% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none" available_class="d-none"%}
</div>
</div>
</div>

View File

@@ -17,39 +17,7 @@
{{ form.order.as_hidden }}
{{ form.player.as_hidden }}
{{ form.teamsnap_id.as_hidden }}
<td id="player-availability-{{ form.instance.player.id }}"
class="{{ available_class }}"
>
{% if form.availability.available == 1 %}
<button class="btn btn-light bg-info p-1"
id="player-available-{{ form.instance.player.id }}"
>
<span style="visibility: hidden">2</span>
<span class="visually-hidden">Maybe</span>
</button>
{% elif form.availability.available == 2%}
<button class="btn btn-light bg-success p-1"
id="player-available-{{ form.instance.player.id }}"
>
<span style="visibility: hidden">1</span>
</button>
<span class="visually-hidden">Yes</span>
{% elif form.availability.available == 0%}
<button class="btn btn-light bg-danger p-1"
id="player-available-{{ form.instance.player.id }}"
>
<span style="visibility: hidden">0</span>
</button>
<span class="visually-hidden">No</span>
{% else %}
<button class="btn btn-light bg-secondary p-1"
id="player-available-{{ form.instance.player.id }}"
>
<span style="visibility: hidden">X</span>
</button>
<span class="visually-hidden">Unknown</span>
{% endif %}
</td>
<th scope="row"
id="player-order-{{ form.instance.player.id }}"
class="{{ order_class }}">
@@ -71,7 +39,21 @@
</button>
{% endif %}
</th>
<th>
<span id="player-availability-{{ form.instance.player.id }}" class="mx-1">
{% if form.availability.available == 2 %}
<i class="bi bi-circle-fill text-success"></i>
{% elif form.availability.available == 1 %}
<i class="bi bi-circle-fill text-info"></i>
{% elif form.availability.available == 0 %}
<i class="bi bi-circle-fill text-danger"></i>
{% else %}
<i class="bi bi-circle-fill text-secondary"></i>
{% endif %}
</span>
{{ form.instance.player.first_name }}&nbsp;{{ form.instance.player.last_name }}&nbsp;
<small class="text-muted fw-light">#{{ form.instance.player.jersey_number }}</small>
{# <br><code><small>{{ form.statline }}</small></code>#}