Fix rendering of new rail

This commit is contained in:
2026-05-17 10:36:23 +02:00
parent 3e765aa54f
commit d3e896d74e
8 changed files with 58 additions and 34 deletions
+3 -3
View File
@@ -60,7 +60,7 @@
menu.appendChild(label);
var link = document.createElement('a');
link.className = 'btn dropdown-item';
link.className = 'btn btn-block';
link.href = COMPANION_BASE + '/config';
link.target = '_blank';
link.rel = 'noopener';
@@ -78,13 +78,13 @@
menu.appendChild(msg);
var win = document.createElement('a');
win.className = 'btn dropdown-item';
win.className = 'btn btn-block';
win.href = '/companion/download/windows';
win.textContent = 'Download — Windows';
menu.appendChild(win);
var lin = document.createElement('a');
lin.className = 'btn dropdown-item';
lin.className = 'btn btn-block';
lin.href = '/companion/download/linux';
lin.textContent = 'Download — Linux';
menu.appendChild(lin);
+2 -2
View File
@@ -5,14 +5,14 @@
<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>
<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>
<a href="{{.YearURL}}" class="diary-cal-heading">{{.DisplayYear}}</a>
<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>
<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>
+19 -19
View File
@@ -15,9 +15,9 @@
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Heading (1/2/3)">H▾</button>
<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 dropdown-item" 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="h1" data-key="1" title="Heading 1 (1)">Heading 1</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 btn-block" data-action="h3" data-key="3" title="Heading 3 (3)">Heading 3</button>
</div>
</span>
<span class="toolbar-sep"></span>
@@ -26,16 +26,16 @@
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Link (L/P)">L▾</button>
<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 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="link" data-key="L" title="Link (L)">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>
</span>
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="List (U/O/X)">≡▾</button>
<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 dropdown-item" 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="ul" data-key="U" title="Unordered list (U)">Unordered 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 btn-block" data-action="task" data-key="X" title="Task list (X)">Task list</button>
</div>
</span>
<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">
<button type="button" class="btn btn-tool dropdown-toggle" title="Table (T)">T▾</button>
<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 dropdown-item" 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 dropdown-item" 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 dropdown-item" 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 dropdown-item" data-action="tbldeleterow" title="Delete row">Delete row</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 btn-block" data-action="tblalignleft" title="Align left">Align left</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 btn-block" data-action="tblalignright" title="Align right">Align right</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 btn-block" data-action="tbldeletecol" title="Delete column">Delete column</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 btn-block" data-action="tbldeleterow" title="Delete row">Delete row</button>
</div>
</span>
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Insert date (D/W)">D▾</button>
<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 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="dateiso" data-key="D" title="YYYY-MM-DD (D)">YYYY-MM-DD</button>
<button type="button" class="btn btn-tool btn-block" data-action="datelong" data-key="W" title="DE Long (W)">DE Long</button>
</div>
</span>
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Special (V)">★▾</button>
<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>
</span>
<span class="toolbar-sep"></span>
+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"}}
{{if .Content}}
@@ -39,12 +39,12 @@
{{if .CanEdit}}
<nav class="actions">
<div class="panel-header">ACTIONS</div>
<button class="btn" onclick="newPage()" title="New page (N)">NEW</button>
<a class="btn" 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" onclick="newPage()" title="New page (N)">NEW</button>
<a class="btn btn-block" href="?edit" title="Edit page (E)">EDIT</a>
<button class="btn btn-block" data-companion-reveal hidden title="Reveal in file manager">REVEAL</button>
{{if not .IsRoot}}
<button class="btn" onclick="movePage()" title="Move page (M)">MOVE</button>
<button class="btn danger" onclick="deletePage()" title="Delete page">DELETE</button>
<button class="btn btn-block" onclick="movePage()" title="Move page (M)">MOVE</button>
<button class="btn btn-block danger" onclick="deletePage()" title="Delete page">DELETE</button>
{{end}}
</nav>
{{end}}
+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();
});
+6
View File
@@ -47,5 +47,11 @@ document.addEventListener("DOMContentLoaded", function () {
var open = nav.classList.toggle("is-open");
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);
});
+1 -1
View File
@@ -29,7 +29,7 @@
<div class="fab dropdown">
<button class="btn btn-fab" data-action="actions-drop" title="Actions" aria-label="Actions"></button>
<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>
{{end}}
+4 -3
View File
@@ -374,7 +374,7 @@ button.fab {
color: var(--primary-hover);
}
.dropdown-item {
.btn-block {
display: flex;
justify-content: space-between;
align-items: baseline;
@@ -579,7 +579,6 @@ hr {
.actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.15rem;
}
@@ -869,7 +868,7 @@ hr {
color: var(--primary-hover);
}
.dropdown-item.cal-current {
.btn-block.cal-current {
color: var(--primary-hover);
}
@@ -923,6 +922,7 @@ hr {
display: block;
}
/* TOC on mobile is a floating overlay toggled by the FAB. */
.right-rail .toc,
.toc {
position: fixed;
bottom: 5rem;
@@ -936,6 +936,7 @@ hr {
display: none;
z-index: 60;
}
.right-rail .toc.is-open,
.toc.is-open {
display: block;
}