CHANGELOG.md

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

games/static/base.css

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

games/templates/view_game.html

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