feat(frontend): integrate tailwind pipeline and update templates

This commit is contained in:
Alfredo Di Stasio
2026-03-10 12:49:25 +01:00
parent 4d49d30495
commit 3d795991fe
27 changed files with 1211 additions and 435 deletions

View File

@ -4,24 +4,24 @@
{% block content %}
<section class="panel">
<div class="row-between wrap-gap">
<div class="flex flex-wrap items-start justify-between gap-3">
<div>
<h1>Scouting Workspace</h1>
<p class="muted-text">Manage saved searches and your player watchlist.</p>
<p class="mt-1 text-sm text-slate-600">Manage saved searches and your player watchlist.</p>
</div>
<div class="row-gap">
<a class="button ghost" href="{% url 'scouting:saved_search_list' %}">All saved searches</a>
<a class="button ghost" href="{% url 'scouting:watchlist' %}">Watchlist</a>
<div class="flex flex-wrap gap-2">
<a class="btn-secondary" href="{% url 'scouting:saved_search_list' %}">All saved searches</a>
<a class="btn-secondary" href="{% url 'scouting:watchlist' %}">Watchlist</a>
</div>
</div>
</section>
<section class="panel mt-16">
<section class="panel mt-4">
<h2>Saved Searches</h2>
{% include "scouting/partials/saved_search_table.html" with saved_searches=saved_searches %}
</section>
<section class="panel mt-16">
<section class="panel mt-4">
<h2>Watchlist</h2>
{% include "scouting/partials/watchlist_table.html" with favorites=favorites %}
</section>

View File

@ -5,12 +5,13 @@
hx-post="{% url 'scouting:favorite_toggle' player.id %}"
hx-target="#favorite-form-{{ player.id }}"
hx-swap="outerHTML"
hx-indicator="#htmx-loading"
>
{% csrf_token %}
<input type="hidden" name="next" value="{{ next_url }}">
{% if is_favorite %}
<button type="submit" class="button ghost">Remove favorite</button>
<button type="submit" class="btn-secondary">Remove favorite</button>
{% else %}
<button type="submit" class="button ghost">Add favorite</button>
<button type="submit" class="btn-secondary">Add favorite</button>
{% endif %}
</form>

View File

@ -1,3 +1,5 @@
<div class="message {% if ok %}success{% else %}error{% endif %}">
{{ message }}
</div>
{% if ok %}
<div class="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800" role="status">{{ message }}</div>
{% else %}
<div class="rounded-md border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-800" role="alert">{{ message }}</div>
{% endif %}

View File

@ -1,18 +1,23 @@
<div class="panel mt-16">
<div class="mt-4 rounded-lg border border-slate-200 bg-slate-50 p-4">
<h3>Save Current Search</h3>
<p class="muted-text">Store current filters and replay them later.</p>
<p class="mt-1 text-sm text-slate-600">Store current filters and replay them later.</p>
<form
method="post"
action="{% url 'scouting:saved_search_create' %}"
class="row-gap"
class="mt-3 flex flex-wrap items-end gap-3"
hx-post="{% url 'scouting:saved_search_create' %}"
hx-target="#saved-search-feedback"
hx-swap="innerHTML"
hx-indicator="#htmx-loading"
>
{% csrf_token %}
<input type="text" name="name" placeholder="Search name" required>
<label class="inline-label">
<div class="min-w-56 flex-1">
<label for="saved-search-name">Search name</label>
<input id="saved-search-name" type="text" name="name" placeholder="Search name" required>
</div>
<label class="inline-flex items-center gap-2 pb-2 text-sm text-slate-700">
<input type="checkbox" name="is_public">
Public
</label>
@ -21,7 +26,7 @@
<input type="hidden" name="{{ key }}" value="{{ value }}">
{% endfor %}
<button class="button" type="submit">Save search</button>
<button class="btn" type="submit">Save search</button>
</form>
<div id="saved-search-feedback" class="mt-16"></div>
<div id="saved-search-feedback" class="mt-3" aria-live="polite"></div>
</div>

View File

