fixes in css

This commit is contained in:
Mateusz Gruszczyński
2026-07-24 13:20:15 +02:00
parent 900ee42585
commit 21800b9bcb
5 changed files with 23 additions and 4 deletions
+14
View File
@@ -1258,6 +1258,12 @@ dialog::backdrop {
background: var(--background);
}
.public-header__actions {
display: flex;
align-items: center;
gap: 12px;
}
.public-header {
position: sticky;
top: 0;
@@ -1302,6 +1308,10 @@ dialog::backdrop {
cursor: zoom-in;
}
.public-page.hide-preview-line-numbers .public-content {
padding-left: 32px;
}
@media (max-width: 600px) {
.public-document {
padding-top: 32px;
@@ -1310,6 +1320,10 @@ dialog::backdrop {
.public-content {
padding: 20px 20px 20px 52px;
}
.public-page.hide-preview-line-numbers .public-content {
padding-left: 20px;
}
}
+2
View File
@@ -7,6 +7,7 @@ import { renderMarkdown } from "@rustpad/markdown";
const token=location.pathname.split("/").filter(Boolean)[1];
const content=document.querySelector("#public-content");
const lineNumbersToggle=document.querySelector("#public-line-numbers-toggle");
function toast(text){const el=document.querySelector("#toast");el.textContent=text;el.classList.add("visible");setTimeout(()=>el.classList.remove("visible"),1800);}
async function renderMermaid(){const nodes=content.querySelectorAll(".mermaid");if(!nodes.length)return;try{const {default:mermaid}=await import("https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs");mermaid.initialize({startOnLoad:false,theme:"dark",securityLevel:"strict"});await mermaid.run({nodes:[...nodes]});}catch{nodes.forEach(n=>n.insertAdjacentHTML("beforebegin",'<p class="error">Failed to load Mermaid.</p>'));}}
async function renderCodeHighlight(){const blocks=content.querySelectorAll('pre code[class^="language-"]');if(!blocks.length)return;try{const hljs=await import("https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/+esm");blocks.forEach(block=>{const lines=block.querySelectorAll(".code-line");if(!lines.length){hljs.default.highlightElement(block);return;}const language=[...block.classList].find(name=>name.startsWith("language-"))?.slice(9);lines.forEach(line=>{try{line.innerHTML=hljs.default.highlight(line.textContent,{language,ignoreIllegals:true}).value;}catch{line.innerHTML=hljs.default.highlightAuto(line.textContent).value;}});block.classList.add("hljs");});}catch{}}
@@ -17,5 +18,6 @@ function lockPublicContent(allowTaskUpdates){
}
async function initialize(){try{const page=await api(`/api/public/${encodeURIComponent(token)}`);document.querySelector("#public-title").textContent=page.title;document.querySelector("#public-meta").textContent=`Updated: ${new Date(page.updated_at).toLocaleString("en-US")}${page.allow_task_updates?" · tasks can be updated":""}`;document.title=`${page.title} · RustPad`;content.innerHTML=renderMarkdown(page.content);lockPublicContent(page.allow_task_updates);await Promise.all([renderMermaid(),renderCodeHighlight()]);}catch(error){content.innerHTML=`<p class="error">${String(error.message)}</p>`;}}
content.addEventListener("change",async event=>{const box=event.target.closest(".task-checkbox");if(!box||box.disabled)return;const previous=!box.checked;box.disabled=true;try{const page=await api(`/api/public/${encodeURIComponent(token)}/tasks`,{method:"POST",body:JSON.stringify({source_line:Number(box.dataset.sourceLine),checked:box.checked})});document.querySelector("#public-meta").textContent=`Updated: ${new Date(page.updated_at).toLocaleString("en-US")} · tasks can be updated`;toast("Task saved");}catch(error){box.checked=previous;toast(error.message);}finally{box.disabled=false;}});
lineNumbersToggle.addEventListener("change",()=>{document.body.classList.toggle("hide-preview-line-numbers",!lineNumbersToggle.checked);});
document.querySelector("#copy-public-link").addEventListener("click",async()=>{try{await copyText(location.href);toast("Link copied");}catch(error){toast(error.message);}});
initialize();
+5 -2
View File
@@ -12,10 +12,13 @@
<script type="module" src="/assets/js/public.js?v=__ASSET_VERSION__"></script>
</head>
<body class="public-page">
<body class="public-page hide-preview-line-numbers">
<header class="public-header">
<a class="brand" href="/">RustPad</a>
<button id="copy-public-link" class="secondary-button">Copy link</button>
<div class="public-header__actions">
<label class="line-toggle"><input id="public-line-numbers-toggle" type="checkbox"> Line numbers</label>
<button id="copy-public-link" class="secondary-button">Copy link</button>
</div>
</header>
<main class="public-document">
<h1 id="public-title">Loading…</h1>