Add vite react #45
6
Makefile
6
Makefile
|
@ -7,12 +7,6 @@ HTMLFILES := $(shell find games/templates -type f)
|
||||||
npm:
|
npm:
|
||||||
npm install
|
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:
|
makemigrations:
|
||||||
poetry run python manage.py makemigrations
|
poetry run python manage.py makemigrations
|
||||||
|
|
||||||
|
|
|
@ -10,13 +10,9 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^10.4.13",
|
"autoprefixer": "^10.4.13",
|
||||||
"eslint-config-prettier": "^8.6.0",
|
|
||||||
"eslint-plugin-prettier": "^4.2.1",
|
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
"prettier": "^2.8.3",
|
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^6.7.0",
|
|
||||||
"tailwindcss": "^3.2.4"
|
"tailwindcss": "^3.2.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import "./App.css";
|
import { useState } from 'react'
|
||||||
import Nav from "./components/Nav";
|
import './App.css'
|
||||||
import { Outlet, useLoaderData } from "react-router-dom";
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
|
||||||
|
@ -8,13 +7,36 @@ function App() {
|
||||||
return (
|
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">
|
||||||
|
<a href="{% url 'index' %}" className="flex items-center">
|
||||||
|
<span className="text-4xl">⌚</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>
|
</div>
|
||||||
{/* {% load version %} */}
|
{/* {% load version %} */}
|
||||||
{/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
|
{/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
|
||||||
</>
|
</>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
@ -2,112 +2,21 @@
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@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 {
|
form label {
|
||||||
@apply dark:text-slate-400;
|
@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,
|
form input,
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
@apply dark:border dark:border-slate-900 dark:bg-slate-500 dark:text-slate-100;
|
@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 {
|
#button-container button {
|
||||||
@apply mx-1;
|
@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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -6,10 +6,7 @@ export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
"/api": "http://127.0.0.1:8001",
|
||||||
target: 'http://127.0.0.1:8000',
|
},
|
||||||
changeOrigin: true
|
},
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue