Further improve session list

fix tailwind config to only scan relevant files
Update base.css
2023-09-30 19:44:35 +02:00 · 2023-09-30 18:13:50 +02:00 · 2023-09-30 16:25:19 +02:00 · 2023-09-30 16:25:05 +02:00 · 2023-09-30 16:24:54 +02:00
8 changed files with 203 additions and 4624 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -4,5 +4,8 @@
    ],
    "python.testing.unittestEnabled": false,
    "python.testing.pytestEnabled": true,
-    "python.analysis.typeCheckingMode": "basic"
+    "python.analysis.typeCheckingMode": "basic",
+    "[python]": {
+        "editor.defaultFormatter": "ms-python.black-formatter"
+    },
 }
--- a/common/input.css
+++ b/common/input.css
@ -2,17 +2,64 @@
@tailwind components;
@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 {
  @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,
 select,
 textarea {
  @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,
  select,
  textarea {
@ -20,7 +67,7 @@ textarea {
  }
 }

-@media screen and  (max-width: 768px) {
+@media screen and (max-width: 768px) {
  form input,
  select,
  textarea {
@ -28,28 +75,6 @@ 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 {
  @apply mx-1;
 }
@ -63,7 +88,7 @@ th label {
 }

 .basic-button-container {
-  @apply flex space-x-2 justify-center
+  @apply flex space-x-2 justify-center;
 }

 .basic-button {
--- a/games/static/base.css
+++ b/games/static/base.css
--- a/games/static/icons/loading.png
+++ b/games/static/icons/loading.png
--- a/games/templates/base.html
+++ b/games/templates/base.html
@ -14,6 +14,7 @@
    </head>
    
    <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">
            <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">
--- a/games/templates/components/button.html
+++ b/games/templates/components/button.html
@ -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>
--- a/games/templates/list_sessions.html
+++ b/games/templates/list_sessions.html
@ -6,25 +6,68 @@

 {% 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">
-    <thead>
-        <tr>
-            <th>Name</th>
-            <th class="hide-on-small">Start</th>
-            <th class="hide-on-small">End</th>
-            <th>Duration</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for data in dataset %}
-        <tr>
-            <td class="purchase-name">{{ data.purchase.edition }}</td>
-            <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>
-            <td class="font-mono">{{ data.duration_formatted }}</td>
-        </tr>
-        {% endfor %}
-    </tbody>
+  <thead>
+    <tr>
+      <th class="px-2 sm:px-4 md:px-6 md:py-2">Name</th>
+      <th class="hidden sm:table-cell px-2 sm:px-4 md:px-6 md:py-2">Start</th>
+      <th class="hidden lg:table-cell px-2 sm:px-4 md:px-6 md:py-2">End</th>
+      <th class="px-2 sm:px-4 md:px-6 md:py-2">Duration</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for data in dataset %}
+    <tr>
+      <td
+        class="px-2 sm:px-4 md:px-6 md:py-2 purchase-name truncate max-w-20char md:max-w-40char"
+      >
+        {{ 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>
+    {% endfor %}
+  </tbody>
 </table>
 {% endblock content %}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -2,7 +2,7 @@ const defaultTheme = require('tailwindcss/defaultTheme')

 module.exports = {
    darkMode: 'class',
-    content: ["./**/*.{html,js}"],
+    content: ["./games/**/*.{html,js}"],
    theme: {
        extend: {
          fontFamily: {
Author	SHA1	Message	Date
Lukáš Kucharczyk	29bf3b1946	Further improve session list continuous-integration/drone/push Build is passing Details	2023-09-30 19:44:35 +02:00
Lukáš Kucharczyk	3f7ccea2e2	fix tailwind config to only scan relevant files	2023-09-30 18:13:50 +02:00
Lukáš Kucharczyk	b5ffb3586b	Update base.css	2023-09-30 16:25:19 +02:00
Lukáš Kucharczyk	26d57a238e	Update .vscode	2023-09-30 16:25:05 +02:00
Lukáš Kucharczyk	2d5ad3182c	Update CSS	2023-09-30 16:24:54 +02:00