Zoe
b52d9541a3
Some checks failed
Build and Push Docker Image to GHCR / build-and-push (push) Has been cancelled
In this realease, I have further optimized Passport. The css that Passport now uses is entirely handrolled and build via postcss (sadly). Several bugs have also been fixed in this release, as well as a few performance improvements relating to the admin UI.
132 lines
6.3 KiB
Handlebars
132 lines
6.3 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Passport</title>
|
|
<link rel="favicon" href="/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="preload" as="font" type="font/woff2" crossorigin="anonymous"
|
|
href="/assets/fonts/InstrumentSans-VariableFont_wdth,wght.woff2" />
|
|
{{{embedFile "assets/styles/adminUi.css"}}}
|
|
</head>
|
|
|
|
<body>
|
|
<div id="blur-target">
|
|
<header class="flex w-full p-3">
|
|
<a href="/"
|
|
class="flex items-center flex-row gap-2 text-white border-b hover:border-transparent justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2">
|
|
<path d="m9 14l-4-4l4-4" />
|
|
<path d="M5 10h11a4 4 0 1 1 0 8h-1" />
|
|
</g>
|
|
</svg>
|
|
Return to home
|
|
</a>
|
|
</header>
|
|
|
|
{{> 'partials/category-grid' }}
|
|
</div>
|
|
|
|
<input type="file" id="icon-upload" accept="image/*" style="display: none;" />
|
|
<div id="modal-container" role="dialog" aria-modal="true" class="modal-bg">
|
|
<div class="modal">
|
|
{{> 'partials/modals/category-form' }}
|
|
{{> 'partials/modals/link-form' }}
|
|
{{> 'partials/modals/delete-link' }}
|
|
{{> 'partials/modals/delete-category' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- store a blank link card so that if we add a new link we can clone it to make the editing experience easier -->
|
|
<div id="template-link-card" class="hidden">
|
|
<div>
|
|
<img width="64" height="64" draggable="false" />
|
|
</div>
|
|
<div>
|
|
<h3></h3>
|
|
<!-- add 2 to the height to account for the border -->
|
|
<p></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="template-category" class="hidden">
|
|
<div class="category-header">
|
|
<div>
|
|
<img width="32" height="32" draggable="false" />
|
|
</div>
|
|
<h2></h2>
|
|
</div>
|
|
<div class="link-grid">
|
|
<div class="new-link-card link-card admin">
|
|
<svg class="mr-2" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="M12 5v14m-7-7h14" />
|
|
</svg>
|
|
<div>
|
|
<h3>Add a link</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="template-edit-actions" class="hidden">
|
|
<div class="flex flex-row gap-2">
|
|
<button class="action-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2">
|
|
<path d="M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1" />
|
|
<path d="M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3" />
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
<button class="text-error action-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 7h16m-10 4v6m4-6v6M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="teleport-storage" class="absolute -top-full -left-full hidden">
|
|
<!-- These are the elements that appear when the user enters edit mode, they allow for the cancelation/confirmation of the edit -->
|
|
<div class="action-container" id="confirm-actions">
|
|
<button class="action-button text-success" onclick="confirmEdit()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="m5 12l5 5L20 7" />
|
|
</svg>
|
|
</button>
|
|
<button class="action-button text-error" onclick="cancelEdit()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
|
|
stroke-width="2" d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m15.364-6.364L5.636 18.364" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- This is the element that appears on top of the icon when the user is editing it that allows for changing the icon -->
|
|
<button id="select-icon-button" onclick="selectIcon()" class="select-icon-button" draggable="false">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"
|
|
viewBox="0 0 24 24"><!-- Icon from Tabler Icons by Paweł Kuna - https://github.com/tabler/tabler-icons/blob/master/LICENSE -->
|
|
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 9l5-5l5 5m-5-5v12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{{{embedFile "scripts/admin.js"}}}
|
|
</body>
|
|
|
|
{{{devContent}}}
|
|
|
|
</html> |