Integrate TailwindCSS

Makefile

@@ -7,12 +7,6 @@ HTMLFILES := $(shell find games/templates -type f)
 npm:
 	npm install
 
-css: common/input.css
-	npx tailwindcss -i ./common/input.css -o  ./games/static/base.css
-
-css-dev: css
-	npx tailwindcss -i ./common/input.css -o  ./games/static/base.css --watch
-
 makemigrations:
 	poetry run python manage.py makemigrations
 

frontend/package.json

@@ -10,13 +10,9 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.13",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.2.1",
     "postcss": "^8.4.21",
-    "prettier": "^2.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.7.0",
     "tailwindcss": "^3.2.4"
   },
   "devDependencies": {

frontend/src/App.jsx

@@ -1,20 +1,42 @@
-import "./App.css";
+import { useState } from 'react'
-import Nav from "./components/Nav";
+import './App.css'
-import { Outlet, useLoaderData } from "react-router-dom";
 
 function App() {
   
 
   return (
     <>
-      <div className="dark:bg-gray-800 min-h-screen">
+    <div className="dark:bg-gray-800 min-h-screen">
-        <Nav />
+            <nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
-        <Outlet />
+                <div className="container flex flex-wrap items-center justify-between mx-auto">
-      </div>
+                    <a href="{% url 'index' %}" className="flex items-center">
-      {/* {% load version %} */}
+                        <span className="text-4xl">⌚</span>
-      {/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
+                        <span className="self-center text-xl font-semibold whitespace-nowrap text-white">Timetracker</span>
-    </>
+                    </a>
-  );
+                    <div className="w-full md:block md:w-auto">
+                        <ul
+                            className="flex flex-col md:flex-row p-4 mt-4 dark:text-white">
+                            <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_game' %}">New Game</a></li>
+                            <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_platform' %}">New Platform</a></li>
+                            {/* {% if game_available and platform_available %} */}
+                                <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_purchase' %}">New Purchase</a></li>
+                            {/* {% endif %} */}
+                            {/* {% if purchase_available %} */}
+                                <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'add_session' %}">New Session</a></li>
+                            {/* {% endif %} */}
+                            {/* {% if session_count > 0 %} */}
+                                <li><a className="block py-2 pl-3 pr-4 hover:underline" href="{% url 'list_sessions' %}">All Sessions</a></li>
+                            {/* {% endif %} */}
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+            {/* {% block content %}No content here.{% endblock content %} */}
+        </div>
+        {/* {% load version %} */}
+        {/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
+        </>
+  )
 }
 
 export default App;

frontend/src/index.css

@@ -2,112 +2,21 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: "IBM Plex Mono";
-  src: url("fonts/IBMPlexMono-regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "IBM Plex Sans";
-  src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "IBM Plex Serif";
-  src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
-  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;
 }
 
-form input:disabled,
+#session-table {
-select:disabled,
+  display: grid;
-textarea:disabled {
+  grid-template-columns: 3fr 1fr repeat(2, 2fr) 0.5fr 1fr;
-  @apply dark:bg-slate-700 dark:text-slate-400;
-}
-
-.errorlist {
-  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
-}
-
-@media screen and (min-width: 768px) {
-  form input,
-  select,
-  textarea {
-    width: 300px;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  form input,
-  select,
-  textarea {
-    width: 150px;
-  }
 }
 
 #button-container button {
   @apply mx-1;
 }
-
-th {
-  @apply text-right;
-}
-
-th label {
-  @apply mr-4;
-}
-
-.basic-button-container {
-  @apply flex space-x-2 justify-center;
-}
-
-.basic-button {
-  @apply inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out;
-}

frontend/vite.config.js

@@ -6,10 +6,7 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      '/api': {
+      "/api": "http://127.0.0.1:8001",
-        target: 'http://127.0.0.1:8000',
+    },
-        changeOrigin: true
+  },
-      }
-    }
-  }
 });