Fix rendering of new rail
This commit is contained in:
+3
-3
@@ -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);
|
||||
|
||||
@@ -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
@@ -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)">></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>
|
||||
|
||||
@@ -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}}
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
@@ -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
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user