lukas/timetracker
1
0
Fork 0
Code Issues 24 Pull Requests 3 Actions Packages Projects 1 Releases 23 Wiki Activity

Fix dropdown and formatting

Browse Source
This commit is contained in:
Lukáš Kucharczyk
2026-01-15 20:51:13 +01:00
parent a6577a9e53
commit 5cac19be7b
7 changed files with 108 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
games/templates/cotton/gamestatus.html
+2 -2
View File
@@ -1,5 +1,5 @@
<span class="relative ml-3 {{class}}">
<span class="rounded-xl w-2 h-2 absolute -left-3 top-2
<span class="{% if display == 'flex' %}flex{% else %}inline-flex{% endif %} gap-2 items-center align-middle {{class}}">
<span class="rounded-xl w-3 h-3
{% if status == "u" %}
bg-gray-500
{% elif status == "p" %}
games/templates/view_game.html
+60 -5
View File
@@ -57,12 +57,67 @@
<span class="uppercase">Original year</span>
<span class="text-slate-300">{{ game.original_year_released }}</span>
</div>
<div class="flex gap-2 items-center">
<div class="flex gap-2 items-center"
id="game-status-selector"
x-data="{
status: '{{ game.status }}',
status_display: '{{ game.get_status_display }}',
open: false,
saving: false,
setStatus(newStatus, newStatusDisplay) {
this.status = newStatus;
this.status_display = newStatusDisplay;
this.saving = true;
fetch(`/api/games/{{ game.id }}/status`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': '{{ csrf_token }}'
},
body: JSON.stringify({ status: newStatus })
}).finally(() => this.saving = false);
}
}"
>
<span class="uppercase">Status</span>
<c-gamestatus :status="game.status" class="text-slate-300">
{{ game.get_status_display }}
</c-gamestatus>
{% if game.mastered %}👑{% endif %}
<div class="inline-flex rounded-md shadow-xs" role="group" @click.outside="open = false">
<button type="button" @click="open = !open" class="relative px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white align-middle">
<span class="flex flex-row gap-4 justify-between items-center">
<span class="flex gap-2 items-center text-slate-300">
<span class="rounded-xl w-3 h-3"
:class="{
'bg-gray-500': status == 'u',
'bg-orange-400': status == 'p',
'bg-green-500': status == 'f',
'bg-red-500': status == 'a',
'bg-purple-500': status == 'r'
}">&nbsp;</span>
<span x-text="status_display"></span>
</span>
<svg class="text-white w-3" viewBox="5 8 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<div
class="absolute top-[105%] left-0 w-full whitespace-nowrap z-10 text-sm font-medium bg-gray-800/20 backdrop-blur-lg rounded-md rounded-t-none border border-gray-200 dark:border-gray-700"
x-show="open"
>
<ul class="[&_li:first-of-type]:rounded-none [&_li:last-of-type]:rounded-t-none">
{% for status_value, status_label in game_statuses %}
<li class="px-4 py-2 dark:hover:text-white dark:hover:bg-gray-700 dark:focus:ring-blue-500 dark:focus:text-white rounded">
<a href="#" @click.prevent.stop="setStatus('{{ status_value }}', '{{ status_label }}'); open = false;"
:class="{ 'font-bold': status === '{{ status_value }}' }">
<c-gamestatus display="flex" status="{{ status_value }}" class="text-slate-300">{{ status_label }}</c-gamestatus>
</a>
</li>
{% endfor %}
</ul>
</div>
</button>
</div>
<div x-show="saving" style="display: none;">Saving...</div>
{% if game.mastered %}👑{% endif %}
</div>
<div class="flex gap-2 items-center"
x-data="{ open: false }"