Improve game overview header

This commit is contained in:
Lukáš Kucharczyk 2024-04-30 12:03:52 +02:00
parent 64edca9ffa
commit 973dda59d2
Signed by: lukas
SSH Key Fingerprint: SHA256:vMuSwvwAvcT6htVAioMP7rzzwMQNi3roESyhv+nAxeg
3 changed files with 52 additions and 61 deletions

View File

@ -9,7 +9,9 @@
## Improved ## Improved
* mark refunded purchases red on game overview * mark refunded purchases red on game overview
* increase session count on game overview when starting a new session * increase session count on game overview when starting a new session
* game overview: sort purchases also by date purchased (on top of date released) * game overview:
* sort purchases also by date purchased (on top of date released)
* improve header format
* stats: improve purchase name consistency * stats: improve purchase name consistency
* session list: use display name instead of sort name * session list: use display name instead of sort name

View File

@ -1,5 +1,5 @@
/* /*
! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
*/ */
/* /*
@ -211,6 +211,8 @@ textarea {
/* 1 */ /* 1 */
line-height: inherit; line-height: inherit;
/* 1 */ /* 1 */
letter-spacing: inherit;
/* 1 */
color: inherit; color: inherit;
/* 1 */ /* 1 */
margin: 0; margin: 0;
@ -234,9 +236,9 @@ select {
*/ */
button, button,
[type='button'], input:where([type='button']),
[type='reset'], input:where([type='reset']),
[type='submit'] { input:where([type='submit']) {
-webkit-appearance: button; -webkit-appearance: button;
/* 1 */ /* 1 */
background-color: transparent; background-color: transparent;
@ -687,6 +689,10 @@ select {
--tw-backdrop-opacity: ; --tw-backdrop-opacity: ;
--tw-backdrop-saturate: ; --tw-backdrop-saturate: ;
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
} }
::backdrop { ::backdrop {
@ -737,6 +743,10 @@ select {
--tw-backdrop-opacity: ; --tw-backdrop-opacity: ;
--tw-backdrop-saturate: ; --tw-backdrop-saturate: ;
--tw-backdrop-sepia: ; --tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
} }
.container { .container {
@ -846,10 +856,6 @@ select {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.mb-4 {
margin-bottom: 1rem;
}
.mb-8 { .mb-8 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@ -894,6 +900,10 @@ select {
display: none; display: none;
} }
.h-24 {
height: 6rem;
}
.h-3 { .h-3 {
height: 0.75rem; height: 0.75rem;
} }
@ -910,18 +920,6 @@ select {
height: 1.5rem; height: 1.5rem;
} }
.h-24 {
height: 6rem;
}
.h-screen {
height: 100vh;
}
.min-h-24 {
min-height: 6rem;
}
.min-h-screen { .min-h-screen {
min-height: 100vh; min-height: 100vh;
} }
@ -1016,10 +1014,6 @@ select {
white-space: nowrap; white-space: nowrap;
} }
.rounded {
border-radius: 0.25rem;
}
.rounded-full { .rounded-full {
border-radius: 9999px; border-radius: 9999px;
} }
@ -1057,11 +1051,6 @@ select {
background-color: rgb(124 58 237 / var(--tw-bg-opacity)); background-color: rgb(124 58 237 / var(--tw-bg-opacity));
} }
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-4 { .p-4 {
padding: 1rem; padding: 1rem;
} }
@ -1086,6 +1075,10 @@ select {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.pb-16 {
padding-bottom: 4rem;
}
.pl-3 { .pl-3 {
padding-left: 0.75rem; padding-left: 0.75rem;
} }
@ -1102,18 +1095,6 @@ select {
padding-top: 2rem; padding-top: 2rem;
} }
.pb-4 {
padding-bottom: 1rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@ -1176,6 +1157,11 @@ select {
color: rgb(203 213 225 / var(--tw-text-opacity)); color: rgb(203 213 225 / var(--tw-text-opacity));
} }
.text-slate-500 {
--tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity));
}
.text-white { .text-white {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
@ -1264,7 +1250,7 @@ a:hover {
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
} }
:is(.dark form label) { form label:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity)); color: rgb(148 163 184 / var(--tw-text-opacity));
} }
@ -1274,7 +1260,7 @@ a:hover {
margin-right: auto; margin-right: auto;
} }
:is(.dark .responsive-table) { .responsive-table:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }
@ -1305,9 +1291,9 @@ a:hover {
border-left-color: rgb(100 116 139 / var(--tw-border-opacity)); border-left-color: rgb(100 116 139 / var(--tw-border-opacity));
} }
:is(.dark form input),:is(.dark form input:is(.dark *),
select),:is(.dark select:is(.dark *),
textarea) { textarea:is(.dark *) {
border-width: 1px; border-width: 1px;
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(15 23 42 / var(--tw-border-opacity)); border-color: rgb(15 23 42 / var(--tw-border-opacity));
@ -1317,9 +1303,9 @@ textarea) {
color: rgb(241 245 249 / var(--tw-text-opacity)); color: rgb(241 245 249 / var(--tw-text-opacity));
} }
:is(.dark form input:disabled),:is(.dark form input:disabled:is(.dark *),
select:disabled),:is(.dark select:disabled:is(.dark *),
textarea:disabled) { textarea:disabled:is(.dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(51 65 85 / var(--tw-bg-opacity)); background-color: rgb(51 65 85 / var(--tw-bg-opacity));
--tw-text-opacity: 1; --tw-text-opacity: 1;
@ -1518,32 +1504,32 @@ th label {
display: block; display: block;
} }
:is(.dark .dark\:bg-gray-800) { .dark\:bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity)); background-color: rgb(31 41 55 / var(--tw-bg-opacity));
} }
:is(.dark .dark\:bg-gray-900) { .dark\:bg-gray-900:is(.dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity)); background-color: rgb(17 24 39 / var(--tw-bg-opacity));
} }
:is(.dark .dark\:text-slate-400) { .dark\:text-slate-400:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(148 163 184 / var(--tw-text-opacity)); color: rgb(148 163 184 / var(--tw-text-opacity));
} }
:is(.dark .dark\:text-slate-500) { .dark\:text-slate-500:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(100 116 139 / var(--tw-text-opacity)); color: rgb(100 116 139 / var(--tw-text-opacity));
} }
:is(.dark .dark\:text-slate-600) { .dark\:text-slate-600:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity)); color: rgb(71 85 105 / var(--tw-text-opacity));
} }
:is(.dark .dark\:text-white) { .dark\:text-white:is(.dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity)); color: rgb(255 255 255 / var(--tw-text-opacity));
} }

