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

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
cmd/verstak-gui/frontend-dist/assets/index-C37GEF9W.js
View File

File diff suppressed because one or more lines are too long

1
cmd/verstak-gui/frontend-dist/assets/index-D3NJ53hP.css
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}

36
cmd/verstak-gui/frontend-dist/index.html
View File

@ -1,15 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/wails.png" /> <link rel="icon" type="image/svg+xml" href="/wails.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" /> <title>Верстак</title>
<title>Wails + Svelte</title> <style>
<script type="module" crossorigin src="/assets/index-C37GEF9W.js"></script> /* Critical reset — no white borders, full viewport */
<link rel="stylesheet" crossorigin href="/assets/index-D3NJ53hP.css"> html, body, #app {
</head> width: 100%;
<body> height: 100%;
<div id="app"></div> margin: 0;
</body> 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> </html>

34
frontend/index.html
View File

@ -1,14 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="ru">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/wails.png" /> <link rel="icon" type="image/svg+xml" href="/wails.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" /> <title>Верстак</title>
<title>Wails + Svelte</title> <style>
</head> /* Critical reset — no white borders, full viewport */
<body> html, body, #app {
<div id="app"></div> width: 100%;
<script type="module" src="/src/main.js"></script> height: 100%;
</body> margin: 0;
padding: 0;
overflow: hidden;
background: #13131f;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html> </html>

348
frontend/src/App.svelte
View File

@ -8,19 +8,9 @@
let selectedSection = '' let selectedSection = ''
let selectedNode = null let selectedNode = null
// Wails v2 bindings — generated by wails
// For now, use window.wails or import from wailsjs
async function callGo(method, ...args) {
if (window.go && window.go.main && window.go.main.App) {
return window.go.main.App[method](...args)
}
throw new Error('Wails bindings not loaded')
}
onMount(async () => { onMount(async () => {
try { try {
version = 'verstak-gui' version = 'verstak-gui'
// Try Wails bindings
if (window.go && window.go.main && window.go.main.App) { if (window.go && window.go.main && window.go.main.App) {
version = await window.go.main.App.VerstakVersion() version = await window.go.main.App.VerstakVersion()
sections = await window.go.main.App.ListSections() sections = await window.go.main.App.ListSections()
@ -33,7 +23,6 @@
function selectSection(id) { function selectSection(id) {
selectedSection = id selectedSection = id
// TODO: load nodes for section
} }
function selectNode(node) { function selectNode(node) {
@ -42,88 +31,295 @@
</script> </script>
<div class="app"> <div class="app">
<!-- Top bar --> <!-- Sidebar -->
<div class="topbar"> <aside class="sidebar">
<span class="logo">&#9874;</span> <div class="sidebar-top">
<h1>Верстак</h1> <span class="logo">&#9874;</span>
<span class="version">{version}</span> <span class="app-name">Верстак</span>
</div>
<!-- Error banner -->
{#if error}
<div class="error-banner">
Error: {error}
</div>
{/if}
<!-- Main content -->
<div class="main">
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">Разделы</div>
{#each sections as section}
<div class="sidebar-item {selectedSection === section.id ? 'selected' : ''}"
on:click={() => selectSection(section.id)}>
{section.label}
</div>
{/each}
<div class="sidebar-header" style="margin-top:16px">Корневые дела</div>
{#each nodes as node}
<div class="sidebar-item {selectedNode && selectedNode.id === node.id ? 'selected' : ''}"
on:click={() => selectNode(node)}>
{node.title}
</div>
{/each}
{#if nodes.length === 0 && sections.length > 0}
<div class="sidebar-empty">Нет дел. Создайте первое дело.</div>
{/if}
</div> </div>
<!-- Content panel --> <nav class="sidebar-nav">
<div class="nav-group">
<div class="nav-label">Разделы</div>
{#each sections as section}
<button class="nav-item {selectedSection === section.id ? 'selected' : ''}"
on:click={() => selectSection(section.id)}>
{section.label}
</button>
{/each}
</div>
<div class="nav-group">
<div class="nav-label">Корневые дела</div>
{#each nodes as node}
<button class="nav-item {selectedNode && selectedNode.id === node.id ? 'selected' : ''}"
on:click={() => selectNode(node)}>
{node.title}
</button>
{/each}
{#if nodes.length === 0 && sections.length > 0}
<div class="nav-empty">Нет дел</div>
{/if}
</div>
</nav>
<div class="sidebar-bottom">
<span class="version">{version}</span>
</div>
</aside>
<!-- Main area -->
<main class="main">
<!-- Header -->
<header class="header">
<div class="header-left">
{#if selectedNode}
<span class="crumb">{selectedNode.title}</span>
{:else if selectedSection}
<span class="crumb">{#each sections as section}{section.id === selectedSection ? section.label : ''}{/each}</span>
{:else}
<span class="crumb placeholder">Выберите раздел или дело</span>
{/if}
</div>
<div class="header-right">
<!-- Search placeholder -->
<div class="search-hint">Поиск...</div>
</div>
</header>
<!-- Error banner -->
{#if error}
<div class="error-banner">
Wails bindings: {error}
</div>
{/if}
<!-- Content -->
<div class="content"> <div class="content">
{#if selectedNode} {#if selectedNode}
<div class="node-view"> <div class="node-view">
<h2>{selectedNode.title}</h2> <h2>{selectedNode.title}</h2>
<p>ID: {selectedNode.id}</p> <div class="node-meta">
<p>Type: {selectedNode.type}</p> <span>ID: {selectedNode.id}</span>
<span>Type: {selectedNode.type}</span>
</div>
</div> </div>
{:else if sections.length > 0} {:else if sections.length > 0}
<div class="welcome"> <div class="welcome">
<p>Wails v2 Desktop GUI работает.</p> <h2>Верстак</h2>
<p>Sections: {sections.length}, Root nodes: {nodes.length}</p> <p>Разделы: {sections.length} · Дел: {nodes.length}</p>
{#if error} {#if error}
<p class="error-text">Wails bindings error: {error}</p> <p class="error-text">Go bindings не подключены: {error}</p>
<p class="hint">Window opens but Go bindings not connected yet.</p>
{/if} {/if}
</div> </div>
{:else} {:else}
<div class="loading">Загрузка...</div> <div class="loading">Загрузка...</div>
{/if} {/if}
</div> </div>
</div> </main>
</div> </div>
<style> <style>
* { box-sizing: border-box; margin: 0; padding: 0; } /* Reset */
.app { display: flex; flex-direction: column; height: 100vh; background: #13131f; color: #e4e4ef; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } *, *::before, *::after {
.topbar { padding: 12px 20px; border-bottom: 1px solid #2a2a3c; display: flex; align-items: center; gap: 12px; } box-sizing: border-box;
.logo { font-size: 20px; } margin: 0;
.topbar h1 { font-size: 18px; font-weight: 600; } padding: 0;
.version { color: #666; font-size: 12px; margin-left: auto; } }
.error-banner { background: #442222; color: #ff8888; padding: 8px 20px; font-size: 13px; }
.main { display: flex; flex: 1; overflow: hidden; } /* App shell — full viewport */
.sidebar { width: 240px; border-right: 1px solid #2a2a3c; padding: 12px; overflow-y: auto; flex-shrink: 0; } .app {
.sidebar-header { font-size: 11px; text-transform: uppercase; color: #666; margin-bottom: 8px; padding: 0 12px; } display: flex;
.sidebar-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; color: #ccc; } width: 100vw;
.sidebar-item:hover { background: #1e1e2e; } height: 100vh;
.sidebar-item.selected { background: #2a2a3c; color: #fff; } overflow: hidden;
.sidebar-empty { color: #666; font-size: 12px; padding: 8px 12px; } background: #13131f;
.content { flex: 1; padding: 20px; overflow-y: auto; } color: #e4e4ef;
.welcome { color: #8888a4; font-size: 14px; line-height: 1.6; } font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
.error-text { color: #ff8888; } font-size: 14px;
.hint { color: #666; margin-top: 8px; } }
.loading { color: #888; font-size: 14px; }
.node-view h2 { font-size: 24px; margin-bottom: 16px; } /* ===== SIDEBAR ===== */
.node-view p { color: #888; font-size: 13px; margin-bottom: 8px; } .sidebar {
width: 260px;
min-width: 200px;
height: 100vh;
display: flex;
flex-direction: column;
background: #1a1a28;
border-right: 1px solid #2a2a3c;
flex-shrink: 0;
overflow: hidden;
}
.sidebar-top {
padding: 16px 20px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid #2a2a3c;
flex-shrink: 0;
}
.logo {
font-size: 20px;
line-height: 1;
}
.app-name {
font-size: 16px;
font-weight: 600;
color: #e4e4ef;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
padding: 12px 0;
}
.nav-group {
margin-bottom: 16px;
}
.nav-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #666;
padding: 4px 20px;
margin-bottom: 4px;
}
.nav-item {
display: block;
width: 100%;
padding: 8px 20px;
border: none;
background: none;
color: #ccc;
font-size: 13px;
text-align: left;
cursor: pointer;
border-radius: 0;
font-family: inherit;
}
.nav-item:hover {
background: #222233;
}
.nav-item.selected {
background: #2a2a4a;
color: #fff;
font-weight: 500;
}
.nav-empty {
padding: 8px 20px;
color: #555;
font-size: 12px;
}
.sidebar-bottom {
padding: 12px 20px;
border-top: 1px solid #2a2a3c;
flex-shrink: 0;
}
.version {
font-size: 11px;
color: #555;
}
/* ===== MAIN AREA ===== */
.main {
flex: 1;
display: flex;
flex-direction: column;
height: 100vh;
min-width: 0;
overflow: hidden;
background: #13131f;
}
.header {
padding: 12px 24px;
border-bottom: 1px solid #2a2a3c;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
min-height: 48px;
}
.crumb {
font-size: 14px;
font-weight: 500;
color: #e4e4ef;
}
.crumb.placeholder {
color: #666;
}
.search-hint {
padding: 6px 12px;
background: #1e1e2e;
border: 1px solid #2a2a3c;
border-radius: 4px;
color: #666;
font-size: 12px;
cursor: text;
}
.error-banner {
background: #3a2222;
color: #ff8888;
padding: 8px 24px;
font-size: 12px;
border-bottom: 1px solid #4a2222;
flex-shrink: 0;
}
/* ===== CONTENT ===== */
.content {
flex: 1;
overflow-y: auto;
padding: 24px;
}
.welcome h2 {
font-size: 28px;
font-weight: 300;
margin-bottom: 12px;
color: #8888a4;
}
.welcome p {
color: #666;
font-size: 13px;
margin-bottom: 4px;
}
.error-text {
color: #ff8888;
margin-top: 12px;
}
.loading {
color: #666;
}
.node-view h2 {
font-size: 24px;
margin-bottom: 16px;
}
.node-meta {
display: flex;
gap: 16px;
color: #666;
font-size: 12px;
}
</style> </style>