Perma dark mode and fixing inconsistent styles.

This commit is contained in:
iamBadgers
2026-03-28 17:52:59 -07:00
parent 20398be7c4
commit 2ee43ac090
7 changed files with 152 additions and 352 deletions

View File

@@ -29,7 +29,7 @@
FROM node:lts-alpine FROM node:lts-alpine
# install simple http server for serving static content # install simple http server for serving static content
RUN npm install -g http-server RUN npm install -g http-server@latest
# make the 'app' folder the current working directory # make the 'app' folder the current working directory
WORKDIR /app WORKDIR /app

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="" class="darkmode">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
@@ -7,7 +7,7 @@
<title>Foundry Manager</title> <title>Foundry Manager</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app" class="darkmode"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

460
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -16,10 +16,9 @@
}, },
"dependencies": { "dependencies": {
"@primeuix/themes": "^2.0.3", "@primeuix/themes": "^2.0.3",
"@tailwindcss/vite": "^4.2.2",
"axios": "^1.13.6", "axios": "^1.13.6",
"primeflex": "^4.0.0",
"primevue": "^4.5.4", "primevue": "^4.5.4",
"tailwindcss-primeui": "^0.6.1",
"vue": "^3.5.29" "vue": "^3.5.29"
}, },
"devDependencies": { "devDependencies": {
@@ -38,7 +37,6 @@
"oxlint": "~1.50.0", "oxlint": "~1.50.0",
"postcss": "^8.5.8", "postcss": "^8.5.8",
"prettier": "3.8.1", "prettier": "3.8.1",
"tailwindcss": "^4.2.2",
"typescript": "~5.9.3", "typescript": "~5.9.3",
"vite": "^7.3.1", "vite": "^7.3.1",
"vite-plugin-vue-devtools": "^8.0.6", "vite-plugin-vue-devtools": "^8.0.6",

View File

@@ -37,10 +37,8 @@ function stopTable(tableId: number) {
</script> </script>
<style>
@import "tailwindcss";
@import "tailwindcss-primeui";
<style>
.ActiveTables { .ActiveTables {
margin: 20px; margin: 20px;
@@ -51,18 +49,21 @@ function stopTable(tableId: number) {
.ATTables { .ATTables {
padding-left: 50px; padding-left: 50px;
} }
.button-box {
padding: 10px;
}
} }
</style> </style>
<template> <template>
<Card class="ActiveTables"> <Card class="ActiveTables">
<template #header> <template #title>
<h2>Active Tables</h2> <h2>Active Tables</h2>
</template> </template>
<template #content> <template #content>
<DataTable class="ATTables" style="" :exportable="false" :value="activeTables"> <DataTable :exportable="false" :value="activeTables">
<Column field="table_name" header="Table Name" /> <Column field="table_name" header="Table Name" />
<Column field="table_link" header="Table Link"> <Column field="table_link" header="Table Link">
<template #body="slotProps"> <template #body="slotProps">
@@ -79,7 +80,7 @@ function stopTable(tableId: number) {
</Card> </Card>
<Card class="ActiveTables"> <Card class="ActiveTables">
<template #header> <template #title>
<h2>All Tables</h2> <h2>All Tables</h2>
</template> </template>
@@ -93,10 +94,9 @@ function stopTable(tableId: number) {
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
<div class="flex justify-end"> <div class="button-box flex justify-content-end">
<Button label="New Table"/> <Button label="New Table"/>
</div> </div>
</template> </template>
</Card> </Card>
</template> </template>

View File

@@ -2,8 +2,16 @@ import { createApp } from 'vue'
import PrimeVue from 'primevue/config'; import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura' import Aura from '@primeuix/themes/aura'
import App from './App.vue' import App from './App.vue'
import 'primeflex/primeflex.css'
const app = createApp(App) const app = createApp(App)
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
darkModeSelector: ".darkmode",
cssLayer: false
}
}
})
app.mount('#app') app.mount('#app')
app.use(PrimeVue, { theme: { preset: Aura } })

View File

@@ -3,14 +3,14 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools' import vueDevTools from 'vite-plugin-vue-devtools'
import tailwindcss from '@tailwindcss/vite' // import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
vueDevTools(), vueDevTools(),
tailwindcss(), // tailwindcss(),
], ],
resolve: { resolve: {
alias: { alias: {