Undo print view after printing, a11y, styling and prettier
This commit is contained in:
joncrangle
@@ -23,6 +23,26 @@
|
||||
}
|
||||
};
|
||||
handleThemeChange();
|
||||
function prepareForPrint() {
|
||||
document.getElementById("readingtime").innerText =
|
||||
"Date Accessed: " +
|
||||
new Date().toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
[...document.querySelectorAll(".noprint")].forEach((e) =>
|
||||
e.classList.toggle("hidden")
|
||||
);
|
||||
window.addEventListener("afterprint", handleAfterPrint);
|
||||
window.print();
|
||||
}
|
||||
function handleAfterPrint() {
|
||||
[...document.querySelectorAll(".noprint")].forEach((e) =>
|
||||
e.classList.toggle("hidden")
|
||||
);
|
||||
window.removeEventListener("afterprint", handleAfterPrint);
|
||||
}
|
||||
</script>
|
||||
<title>ladder | {{.Title}}</title>
|
||||
</head>
|
||||
@@ -35,7 +55,6 @@
|
||||
<div
|
||||
class="hover:drop-shadow-[0_0px_4px_rgba(122,167,209,.3)] transition-colors duration-300 focus:outline-none focus:ring focus:border-[#7AA7D1] ring-offset-2"
|
||||
>
|
||||
|
||||
<div class="flex">
|
||||
<a
|
||||
href="/"
|
||||
@@ -62,10 +81,11 @@
|
||||
href="/https://{{.Hostname}}"
|
||||
class="flex ml-1 h-8 font-extrabold tracking-tight no-underline focus:outline-none focus:ring focus:border-[#7AA7D1] ring-offset-2"
|
||||
>
|
||||
<span class="text-3xl mr-1 text-[#7AA7D1] leading-8 align-middle">{{.Sitename}}</span>
|
||||
<span class="text-3xl mr-1 text-[#7AA7D1] leading-8 align-middle"
|
||||
>{{.Sitename}}</span
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="noprint flex justify-center z-10">
|
||||
@@ -73,10 +93,10 @@
|
||||
<button
|
||||
aria-expanded="false"
|
||||
id="dropdownButton"
|
||||
aria-label="Toggle dropdown menu"
|
||||
aria-label="Toggle preferences menu"
|
||||
onclick="toggleDropdown()"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
|
||||
class="inline-flex items-center justify-center align-middle whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -96,12 +116,22 @@
|
||||
</button>
|
||||
|
||||
<button
|
||||
aria-expanded="closed"
|
||||
onclick="document.getElementById('readingtime').innerText = 'Date Accessed: '+(new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })); [...document.querySelectorAll('.noprint')].forEach(e => e.remove()); window.print()"
|
||||
aria-expanded="false"
|
||||
title="Print"
|
||||
onclick="prepareForPrint()"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
|
||||
class="inline-flex items-center justify-center align-middle whitespace-nowrap rounded-full h-12 px-4 py-2 text-sm font-medium text-slate-600 dark:text-slate-400 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-white dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-700 hover:text-slate-500 dark:hover:text-slate-200"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="16" width="16" viewBox="0 0 512 512"><path d="M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/></svg>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 512 512"
|
||||
class="h-4 w-4"
|
||||
>
|
||||
<path
|
||||
d="M128 0C92.7 0 64 28.7 64 64v96h64V64H354.7L384 93.3V160h64V93.3c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0H128zM384 352v32 64H128V384 368 352H384zm64 32h32c17.7 0 32-14.3 32-32V256c0-35.3-28.7-64-64-64H64c-35.3 0-64 28.7-64 64v96c0 17.7 14.3 32 32 32H64v64c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V384zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div
|
||||
@@ -327,29 +357,29 @@
|
||||
|
||||
<main class="flex flex-col space-y-3">
|
||||
{{if not .Success}}
|
||||
<h1>
|
||||
Error
|
||||
</h1>
|
||||
<h1>Error</h1>
|
||||
<p>
|
||||
There was a problem querying
|
||||
<a href="{{.Params}}">{{.Params}}</a>
|
||||
</p>
|
||||
<code class="text-red-500 dark:text-red-400">
|
||||
{{.Error}}
|
||||
</code>
|
||||
<code class="text-red-500 dark:text-red-400"> {{.Error}} </code>
|
||||
{{else}}
|
||||
|
||||
<div class="flex flex-col gap-1 mt-3">
|
||||
<h1>
|
||||
<a href="{{.Url}}" class="text-slate-900 dark:text-slate-200 no-underline hover:underline"> {{.Title}} </a>
|
||||
<a
|
||||
href="{{.Url}}"
|
||||
class="text-slate-900 dark:text-slate-200 no-underline hover:underline"
|
||||
>
|
||||
{{.Title}}
|
||||
</a>
|
||||
</h1>
|
||||
{{if ne .Date ""}}
|
||||
<small
|
||||
class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
|
||||
>{{.Date}}</small
|
||||
>
|
||||
{{end}}
|
||||
{{if ne .Author ""}}
|
||||
{{end}} {{if ne .Author ""}}
|
||||
<small
|
||||
class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
|
||||
>{{.Author}}</small
|
||||
@@ -358,31 +388,49 @@
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<a href="{{.Url}}" class="text-slate-900 dark:text-slate-200"> {{.Title}} </a>
|
||||
<a
|
||||
href="{{.Url}}"
|
||||
class="text-slate-900 dark:text-slate-200 no-underline hover:underline"
|
||||
>
|
||||
{{.Title}}
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="flex justify-between items-center gap-1 mt-3">
|
||||
|
||||
|
||||
<div>
|
||||
{{if ne .Author ""}}
|
||||
<small class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400">{{.Author}} | </small>
|
||||
{{end}}
|
||||
|
||||
{{if ne .Date ""}}
|
||||
<small class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400">{{.Date}}</small>
|
||||
<small
|
||||
class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
|
||||
>{{.Author}} |
|
||||
</small>
|
||||
{{end}} {{if ne .Date ""}}
|
||||
<small
|
||||
class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
|
||||
>{{.Date}}</small
|
||||
>
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<small id="readingtime" class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400">Reading Time: {{.ReadingTime}}</small>
|
||||
<small
|
||||
id="readingtime"
|
||||
class="text-sm font-medium leading-none text-slate-600 dark:text-slate-400"
|
||||
>Reading Time: {{.ReadingTime}}</small
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<div>
|
||||
<div class="grid grid-cols-1 justify-items-center">
|
||||
<div><img src="{{.Image}}" alt="{{.Description}}" class="h-auto w-auto object-cover max-w-full mx-auto rounded-md shadow-md dark:shadow-slate-700"/></div>
|
||||
<div class="mt-2 text-sm text-slate-600 dark:text-slate-400">{{.Description}}</div>
|
||||
<div>
|
||||
<img
|
||||
src="{{.Image}}"
|
||||
alt="{{.Description}}"
|
||||
class="h-auto w-auto object-cover max-w-full mx-auto rounded-md shadow-md dark:shadow-slate-700"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
{{.Description}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -390,9 +438,9 @@
|
||||
{{end}}
|
||||
</main>
|
||||
|
||||
<div class="my-2"></div>
|
||||
<footer class="noprint mx-4 my-2 pt-2 border-t border-gray-300 dark:border-gray-700 text-center text-slate-600 dark:text-slate-400">
|
||||
|
||||
<footer
|
||||
class="noprint mx-4 my-2 pt-2 border-t border-gray-300 dark:border-gray-700 text-center text-slate-600 dark:text-slate-400"
|
||||
>
|
||||
<small>
|
||||
<a
|
||||
href="https://github.com/everywall"
|
||||
@@ -408,8 +456,6 @@
|
||||
| Code Licensed Under GPL v3.0
|
||||
</small>
|
||||
</footer>
|
||||
<div class="my-2"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user