112 lines
3.9 KiB
HTML
112 lines
3.9 KiB
HTML
{{define "publication"}} {{template "layout-page-start" (args "Title" .Title)}}
|
|
<div class="fixed w-full h-full bg-green-500 grid grid-cols-4 grid-rows-1">
|
|
<nav class="bg-red-500 h-full">
|
|
<h1>{{.Title}}</h1>
|
|
<p>{{.ID}}</p>
|
|
</nav>
|
|
<main class="overflow-y-scroll flex justify-center col-span-3 py-20">
|
|
<div class="flex flex-col gap-10 h-fit">
|
|
{{range $page := .Pages}}
|
|
<section id="{{$page.ID}}" class="w-fit">
|
|
<!--
|
|
INFO: The interaction form could be another page that is shown
|
|
when "Add Interaction" is clicked. Said page could be also a partial
|
|
than can replace the current image using htmx, so it is
|
|
compatible with JavaScript enabled or not.
|
|
-->
|
|
<div class="flex flex-row">
|
|
<form
|
|
action="/publications/{{$.ID}}/pages/{{$page.ID}}/interactions/"
|
|
method="post"
|
|
class="w-100"
|
|
>
|
|
<div class="flex">
|
|
{{if (gt (len $page.Interactions) 0)}}
|
|
<div class="relative flex">
|
|
<div class="absolute z-2 w-full h-full top-0 left-0">
|
|
{{range $interactionID, $interaction := $page.Interactions}}
|
|
<a
|
|
class="absolute"
|
|
href="{{$interaction.URL}}"
|
|
style="top:{{$interaction.Y}}%;left:{{$interaction.X}}%;"
|
|
>
|
|
<span
|
|
class="bg-red-200 opacity-10 block w-10 h-10 transform -translate-x-[50%] -translate-y-[50%]"
|
|
></span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
<img
|
|
src="/publications/{{$.ID}}/pages/{{$page.ID}}/"
|
|
class="z-1 relative"
|
|
/>
|
|
</div>
|
|
{{else}}
|
|
<img
|
|
src="/publications/{{$.ID}}/pages/{{$page.ID}}/"
|
|
class="z-1 relative"
|
|
/>
|
|
{{end}}
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
name="y"
|
|
style="writing-mode: vertical-lr"
|
|
/>
|
|
</div>
|
|
<input type="range" min="0" max="100" name="x" class="w-full" />
|
|
<input
|
|
type="url"
|
|
required
|
|
name="link"
|
|
class="bg-slate-300"
|
|
placeholder="url of interaction"
|
|
/>
|
|
<button
|
|
class="rounded-full bg-blue-700 p-1 px-3 text-sm text-slate-100"
|
|
>
|
|
Add interaction
|
|
</button>
|
|
</form>
|
|
{{if (gt (len $page.Interactions) 0)}}
|
|
<div class="flex flex-col gap-2">
|
|
{{range $interactionID, $interaction := $page.Interactions}}
|
|
<form
|
|
action="/publications/{{$.ID}}/pages/{{$page.ID}}/interactions/{{$interactionID}}/"
|
|
method="post"
|
|
>
|
|
<input type="hidden" name="x-method" value="delete" />
|
|
<button
|
|
class="rounded-full bg-red-700 p-1 px-3 text-sm text-slate-100"
|
|
>
|
|
🗑️{{$interaction.URL}}
|
|
</button>
|
|
</form>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<form action="/publications/{{$.ID}}/pages/{{$page.ID}}/" method="post">
|
|
<input type="hidden" name="x-method" value="delete" />
|
|
<button
|
|
class="rounded-full bg-red-700 p-1 px-3 text-sm text-slate-100"
|
|
>
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</section>
|
|
{{end}}
|
|
<form
|
|
action="/publications/{{.ID}}/pages/"
|
|
method="post"
|
|
enctype="multipart/form-data"
|
|
>
|
|
<input type="file" name="image" required />
|
|
<button>Add new page</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{{template "layout-page-end"}} {{end}}
|