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>
<header>
<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>
{{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}}
<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>
</nav>
{{if not .EditMode}}
<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);
border-bottom: var(--border-dashed);
display: grid;
grid-template-columns: 1fr minmax(0, auto) 1fr;
grid-template-columns: 1fr minmax(0, 60rem) 1fr;
grid-template-areas: "crumbs search actions";
align-items: center;
gap: var(--space-2);
@@ -131,13 +131,6 @@ footer {
.breadcrumb { grid-area: crumbs; gap: var(--space-1); min-width: 0; }
.header-actions { grid-area: actions; justify-content: flex-end; flex-wrap: wrap; }
.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 ===
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);
position: relative;
justify-self: center;
width: 24rem;
max-width: 100%;
width: 100%;
max-width: 40rem;
}
.search-input { font-size: 0.9rem; }
.search-card {
@@ -516,12 +509,23 @@ button.fab { display: none; }
flex-direction: column;
gap: var(--space-4);
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; }
/* Density modifier for panels in the sidebar (smaller font, tighter padding).
The .panel class applied alongside provides the border + background. */
.panel-sidebar { padding: var(--space-2) var(--space-3); font-size: var(--font-sm); }
Drops the .panel outline so the rail reads as a clean column separated from
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; }
/* === Table of contents (floating variant) ===
@@ -725,8 +729,8 @@ aside.tree-sidebar:empty { display: none; }
/* === Responsive === */
@media (max-width: 1100px) {
.page-wrap { grid-template-columns: 1fr; }
/* Single-row mobile header: logo + Up icon are compact so search can
take the middle flex column, with actions on the right. */
/* Single-row mobile header: the compact logo sits left so search can take
the middle flex column, with actions on the right. */
header { grid-template-columns: auto 1fr auto; }
/* 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
@@ -735,7 +739,9 @@ aside.tree-sidebar:empty { display: none; }
body.edit-mode header { position: sticky; top: 0; }
.search-form { width: 100%; max-width: none; justify-self: stretch; }
/* 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 {
position: fixed;
bottom: 5rem;
@@ -748,6 +754,9 @@ aside.tree-sidebar:empty { display: none; }
overflow-y: auto;
display: none;
z-index: 60;
padding: var(--space-2);
border: var(--border);
background: var(--bg);
}
.sidebar.is-open { display: flex; }
button.fab { display: inline-flex; }
@@ -782,6 +791,7 @@ aside.tree-sidebar:empty { display: none; }
@media (max-width: 600px) {
header, footer { padding: var(--space-2) var(--space-3); }
main { padding: var(--space-4) var(--space-3); }
.app-name {display: none;}
.editor-cm { min-height: 50vh; }
.sidebar { width: calc(100% - 1.5rem); }
/* Editing on mobile is full-bleed: drop the page/main inset so the toolbar