lukas
/
timetracker
1
0
Fork 0
Code Issues 17 Pull Requests 4 Actions Packages Projects 1 Releases 20 Wiki Activity

Further improve session list

This commit is contained in:
Lukáš Kucharczyk 2023-09-30 19:44:35 +02:00
parent a2ababaebc
commit 8786a4518e
6 changed files with 154 additions and 4585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/index.css
View File

@ -41,19 +41,16 @@ form label {
@apply border-l border-l-slate-500; @apply border-l border-l-slate-500;
} }
.responsive-table th, td { @layer utilities {
@apply px-4; .max-w-20char {
}
@media screen and (max-width: 768px) {
.responsive-table th, td,
td {
@apply px-2;
}
.responsive-table td:first-child {
@apply overflow-hidden text-ellipsis whitespace-nowrap pr-2;
max-width: 20ch; max-width: 20ch;
} }
.max-w-35char {
max-width: 40ch;
}
.max-w-40char {
max-width: 40ch;
}
} }
form input, form input,
@ -78,12 +75,6 @@ textarea {
} }
} }
@media screen and (max-width: 768px) {
.hide-on-small {
display: none;
}
}
#button-container button { #button-container button {
@apply mx-1; @apply mx-1;
} }

4612
games/static/base.css
View File

File diff suppressed because it is too large Load Diff

BIN
games/static/icons/loading.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 787 B

1
games/templates/base.html
View File

@ -14,6 +14,7 @@
</head> </head>
<body class="dark"> <body class="dark">
<img id="indicator" src="{% static 'icons/loading.png' %}" class="absolute right-3 top-3 animate-spin htmx-indicator" />
<div class="dark:bg-gray-800 min-h-screen"> <div class="dark:bg-gray-800 min-h-screen">
<nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded"> <nav class="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
<div class="container flex flex-wrap items-center justify-between mx-auto"> <div class="container flex flex-wrap items-center justify-between mx-auto">

22
games/templates/components/button.html Normal file
View File

@ -0,0 +1,22 @@
<button
type="button"
title="{{ title }}"
autofocus
class="truncate max-w-xs sm:max-w-md lg:max-w-lg py-1 px-2 bg-green-600 hover:bg-green-700 focus:ring-green-500 focus:ring-offset-blue-200 text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="self-center w-6 h-6 inline"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"
/>
</svg>
{{ text }}
</button>

59
games/templates/list_sessions.html
View File

@ -6,23 +6,66 @@
{% block content %} {% block content %}
{% if dataset.count >= 1 %}
<div class="mx-auto text-center my-4">
<a
id="last-session-start"
href="{% url 'start_session' last.id %}"
hx-get="{% url 'start_session' last.id %}"
hx-indicator="#indicator"
hx-swap="afterbegin"
hx-target=".responsive-table tbody"
hx-select=".responsive-table tbody tr:first-child"
onClick="document.querySelector('#last-session-start').classList.add('invisible')"
class="{% if last.timestamp_end == null %}invisible{% endif %}"
>
{% include 'components/button.html' with text=last.purchase title="Start session of last played game" only %}
</a>
</div>
{% endif %}
<table class="responsive-table"> <table class="responsive-table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
<th class="hide-on-small">Start</th> <th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
<th class="hide-on-small">End</th> <th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
<th>Duration</th> <th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for data in dataset %} {% for data in dataset %}
<tr> <tr>
<td class="purchase-name">{{ data.purchase.edition }}</td> <td
<td class="hide-on-small font-mono">{{ data.timestamp_start | date:"d/m/Y H:i" }}</td> class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char md:max-w-40char"
<td class="hide-on-small font-mono">{{ data.timestamp_end | date:"d/m/Y H:i" }}</td> >
<td class="font-mono">{{ data.duration_formatted }}</td> {{ data.purchase.edition }}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
{{ data.timestamp_start | date:"d/m/Y H:i" }}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden lg:table-cell">
{% if data.unfinished %}
<a
href="{% url 'update_session' data.id %}"
hx-get="{% url 'update_session' data.id %}"
hx-swap="outerHTML"
hx-target=".responsive-table tbody tr:first-child"
hx-select=".responsive-table tbody tr:first-child"
hx-indicator="#indicator"
onClick="document.querySelector('#last-session-start').classList.remove('invisible')"
>
<span class="text-yellow-300">Finish now?</span>
</a>
{% elif data.duration_manual %}
--
{% else %}
{{ data.timestamp_end | date:"d/m/Y H:i" }}
{% endif %}
</td>
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono">
{{ data.duration_formatted }}
</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>