Compare commits
No commits in common. "29bf3b1946ee385488cb4169efa8f73b1e2eae7d" and "49cc3ea0cccbbaebc2d8c46c8591012860a26eab" have entirely different histories.
29bf3b1946
...
49cc3ea0cc
|
|
@ -4,8 +4,5 @@
|
||||||
],
|
],
|
||||||
"python.testing.unittestEnabled": false,
|
"python.testing.unittestEnabled": false,
|
||||||
"python.testing.pytestEnabled": true,
|
"python.testing.pytestEnabled": true,
|
||||||
"python.analysis.typeCheckingMode": "basic",
|
"python.analysis.typeCheckingMode": "basic"
|
||||||
"[python]": {
|
}
|
||||||
"editor.defaultFormatter": "ms-python.black-formatter"
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
@ -2,64 +2,17 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "IBM Plex Mono";
|
|
||||||
src: url("fonts/IBMPlexMono-regular.ttf") format("truetype");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: "IBM Plex Sans";
|
|
||||||
src: url("fonts/IBMPlexSans-Regular.ttf") format("truetype");
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
form label {
|
form label {
|
||||||
@apply dark:text-slate-400;
|
@apply dark:text-slate-400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.responsive-table {
|
|
||||||
@apply dark:text-white mx-auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-table tr:nth-child(even) {
|
|
||||||
@apply bg-slate-800
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-table tbody tr:nth-child(odd) {
|
|
||||||
@apply bg-slate-900
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-table thead th {
|
|
||||||
@apply text-left border-b-2 border-b-slate-500 text-xl;
|
|
||||||
}
|
|
||||||
|
|
||||||
.responsive-table thead th:not(:first-child),
|
|
||||||
.responsive-table td:not(:first-child) {
|
|
||||||
@apply border-l border-l-slate-500;
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer utilities {
|
|
||||||
.max-w-20char {
|
|
||||||
max-width: 20ch;
|
|
||||||
}
|
|
||||||
.max-w-35char {
|
|
||||||
max-width: 40ch;
|
|
||||||
}
|
|
||||||
.max-w-40char {
|
|
||||||
max-width: 40ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
form input,
|
form input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
@apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
|
@apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 768px) {
|
@media screen and (min-width: 768px) {
|
||||||
form input,
|
form input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
|
|
@ -67,7 +20,7 @@ textarea {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
form input,
|
form input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
|
|
@ -75,6 +28,28 @@ textarea {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#session-table,
|
||||||
|
#session-table-head {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3fr 2fr repeat(2, 1fr) 0.5fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.purchase-name > span:nth-child(2) {
|
||||||
|
@apply ml-4
|
||||||
|
}
|
||||||
|
|
||||||
|
.purchase-name > span:nth-child(2) > a > img {
|
||||||
|
@apply opacity-0 transition-opacity duration-500
|
||||||
|
}
|
||||||
|
|
||||||
|
.purchase-name:hover > span:nth-child(2) > a > img {
|
||||||
|
@apply opacity-50
|
||||||
|
}
|
||||||
|
|
||||||
|
.purchase-name > span:nth-child(2) > a > img:hover {
|
||||||
|
@apply opacity-100
|
||||||
|
}
|
||||||
|
|
||||||
#button-container button {
|
#button-container button {
|
||||||
@apply mx-1;
|
@apply mx-1;
|
||||||
}
|
}
|
||||||
|
|
@ -88,7 +63,7 @@ th label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.basic-button-container {
|
.basic-button-container {
|
||||||
@apply flex space-x-2 justify-center;
|
@apply flex space-x-2 justify-center
|
||||||
}
|
}
|
||||||
|
|
||||||
.basic-button {
|
.basic-button {
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 787 B |
|
|
@ -14,7 +14,6 @@
|
||||||
</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">
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<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>
|
|
||||||
|
|
@ -6,68 +6,25 @@
|
||||||
|
|
||||||
{% 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 class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
|
<th>Name</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">Start</th>
|
||||||
<th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
|
<th class="hide-on-small">End</th>
|
||||||
<th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
|
<th>Duration</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for data in dataset %}
|
{% for data in dataset %}
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td class="purchase-name">{{ data.purchase.edition }}</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_start | date:"d/m/Y H:i" }}</td>
|
||||||
>
|
<td class="hide-on-small font-mono">{{ data.timestamp_end | date:"d/m/Y H:i" }}</td>
|
||||||
{{ data.purchase.edition }}
|
<td class="font-mono">{{ data.duration_formatted }}</td>
|
||||||
</td>
|
</tr>
|
||||||
<td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
|
{% endfor %}
|
||||||
{{ data.timestamp_start | date:"d/m/Y H:i" }}
|
</tbody>
|
||||||
</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>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
darkMode: 'class',
|
darkMode: 'class',
|
||||||
content: ["./games/**/*.{html,js}"],
|
content: ["./**/*.{html,js}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
fontFamily: {
|
fontFamily: {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue