mirivlad/verstak
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gui: fix layout — full viewport, dark theme, sidebar+main

Browse Source 
Problem: UI appeared as narrow dark panel on white background with scrollbar.

Root causes:
- html/body had no reset — default browser margin/padding = white borders
- index.html referenced non-existent /style.css
- .app used height:100vh but no width:100vw or overflow:hidden
- sidebar used fixed width instead of flexbox

Fixed:
- index.html: added critical CSS reset (html/body/#app = 100%, margin:0, overflow:hidden, dark bg)
- index.html: removed /style.css ref, changed lang to ru, title to Верстак
- App.svelte: complete layout rewrite
  - .app = flex, 100vw x 100vh, overflow:hidden
  - sidebar = 260px width, full height, flex column
  - main = flex:1, full height, flex column (header + content)
  - sidebar nav with sections + nodes using <button> elements
  - content area fills remaining space
  - proper dark theme colors throughout
- Rebuilt frontend/dist and cmd/verstak-gui/frontend-dist
This commit is contained in:
mirivlad
2026-05-31 19:54:07 +08:00
parent 3e07e611dd
commit ee503c338f
5 changed files with 317 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/verstak-gui/frontend-dist/assets/index-C37GEF9W.js
-1
View File
File diff suppressed because one or more lines are too long
cmd/verstak-gui/frontend-dist/assets/index-D3NJ53hP.css
-1
View File
@@ -1 +0,0 @@
.svelte-10a60fp.svelte-10a60fp{box-sizing:border-box;margin:0;padding:0}.app.svelte-10a60fp.svelte-10a60fp{display:flex;flex-direction:column;height:100vh;background:#13131f;color:#e4e4ef;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.topbar.svelte-10a60fp.svelte-10a60fp{padding:12px 20px;border-bottom:1px solid #2a2a3c;display:flex;align-items:center;gap:12px}.logo.svelte-10a60fp.svelte-10a60fp{font-size:20px}.topbar.svelte-10a60fp h1.svelte-10a60fp{font-size:18px;font-weight:600}.version.svelte-10a60fp.svelte-10a60fp{color:#666;font-size:12px;margin-left:auto}.error-banner.svelte-10a60fp.svelte-10a60fp{background:#422;color:#f88;padding:8px 20px;font-size:13px}.main.svelte-10a60fp.svelte-10a60fp{display:flex;flex:1;overflow:hidden}.sidebar.svelte-10a60fp.svelte-10a60fp{width:240px;border-right:1px solid #2a2a3c;padding:12px;overflow-y:auto;flex-shrink:0}.sidebar-header.svelte-10a60fp.svelte-10a60fp{font-size:11px;text-transform:uppercase;color:#666;margin-bottom:8px;padding:0 12px}.sidebar-item.svelte-10a60fp.svelte-10a60fp{padding:8px 12px;border-radius:6px;cursor:pointer;margin-bottom:2px;color:#ccc}.sidebar-item.svelte-10a60fp.svelte-10a60fp:hover{background:#1e1e2e}.sidebar-item.selected.svelte-10a60fp.svelte-10a60fp{background:#2a2a3c;color:#fff}.sidebar-empty.svelte-10a60fp.svelte-10a60fp{color:#666;font-size:12px;padding:8px 12px}.content.svelte-10a60fp.svelte-10a60fp{flex:1;padding:20px;overflow-y:auto}.welcome.svelte-10a60fp.svelte-10a60fp{color:#8888a4;font-size:14px;line-height:1.6}.error-text.svelte-10a60fp.svelte-10a60fp{color:#f88}.hint.svelte-10a60fp.svelte-10a60fp{color:#666;margin-top:8px}.loading.svelte-10a60fp.svelte-10a60fp{color:#888;font-size:14px}.node-view.svelte-10a60fp h2.svelte-10a60fp{font-size:24px;margin-bottom:16px}.node-view.svelte-10a60fp p.svelte-10a60fp{color:#888;font-size:13px;margin-bottom:8px}
cmd/verstak-gui/frontend-dist/index.html
+23 -13
View File
@@ -1,15 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/wails.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<title>Wails + Svelte</title>
<script type="module" crossorigin src="/assets/index-C37GEF9W.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D3NJ53hP.css">
</head>
<body>
<div id="app"></div>
</body>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/wails.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Верстак</title>
<style>
/* Critical reset — no white borders, full viewport */
html, body, #app {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #13131f;
}
</style>
<script type="module" crossorigin src="/assets/index-COs6tJEl.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-ClxkTvdE.css">
</head>
<body>
<div id="app"></div>
</body>
</html>