From 76b09fea39224ea3e662ad9e5942865e9d40c8d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Wed, 25 Jan 2023 12:47:39 +0100 Subject: [PATCH] Integrate TailwindCSS --- Makefile | 6 --- frontend/package.json | 4 -- frontend/src/App.jsx | 44 ++++++++++++++----- frontend/src/index.css | 97 ++--------------------------------------- frontend/vite.config.js | 9 ++-- 5 files changed, 39 insertions(+), 121 deletions(-) diff --git a/Makefile b/Makefile index 169d22d..3e3c57e 100644 --- a/Makefile +++ b/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 diff --git a/frontend/package.json b/frontend/package.json index 3f7acce..28a3138 100644 --- a/frontend/package.json +++ b/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": { diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 115716b..93f352a 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,20 +1,42 @@ -import "./App.css"; -import Nav from "./components/Nav"; -import { Outlet, useLoaderData } from "react-router-dom"; +import { useState } from 'react' +import './App.css' function App() { return ( <> -
-
- {/* {% load version %} */} - {/* {% version %} ({% version_date %}) */} - - ); +
+ + {/* {% block content %}No content here.{% endblock content %} */} +
+ {/* {% load version %} */} + {/* {% version %} ({% version_date %}) */} + + ) } export default App; diff --git a/frontend/src/index.css b/frontend/src/index.css index e8a7e7d..a37820a 100644 --- a/frontend/src/index.css +++ b/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, -select:disabled, -textarea:disabled { - @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; - } +#session-table { + display: grid; + grid-template-columns: 3fr 1fr repeat(2, 2fr) 0.5fr 1fr; } #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; -} diff --git a/frontend/vite.config.js b/frontend/vite.config.js index d680395..f473338 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -6,10 +6,7 @@ export default defineConfig({ plugins: [react()], server: { proxy: { - '/api': { - target: 'http://127.0.0.1:8000', - changeOrigin: true - } - } - } + "/api": "http://127.0.0.1:8001", + }, + }, });