@ -1,6 +1,6 @@
{% if saved_searches %}
<div class="table-wrap mt-16">
<table>
<div class="table-wrap mt-4">
<table class="data-table">
<thead>
<tr>
<th>Name</th>
@ -10,20 +10,20 @@
<th>Actions</th>
</tr>
</thead>
<tbody>
<tbody class="divide-y divide-slate-100 bg-white">
{% for saved_search in saved_searches %}
<tr>
<td>{{ saved_search.name }}</td>
<td class="font-medium text-slate-800">{{ saved_search.name }}</td>
<td>{% if saved_search.is_public %}Public{% else %}Private{% endif %}</td>
<td>{{ saved_search.updated_at|date:"Y-m-d H:i" }}</td>
<td>{{ saved_search.last_run_at|date:"Y-m-d H:i"|default:"-" }}</td>
<td>
<div class="row-gap">
<a class="button ghost" href="{% url 'scouting:saved_search_run' saved_search.pk %}">Run</a>
<a class="button ghost" href="{% url 'scouting:saved_search_edit' saved_search.pk %}">Edit</a>
<div class="flex flex-wrap gap-2">
<a class="btn-secondary" href="{% url 'scouting:saved_search_run' saved_search.pk %}">Run</a>
<a class="btn-secondary" href="{% url 'scouting:saved_search_edit' saved_search.pk %}">Edit</a>
<form method="post" action="{% url 'scouting:saved_search_delete' saved_search.pk %}">
{% csrf_token %}
<button class="button ghost" type="submit">Delete</button>
<button class="btn-secondary" type="submit">Delete</button>
</form>
</div>
</td>
@ -33,5 +33,5 @@
</table>
</div>
{% else %}
<p class="mt-16">No saved searches yet.</p>
<div class="empty-state mt-4">No saved searches yet.</div>
{% endif %}

View File

@ -1,6 +1,6 @@
{% if favorites %}
<div class="table-wrap mt-16">
<table>
<div class="table-wrap mt-4">
<table class="data-table">
<thead>
<tr>
<th>Player</th>
@ -10,15 +10,12 @@
<th>Action</th>
</tr>
</thead>
<tbody>
<tbody class="divide-y divide-slate-100 bg-white">
{% for favorite in favorites %}
<tr>
<td><a href="{% url 'players:detail' favorite.player_id %}">{{ favorite.player.full_name }}</a></td>
<td><a class="font-medium" href="{% url 'players:detail' favorite.player_id %}">{{ favorite.player.full_name }}</a></td>
<td>{{ favorite.player.nationality.name|default:"-" }}</td>
<td>
{{ favorite.player.nominal_position.code|default:"-" }}
/ {{ favorite.player.inferred_role.name|default:"-" }}
</td>
<td>{{ favorite.player.nominal_position.code|default:"-" }} / {{ favorite.player.inferred_role.name|default:"-" }}</td>
<td>{{ favorite.created_at|date:"Y-m-d" }}</td>
<td>
<div id="favorite-toggle-{{ favorite.player_id }}">
@ -31,5 +28,5 @@
</table>
</div>
{% else %}
<p class="mt-16">No players in your watchlist yet.</p>
<div class="empty-state mt-4">No players in your watchlist yet.</div>
{% endif %}

View File

@ -3,14 +3,14 @@
{% block title %}HoopScout | Edit Saved Search{% endblock %}
{% block content %}
<section class="panel narrow">
<section class="panel mx-auto max-w-lg">
<h1>Edit Saved Search</h1>
<form method="post" class="stack">
<form method="post" class="mt-4 space-y-4">
{% csrf_token %}
{{ form.as_p }}
<div class="row-gap">
<button type="submit" class="button">Update</button>
<a class="button ghost" href="{% url 'scouting:index' %}">Cancel</a>
<div class="flex flex-wrap gap-2">
<button type="submit" class="btn">Update</button>
<a class="btn-secondary" href="{% url 'scouting:index' %}">Cancel</a>
</div>
</form>
</section>

View File

@ -4,9 +4,9 @@
{% block content %}
<section class="panel">
<div class="row-between wrap-gap">
<div class="flex flex-wrap items-center justify-between gap-3">
<h1>Saved Searches</h1>
<a class="button ghost" href="{% url 'scouting:index' %}">Back to scouting</a>
<a class="btn-secondary" href="{% url 'scouting:index' %}">Back to scouting</a>
</div>
{% include "scouting/partials/saved_search_table.html" with saved_searches=saved_searches %}
</section>

View File

@ -4,9 +4,9 @@
{% block content %}
<section class="panel">
<div class="row-between wrap-gap">
<div class="flex flex-wrap items-center justify-between gap-3">
<h1>Watchlist</h1>
<a class="button ghost" href="{% url 'scouting:index' %}">Back to scouting</a>
<a class="btn-secondary" href="{% url 'scouting:index' %}">Back to scouting</a>
</div>
{% include "scouting/partials/watchlist_table.html" with favorites=favorites %}
</section>