View File

@ -6,16 +6,19 @@
{% load markdown_extras %} {% load markdown_extras %}
{% block content %} {% block content %}
<div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto"> <div class="dark:text-white max-w-sm sm:max-w-xl lg:max-w-3xl mx-auto">
<h1 class="text-4xl flex items-center"> <h1 class="text-5xl flex items-center">
{{ game.name }} {{ game.name }}
<span class="dark:text-slate-500">(#{{ game.pk }})</span>
{% url 'edit_game' game.id as edit_url %} {% url 'edit_game' game.id as edit_url %}
{% include 'components/edit_button.html' with edit_url=edit_url %} {% include 'components/edit_button.html' with edit_url=edit_url %}
</h1> </h1>
<h2 class="text-lg my-2 ml-2 dark:text-slate-500">First Released: <span class="text-white">{{ game.year_released }}</span></h2>
<h2 class="text-lg my-2 ml-2"> <h2 class="text-lg my-2 ml-2">
{{ hours_sum }} <span class="dark:text-slate-500">total</span> <span class="dark:text-slate-500">Playtime: </span>
{{ session_average }} <span class="dark:text-slate-500">avg</span> {{ hours_sum }} <span class="dark:text-slate-500">hours over</span> {{ session_count }} <span class="dark:text-slate-500">sessions (</span>{{ session_average }}<span class="dark:text-slate-500">/session)</span>
({{ playrange }}) </h2>
<h2 class="text-lg my-2 ml-2">
<span class="dark:text-slate-500">Played in: </span>
{{ playrange }}
</h2> </h2>
<hr class="border-slate-500"> <hr class="border-slate-500">
<h1 class="text-3xl mt-4 mb-1"> <h1 class="text-3xl mt-4 mb-1">