Integrate TailwindCSS
This commit is contained in:
parent
89f6959fc1
commit
76b09fea39
6
Makefile
6
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
|
||||
|
||||
|
|
|
@ -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": {
|
||||
|
|
|
@ -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 (
|
||||
<>
|
||||
<div className="dark:bg-gray-800 min-h-screen">
|
||||
<Nav />
|
||||
<Outlet />
|
||||
</div>
|
||||
{/* {% load version %} */}
|
||||
{/* <span className="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span> */}
|
||||
</>
|
||||
);
|
||||
<div className="dark:bg-gray-800 min-h-screen">
|
||||
<nav className="mb-4 bg-white dark:bg-gray-900 border-gray-200 rounded">
|
||||
<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>
|
||||
{/* {% 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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue