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:
parent
3e07e611dd
commit
ee503c338f
File diff suppressed because one or more lines are too long
|
|
@ -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}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,24 @@
|
|||
<!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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -8,19 +8,9 @@
|
|||
let selectedSection = ''
|
||||
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 () => {
|
||||
try {
|
||||
version = 'verstak-gui'
|
||||
// Try Wails bindings
|
||||
if (window.go && window.go.main && window.go.main.App) {
|
||||
version = await window.go.main.App.VerstakVersion()
|
||||
sections = await window.go.main.App.ListSections()
|
||||
|
|
@ -33,7 +23,6 @@
|
|||
|
||||
function selectSection(id) {
|
||||
selectedSection = id
|
||||
// TODO: load nodes for section
|
||||
}
|
||||
|
||||
function selectNode(node) {
|
||||
|
|
@ -42,88 +31,295 @@
|
|||
</script>
|
||||
|
||||
<div class="app">
|
||||
<!-- Top bar -->
|
||||
<div class="topbar">
|
||||
<span class="logo">⚒</span>
|
||||
<h1>Верстак</h1>
|
||||
<span class="version">{version}</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}
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-top">
|
||||
<span class="logo">⚒</span>
|
||||
<span class="app-name">Верстак</span>
|
||||
</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">
|
||||
{#if selectedNode}
|
||||
<div class="node-view">
|
||||
<h2>{selectedNode.title}</h2>
|
||||
<p>ID: {selectedNode.id}</p>
|
||||
<p>Type: {selectedNode.type}</p>
|
||||
<div class="node-meta">
|
||||
<span>ID: {selectedNode.id}</span>
|
||||
<span>Type: {selectedNode.type}</span>
|
||||
</div>
|
||||
</div>
|
||||
{:else if sections.length > 0}
|
||||
<div class="welcome">
|
||||
<p>Wails v2 Desktop GUI работает.</p>
|
||||
<p>Sections: {sections.length}, Root nodes: {nodes.length}</p>
|
||||
<h2>Верстак</h2>
|
||||
<p>Разделы: {sections.length} · Дел: {nodes.length}</p>
|
||||
{#if error}
|
||||
<p class="error-text">Wails bindings error: {error}</p>
|
||||
<p class="hint">Window opens but Go bindings not connected yet.</p>
|
||||
<p class="error-text">Go bindings не подключены: {error}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="loading">Загрузка...</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
.app { display: flex; flex-direction: column; height: 100vh; background: #13131f; color: #e4e4ef; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
|
||||
.topbar { padding: 12px 20px; border-bottom: 1px solid #2a2a3c; display: flex; align-items: center; gap: 12px; }
|
||||
.logo { font-size: 20px; }
|
||||
.topbar h1 { font-size: 18px; font-weight: 600; }
|
||||
.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; }
|
||||
.sidebar { width: 240px; border-right: 1px solid #2a2a3c; padding: 12px; overflow-y: auto; flex-shrink: 0; }
|
||||
.sidebar-header { font-size: 11px; text-transform: uppercase; color: #666; margin-bottom: 8px; padding: 0 12px; }
|
||||
.sidebar-item { padding: 8px 12px; border-radius: 6px; cursor: pointer; margin-bottom: 2px; color: #ccc; }
|
||||
.sidebar-item:hover { background: #1e1e2e; }
|
||||
.sidebar-item.selected { background: #2a2a3c; color: #fff; }
|
||||
.sidebar-empty { color: #666; font-size: 12px; padding: 8px 12px; }
|
||||
.content { flex: 1; padding: 20px; overflow-y: auto; }
|
||||
.welcome { color: #8888a4; font-size: 14px; line-height: 1.6; }
|
||||
.error-text { color: #ff8888; }
|
||||
.hint { color: #666; margin-top: 8px; }
|
||||
.loading { color: #888; font-size: 14px; }
|
||||
.node-view h2 { font-size: 24px; margin-bottom: 16px; }
|
||||
.node-view p { color: #888; font-size: 13px; margin-bottom: 8px; }
|
||||
/* Reset */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* App shell — full viewport */
|
||||
.app {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #13131f;
|
||||
color: #e4e4ef;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ===== SIDEBAR ===== */
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue