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>
+  <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 }}
-        </tr>
+      </td>
-        {% endfor %}
+      <td class="px-2 sm:px-4 md:px-6 md:py-2 font-mono hidden sm:table-cell">
-    </tbody>
+        {{ 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 All checks were successful 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