phc/storage
6
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Commit intermedio

Browse Source
This commit is contained in:
aziis98
2022-07-01 15:49:25 +02:00
parent fc8bb1c482
commit 658a40c8bb
3 changed files with 116 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_frontend/index.html
+41 -2
View File
@@ -14,7 +14,46 @@
<link rel="stylesheet" href="/styles/main.scss">
</head>
<body>
<main></main>
<script type="module" src="/src/home.jsx"></script>
<main>
<div class="sidebar">
<div class="logo">Storage</div>
<div class="items">
<div class="item">
<div class="label">
Dashboard
</div>
</div>
<div class="item">
<div class="label">
Buckets
</div>
<div class="children">
<div class="item">
<div class="label">Bucket 1</div>
</div>
<div class="item">
<div class="label">Bucket 2</div>
</div>
<div class="item">
<div class="label">Bucket 3</div>
</div>
<div class="item">
<div class="label">Bucket 4</div>
</div>
</div>
</div>
</div>
</div>
<div class="main-content">
<header>
<div class="group">
<div class="label">Dashboard</div>
</div>
<div class="group">
<div class="label">Login</div>
</div>
</header>
</div>
</main>
</body>
</html>
_frontend/server.js
+7 -2
View File
@@ -2,6 +2,7 @@ import { dirname, resolve } from 'path'
import express from 'express'
import { createServer as createViteServer } from 'vite'
import { fileURLToPath } from 'url'
import { readFileSync } from 'fs'
const __dirname = dirname(fileURLToPath(import.meta.url))
@@ -15,11 +16,15 @@ async function createServer(customHtmlRoutes) {
})
for (const [route, file] of Object.entries(customHtmlRoutes)) {
app.get(route, (req, res) => {
app.get(route, async (req, res) => {
const filePath = resolve(__dirname, file)
console.log(`Custom Route: %s`, req.url)
return res.sendFile(filePath)
let htmlFile = readFileSync(filePath, 'utf8')
htmlFile = await vite.transformIndexHtml(req.originalUrl, htmlFile)
res.setHeader('Content-Type', 'text/html')
return res.send(htmlFile)
})
}
_frontend/styles/main.scss
+68 -45
View File
@@ -9,9 +9,14 @@
--bg-500: #f0f0f0;
--bg-600: #e0e0e0;
--bg-2-400: #666;
--bg-2-500: #38383d;
--fg-400: #3d3d3d;
--fg-500: #333;
--fg-2-500: #ddd;
--ft-sans: 'Open Sans', sans-serif;
--ft-sans-wt-light: 300;
@@ -38,68 +43,86 @@ body {
main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
header {
width: 100%;
.sidebar {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0.5rem 1rem;
gap: 0.75rem;
padding: 1rem;
min-height: 100vh;
min-width: 15rem;
background: var(--bg-100);
border-bottom: 1px solid var(--bg-600);
color: var(--fg-2-500);
background: var(--bg-2-500);
color: var(--fg-400);
vertical-align: middle;
font-size: 18px;
.logo {
font-size: 32px;
font-weight: var(--ft-sans-wt-bold);
}
.machine {
font-size: 24px;
font-weight: var(--ft-sans-wt-normal);
}
z-index: -1;
}
.widgets {
display: flex;
justify-content: center;
align-items: start;
.main-content {
width: 100%;
background: var(--bg-500);
box-shadow: 0 0 2rem 0 #00000022;
flex-wrap: wrap;
gap: 2rem;
header {
width: 100%;
max-width: 120ch;
display: flex;
align-items: center;
justify-content: space-between;
.widget {
background: var(--bg-100);
border: 1px solid var(--bg-600);
padding: 1rem;
gap: 0.75rem;
min-height: 10rem;
max-width: 50ch;
background: var(--bg-100);
border-bottom: 1px solid var(--bg-600);
.title {
color: var(--fg-400);
vertical-align: middle;
.logo {
font-size: 32px;
font-weight: var(--ft-sans-wt-bold);
code {
font-weight: normal;
}
}
&.todo {
width: 300px;
height: 200px;
.machine {
font-size: 24px;
font-weight: var(--ft-sans-wt-normal);
}
}
.widgets {
display: flex;
justify-content: center;
align-items: start;
flex-wrap: wrap;
gap: 2rem;
max-width: 120ch;
.widget {
background: var(--bg-100);
border: 1px solid var(--bg-600);
padding: 1rem;
min-height: 10rem;
max-width: 50ch;
.title {
font-weight: var(--ft-sans-wt-bold);
code {
font-weight: normal;
}
}
&.todo {
width: 300px;
height: 200px;
}
}
}
}