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

Fix rendering of new rail

Browse Source
This commit is contained in:
luxick
2026-05-17 10:36:23 +02:00
parent 3e765aa54f
commit d3e896d74e
8 changed files with 58 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/companion.js
+3 -3
View File
@@ -60,7 +60,7 @@
menu.appendChild(label); menu.appendChild(label);
var link = document.createElement('a'); var link = document.createElement('a');
link.className = 'btn dropdown-item'; link.className = 'btn btn-block';
link.href = COMPANION_BASE + '/config'; link.href = COMPANION_BASE + '/config';
link.target = '_blank'; link.target = '_blank';
link.rel = 'noopener'; link.rel = 'noopener';
@@ -78,13 +78,13 @@
menu.appendChild(msg); menu.appendChild(msg);
var win = document.createElement('a'); var win = document.createElement('a');
win.className = 'btn dropdown-item'; win.className = 'btn btn-block';
win.href = '/companion/download/windows'; win.href = '/companion/download/windows';
win.textContent = 'Download — Windows'; win.textContent = 'Download — Windows';
menu.appendChild(win); menu.appendChild(win);
var lin = document.createElement('a'); var lin = document.createElement('a');
lin.className = 'btn dropdown-item'; lin.className = 'btn btn-block';
lin.href = '/companion/download/linux'; lin.href = '/companion/download/linux';
lin.textContent = 'Download — Linux'; lin.textContent = 'Download — Linux';
menu.appendChild(lin); menu.appendChild(lin);
assets/diary/calendar.html
+2 -2
View File
@@ -5,14 +5,14 @@
<div class="dropdown diary-cal-drop"> <div class="dropdown diary-cal-drop">
<button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button> <button type="button" class="btn btn-small" data-action="cal-month-drop" aria-expanded="false" title="Monat wählen">▾</button>
<div class="dropdown-menu scrollable"> <div class="dropdown-menu scrollable">
{{range .AllMonths}}<a class="btn dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}} {{range .AllMonths}}<a class="btn btn-block{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Name}}</a>{{end}}
</div> </div>
</div> </div>
<a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a> <a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
<div class="dropdown diary-cal-drop"> <div class="dropdown diary-cal-drop">
<button type="button" class="btn btn-small" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">▾</button> <button type="button" class="btn btn-small" data-action="cal-year-drop" aria-expanded="false" title="Jahr wählen">▾</button>
<div class="dropdown-menu align-right scrollable"> <div class="dropdown-menu align-right scrollable">
{{range .Years}}<a class="btn dropdown-item{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}} {{range .Years}}<a class="btn btn-block{{if .IsCurrent}} cal-current{{end}}" href="{{.URL}}">{{.Num}}</a>{{end}}
</div> </div>
</div> </div>
</div> </div>
assets/editor/main.html
+19 -19
View File
@@ -15,9 +15,9 @@
<span class="dropdown"> <span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Heading (1/2/3)">H▾</button> <button type="button" class="btn btn-tool dropdown-toggle" title="Heading (1/2/3)">H▾</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button type="button" class="btn btn-tool dropdown-item" data-action="h1" data-key="1" title="Heading 1 (1)">Heading 1</button> <button type="button" class="btn btn-tool btn-block" data-action="h1" data-key="1" title="Heading 1 (1)">Heading 1</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="h2" data-key="2" title="Heading 2 (2)">Heading 2</button> <button type="button" class="btn btn-tool btn-block" data-action="h2" data-key="2" title="Heading 2 (2)">Heading 2</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="h3" data-key="3" title="Heading 3 (3)">Heading 3</button> <button type="button" class="btn btn-tool btn-block" data-action="h3" data-key="3" title="Heading 3 (3)">Heading 3</button>
</div> </div>
</span> </span>
<span class="toolbar-sep"></span> <span class="toolbar-sep"></span>
@@ -26,16 +26,16 @@
<span class="dropdown"> <span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Link (L/P)">L▾</button> <button type="button" class="btn btn-tool dropdown-toggle" title="Link (L/P)">L▾</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button type="button" class="btn btn-tool dropdown-item" data-action="link" data-key="L" title="Link (L)">Link</button> <button type="button" class="btn btn-tool btn-block" data-action="link" data-key="L" title="Link (L)">Link</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="wikilink" data-key="P" title="Wiki link (P)">Wiki link</button> <button type="button" class="btn btn-tool btn-block" data-action="wikilink" data-key="P" title="Wiki link (P)">Wiki link</button>
</div> </div>
</span> </span>
<span class="dropdown"> <span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="List (U/O/X)">≡▾</button> <button type="button" class="btn btn-tool dropdown-toggle" title="List (U/O/X)">≡▾</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button type="button" class="btn btn-tool dropdown-item" data-action="ul" data-key="U" title="Unordered list (U)">Unordered list</button> <button type="button" class="btn btn-tool btn-block" data-action="ul" data-key="U" title="Unordered list (U)">Unordered list</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="ol" data-key="O" title="Ordered list (O)">Ordered list</button> <button type="button" class="btn btn-tool btn-block" data-action="ol" data-key="O" title="Ordered list (O)">Ordered list</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="task" data-key="X" title="Task list (X)">Task list</button> <button type="button" class="btn btn-tool btn-block" data-action="task" data-key="X" title="Task list (X)">Task list</button>
</div> </div>
</span> </span>
<button type="button" class="btn btn-tool" data-action="quote" data-key="Q" title="Blockquote (Q)">&gt;</button> <button type="button" class="btn btn-tool" data-action="quote" data-key="Q" title="Blockquote (Q)">&gt;</button>
@@ -44,27 +44,27 @@
<span class="dropdown"> <span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Table (T)">T▾</button> <button type="button" class="btn btn-tool dropdown-toggle" title="Table (T)">T▾</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button type="button" class="btn btn-tool dropdown-item" data-action="fmttable" data-key="T" title="Format table (T)">Format table</button> <button type="button" class="btn btn-tool btn-block" data-action="fmttable" data-key="T" title="Format table (T)">Format table</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="tblalignleft" title="Align left">Align left</button> <button type="button" class="btn btn-tool btn-block" data-action="tblalignleft" title="Align left">Align left</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="tblaligncenter" title="Align center">Align center</button> <button type="button" class="btn btn-tool btn-block" data-action="tblaligncenter" title="Align center">Align center</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="tblalignright" title="Align right">Align right</button> <button type="button" class="btn btn-tool btn-block" data-action="tblalignright" title="Align right">Align right</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="tblinsertcol" title="Insert column">Insert column</button> <button type="button" class="btn btn-tool btn-block" data-action="tblinsertcol" title="Insert column">Insert column</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="tbldeletecol" title="Delete column">Delete column</button> <button type="button" class="btn btn-tool btn-block" data-action="tbldeletecol" title="Delete column">Delete column</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="tblinsertrow" title="Insert row">Insert row</button> <button type="button" class="btn btn-tool btn-block" data-action="tblinsertrow" title="Insert row">Insert row</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="tbldeleterow" title="Delete row">Delete row</button> <button type="button" class="btn btn-tool btn-block" data-action="tbldeleterow" title="Delete row">Delete row</button>
</div> </div>
</span> </span>
<span class="dropdown"> <span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Insert date (D/W)">D▾</button> <button type="button" class="btn btn-tool dropdown-toggle" title="Insert date (D/W)">D▾</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button type="button" class="btn btn-tool dropdown-item" data-action="dateiso" data-key="D" title="YYYY-MM-DD (D)">YYYY-MM-DD</button> <button type="button" class="btn btn-tool btn-block" data-action="dateiso" data-key="D" title="YYYY-MM-DD (D)">YYYY-MM-DD</button>
<button type="button" class="btn btn-tool dropdown-item" data-action="datelong" data-key="W" title="DE Long (W)">DE Long</button> <button type="button" class="btn btn-tool btn-block" data-action="datelong" data-key="W" title="DE Long (W)">DE Long</button>
</div> </div>
</span> </span>
<span class="dropdown"> <span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Special (V)">★▾</button> <button type="button" class="btn btn-tool dropdown-toggle" title="Special (V)">★▾</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button type="button" class="btn btn-tool dropdown-item" data-action="movie" data-key="V" title="Import movie (V)">Import movie</button> <button type="button" class="btn btn-tool btn-block" data-action="movie" data-key="V" title="Import movie (V)">Import movie</button>
</div> </div>
</span> </span>
<span class="toolbar-sep"></span> <span class="toolbar-sep"></span>
assets/page/main.html
+6 -6
View File
@@ -1,4 +1,4 @@
{{define "headScripts"}}<script src="/_/page/actions.js"></script>{{end}} {{define "headScripts"}}<script src="/_/page/actions.js"></script><script src="/_/page/right-rail.js" defer></script>{{end}}
{{define "content"}} {{define "content"}}
{{if .Content}} {{if .Content}}
@@ -39,12 +39,12 @@
{{if .CanEdit}} {{if .CanEdit}}
<nav class="actions"> <nav class="actions">
<div class="panel-header">ACTIONS</div> <div class="panel-header">ACTIONS</div>
<button class="btn" onclick="newPage()" title="New page (N)">NEW</button> <button class="btn btn-block" onclick="newPage()" title="New page (N)">NEW</button>
<a class="btn" href="?edit" title="Edit page (E)">EDIT</a> <a class="btn btn-block" href="?edit" title="Edit page (E)">EDIT</a>
<button class="btn" data-companion-reveal hidden title="Reveal in file manager">REVEAL</button> <button class="btn btn-block" data-companion-reveal hidden title="Reveal in file manager">REVEAL</button>
{{if not .IsRoot}} {{if not .IsRoot}}
<button class="btn" onclick="movePage()" title="Move page (M)">MOVE</button> <button class="btn btn-block" onclick="movePage()" title="Move page (M)">MOVE</button>
<button class="btn danger" onclick="deletePage()" title="Delete page">DELETE</button> <button class="btn btn-block danger" onclick="deletePage()" title="Delete page">DELETE</button>
{{end}} {{end}}
</nav> </nav>
{{end}} {{end}}
assets/page/right-rail.js
+17
View File
@@ -0,0 +1,17 @@
document.addEventListener("DOMContentLoaded", function () {
var rail = document.querySelector(".right-rail");
if (!rail) return;
var header = document.querySelector("header");
if (!header) return;
function updateTop() {
if (getComputedStyle(rail).position !== "fixed") {
rail.style.top = "";
return;
}
var rect = header.getBoundingClientRect();
rail.style.top = Math.max(8, rect.bottom + 8) + "px";
}
window.addEventListener("scroll", updateTop, { passive: true });
window.addEventListener("resize", updateTop);
updateTop();
});
assets/page/toc.js
+6
View File
@@ -47,5 +47,11 @@ document.addEventListener("DOMContentLoaded", function () {
var open = nav.classList.toggle("is-open"); var open = nav.classList.toggle("is-open");
fab.setAttribute("aria-expanded", open ? "true" : "false"); fab.setAttribute("aria-expanded", open ? "true" : "false");
}); });
nav.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
nav.classList.remove("is-open");
fab.setAttribute("aria-expanded", "false");
}
});
document.body.appendChild(fab); document.body.appendChild(fab);
}); });
assets/search/main.html
+1 -1
View File
@@ -29,7 +29,7 @@
<div class="fab dropdown"> <div class="fab dropdown">
<button class="btn btn-fab" data-action="actions-drop" title="Actions" aria-label="Actions">≡</button> <button class="btn btn-fab" data-action="actions-drop" title="Actions" aria-label="Actions">≡</button>
<div class="dropdown-menu align-right open-up"> <div class="dropdown-menu align-right open-up">
<button class="btn dropdown-item" onclick="rebuildIndex()" title="Rebuild search index">REBUILD INDEX</button> <button class="btn btn-block" onclick="rebuildIndex()" title="Rebuild search index">REBUILD INDEX</button>
</div> </div>
</div> </div>
{{end}} {{end}}
assets/style.css
+4 -3
View File
@@ -374,7 +374,7 @@ button.fab {
color: var(--primary-hover); color: var(--primary-hover);
} }
.dropdown-item { .btn-block {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
@@ -579,7 +579,6 @@ hr {
.actions { .actions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start;
gap: 0.15rem; gap: 0.15rem;
} }
@@ -869,7 +868,7 @@ hr {
color: var(--primary-hover); color: var(--primary-hover);
} }
.dropdown-item.cal-current { .btn-block.cal-current {
color: var(--primary-hover); color: var(--primary-hover);
} }
@@ -923,6 +922,7 @@ hr {
display: block; display: block;
} }
/* TOC on mobile is a floating overlay toggled by the FAB. */ /* TOC on mobile is a floating overlay toggled by the FAB. */
.right-rail .toc,
.toc { .toc {
position: fixed; position: fixed;
bottom: 5rem; bottom: 5rem;
@@ -936,6 +936,7 @@ hr {
display: none; display: none;
z-index: 60; z-index: 60;
} }
.right-rail .toc.is-open,
.toc.is-open { .toc.is-open {
display: block; display: block;
} }