luxick/datascape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust app layout

Browse Source
This commit is contained in:
luxick
2026-06-16 15:24:21 +02:00
parent 9ed6475775
commit db17f94627
5 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/layout.html
+1 -2
View File
@@ -19,8 +19,7 @@
<body> <body>
<header> <header>
<nav class="breadcrumb row"> <nav class="breadcrumb row">
<a href="/" tabindex="-1" title="Home"><svg class="logo" viewBox="0 0 26.052269 26.052269" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linejoin="miter" transform="matrix(0.05463483,8.1519706e-6,-8.1519706e-6,0.05463483,-64.560546,-24.6949)"><rect x="1188.537" y="457.92056" width="461.87488" height="462.15189" stroke-width="20.2288"/><path d="m1348.9955 456.59572.046 309.36839" stroke-width="19.6849"/><path d="m1200.3996 765.80237 441.8362-.0659" stroke-width="19.6849"/><path d="m1648.2897 620.244-299.2012.0446" stroke-width="20.5676"/><path d="m1491.6148 909.24806-.021-136.93117" stroke-width="19.6849"/><rect x="1191.6504" y="461.66092" width="457.09634" height="457.09634" stroke-width="19.6761"/></g></svg></a> <a href="/" tabindex="-1" title="Home"><svg class="logo" viewBox="0 0 26.052269 26.052269" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linejoin="miter" transform="matrix(0.05463483,8.1519706e-6,-8.1519706e-6,0.05463483,-64.560546,-24.6949)"><rect x="1188.537" y="457.92056" width="461.87488" height="462.15189" stroke-width="20.2288"/><path d="m1348.9955 456.59572.046 309.36839" stroke-width="19.6849"/><path d="m1200.3996 765.80237 441.8362-.0659" stroke-width="19.6849"/><path d="m1648.2897 620.244-299.2012.0446" stroke-width="20.5676"/><path d="m1491.6148 909.24806-.021-136.93117" stroke-width="19.6849"/><rect x="1191.6504" y="461.66092" width="457.09634" height="457.09634" stroke-width="19.6761"/></g></svg><span class="app-name"> datascape</span></a>
{{if .ParentURL}}<a class="nav-up" href="{{.ParentURL}}" tabindex="-1" title="Up" aria-label="Up">Up <svg viewBox="0 0 16 16" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="miter" stroke-linecap="square"><path d="M8 13V3M3 8l5-5 5 5"/></svg></a>{{end}}
</nav> </nav>
{{if not .EditMode}} {{if not .EditMode}}
<form class="search-form" action="/" method="get"> <form class="search-form" action="/" method="get">
assets/style.css
+25 -15
View File
@@ -115,7 +115,7 @@ header {
padding: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4);
border-bottom: var(--border-dashed); border-bottom: var(--border-dashed);
display: grid; display: grid;
grid-template-columns: 1fr minmax(0, auto) 1fr; grid-template-columns: 1fr minmax(0, 60rem) 1fr;
grid-template-areas: "crumbs search actions"; grid-template-areas: "crumbs search actions";
align-items: center; align-items: center;
gap: var(--space-2); gap: var(--space-2);
@@ -131,13 +131,6 @@ footer {
.breadcrumb { grid-area: crumbs; gap: var(--space-1); min-width: 0; } .breadcrumb { grid-area: crumbs; gap: var(--space-1); min-width: 0; }
.header-actions { grid-area: actions; justify-content: flex-end; flex-wrap: wrap; } .header-actions { grid-area: actions; justify-content: flex-end; flex-wrap: wrap; }
.logo { width: 1.1em; height: 1.1em; vertical-align: center; } .logo { width: 1.1em; height: 1.1em; vertical-align: center; }
.nav-up {
display: inline-flex;
align-items: center;
color: var(--secondary);
padding: 0 var(--space-1);
}
.nav-up:hover { color: var(--primary-hover); }
/* === Panel === /* === Panel ===
Bordered container recipe shared by listings, sidebar widgets, the tree Bordered container recipe shared by listings, sidebar widgets, the tree
@@ -409,8 +402,8 @@ body.edit-mode .page-wrap { grid-template-columns: minmax(0, 1fr); max-width: no
gap: var(--space-1); gap: var(--space-1);
position: relative; position: relative;
justify-self: center; justify-self: center;
width: 24rem; width: 100%;
max-width: 100%; max-width: 40rem;
} }
.search-input { font-size: 0.9rem; } .search-input { font-size: 0.9rem; }
.search-card { .search-card {
@@ -516,12 +509,23 @@ button.fab { display: none; }
flex-direction: column; flex-direction: column;
gap: var(--space-4); gap: var(--space-4);
padding-top: 1rem; padding-top: 1rem;
/* Mirror the left tree rail: a dashed separator to main, no panel outlines
on the widgets within (see .panel-sidebar). */
padding-left: var(--space-2);
border-left: var(--border-dashed);
} }
aside.sidebar:empty { display: none; } aside.sidebar:empty { display: none; }
/* Density modifier for panels in the sidebar (smaller font, tighter padding). /* Density modifier for panels in the sidebar (smaller font, tighter padding).
The .panel class applied alongside provides the border + background. */ Drops the .panel outline so the rail reads as a clean column separated from
.panel-sidebar { padding: var(--space-2) var(--space-3); font-size: var(--font-sm); } main by the .sidebar dashed border, matching the left tree rail. The mobile
drawer re-adds a full border + bg (see responsive block) so it stays legible
floating over content. */
.panel-sidebar {
padding: var(--space-2) var(--space-3);
font-size: var(--font-sm);
border: none;
}
.actions { display: flex; flex-direction: column; gap: 0.15rem; } .actions { display: flex; flex-direction: column; gap: 0.15rem; }
/* === Table of contents (floating variant) === /* === Table of contents (floating variant) ===
@@ -725,8 +729,8 @@ aside.tree-sidebar:empty { display: none; }
/* === Responsive === */ /* === Responsive === */
@media (max-width: 1100px) { @media (max-width: 1100px) {
.page-wrap { grid-template-columns: 1fr; } .page-wrap { grid-template-columns: 1fr; }
/* Single-row mobile header: logo + Up icon are compact so search can /* Single-row mobile header: the compact logo sits left so search can take
take the middle flex column, with actions on the right. */ the middle flex column, with actions on the right. */
header { grid-template-columns: auto 1fr auto; } header { grid-template-columns: auto 1fr auto; }
/* Mobile view mode: header scrolls away with the page (out of scope to /* Mobile view mode: header scrolls away with the page (out of scope to
stick it). It re-sticks only in edit mode so SAVE/CANCEL stay reachable stick it). It re-sticks only in edit mode so SAVE/CANCEL stay reachable
@@ -735,7 +739,9 @@ aside.tree-sidebar:empty { display: none; }
body.edit-mode header { position: sticky; top: 0; } body.edit-mode header { position: sticky; top: 0; }
.search-form { width: 100%; max-width: none; justify-self: stretch; } .search-form { width: 100%; max-width: none; justify-self: stretch; }
/* Sidebar on mobile is a floating overlay toggled by the FAB. The aside /* Sidebar on mobile is a floating overlay toggled by the FAB. The aside
itself is the scroll container; children render at natural height. */ itself is the scroll container; children render at natural height. The
full border + bg replace the per-panel outlines dropped on desktop so the
drawer stays legible floating over content. */
.sidebar { .sidebar {
position: fixed; position: fixed;
bottom: 5rem; bottom: 5rem;
@@ -748,6 +754,9 @@ aside.tree-sidebar:empty { display: none; }
overflow-y: auto; overflow-y: auto;
display: none; display: none;
z-index: 60; z-index: 60;
padding: var(--space-2);
border: var(--border);
background: var(--bg);
} }
.sidebar.is-open { display: flex; } .sidebar.is-open { display: flex; }
button.fab { display: inline-flex; } button.fab { display: inline-flex; }
@@ -782,6 +791,7 @@ aside.tree-sidebar:empty { display: none; }
@media (max-width: 600px) { @media (max-width: 600px) {
header, footer { padding: var(--space-2) var(--space-3); } header, footer { padding: var(--space-2) var(--space-3); }
main { padding: var(--space-4) var(--space-3); } main { padding: var(--space-4) var(--space-3); }
.app-name {display: none;}
.editor-cm { min-height: 50vh; } .editor-cm { min-height: 50vh; }
.sidebar { width: calc(100% - 1.5rem); } .sidebar { width: calc(100% - 1.5rem); }
/* Editing on mobile is full-bleed: drop the page/main inset so the toolbar /* Editing on mobile is full-bleed: drop the page/main inset so the toolbar
main.go
-5
View File
@@ -318,13 +318,8 @@ func (h *handler) serveDir(w http.ResponseWriter, r *http.Request, urlPath, fsPa
rawContent = "# " + pageTitle(urlPath) + "\n\n" rawContent = "# " + pageTitle(urlPath) + "\n\n"
} }
parent := ""
if urlPath != "/" {
parent = parentURL(urlPath)
}
data := pageData{ data := pageData{
Title: title, Title: title,
ParentURL: parent,
CanEdit: true, CanEdit: true,
EditMode: editMode, EditMode: editMode,
IsRoot: urlPath == "/", IsRoot: urlPath == "/",
render.go
-1
View File
@@ -44,7 +44,6 @@ type entry struct {
type pageData struct { type pageData struct {
Title string Title string
ParentURL string
CanEdit bool CanEdit bool
EditMode bool EditMode bool
IsRoot bool IsRoot bool
search.go
-2
View File
@@ -22,7 +22,6 @@ type searchResult struct {
type searchPageData struct { type searchPageData struct {
Title string Title string
ParentURL string
EditMode bool EditMode bool
Query string Query string
Results []searchResult Results []searchResult
@@ -66,7 +65,6 @@ func (h *handler) handleSearch(w http.ResponseWriter, r *http.Request) {
} }
data := searchPageData{ data := searchPageData{
Title: title, Title: title,
ParentURL: "/",
Query: query, Query: query,
Results: results, Results: results,
IndexBuiltAt: builtAt, IndexBuiltAt: builtAt,