Allow uploading a banner image

This commit is contained in:
2024-10-27 07:21:36 +01:00
parent 19b390cbbb
commit 343022273c
11 changed files with 274 additions and 140 deletions

View File

@ -3,25 +3,19 @@
<form hx-encoding="multipart/form-data">
<div class="flex flex-col gap-4">
<div>
<h3>Aktuelle Artikel</h3>
<div class="flex flex-col gap-4">
{{range .}}
<div class="border border-slate-200 dark:border-slate-800 px-2 py-1 rounded-md">
<h1 class="font-bold text-2xl">{{.Title}}</h1>
<p>{{.Description}}</p>
</div>
{{end}}
</div>
</div>
<div class="w-full" id="issue-banner-container"></div>
<div>
<h3>Titelseite</h3>
<div class="grid grid-cols-2 gap-4 items-center">
<input class="h-full" name="issue-title" placeholder="Titel" required type="text" />
<label class="btn text-center" for="image-upload">Titelbild</label>
<input class="hidden" id="image-upload" name="issue-image" type="file" required
hx-post="/issue/upload-image" />
<h3>Titelseite</h3>
<div class="grid grid-cols-2 gap-4 items-center">
<div class="flex flex-col">
<label for="issue-title">Titel</label>
<input name="issue-title" required type="text" />
</div>
<div class="grid grid-cols-1 items-center">
<label class="btn cursor-pointer text-center" for="issue-banner-upload">Titelbild</label>
<input class="hidden" id="issue-banner-upload" name="issue-banner" type="file" required
hx-post="/issue/upload-banner" hx-target="#issue-banner-container" />
</div>
</div>
@ -32,6 +26,18 @@
<input id="issue-content" name="issue-content" type="hidden" />
</div>
</div>
<div>
<h3>Aktuelle Artikel</h3>
<div class="flex flex-col gap-4">
{{range .}}
<div class="border border-slate-200 dark:border-slate-800 px-2 py-1 rounded-md">
<h1 class="font-bold text-2xl">{{.Title}}</h1>
<p>{{.Summary}}</p>
</div>
{{end}}
</div>
</div>
</div>
<div class="btn-area">
@ -71,3 +77,10 @@
});
</script>
{{end}}
{{define "issue-banner-template"}}
<div class="w-full" id="issue-banner-container">
<img src="data:image/webp;base64,{{.BannerImage}}" alt="Banner Image">
<input id="issue-banner-url" name="issue-banner-url" type="hidden" value="{{.URL}}" />
</div>
{{end}}

View File

@ -1,15 +1,24 @@
{{define "page-content"}}
<h2>Editor</h2>
<form id="edit-area">
<form id="edit-area" hx-encoding="multipart/form-data">
<div class="flex flex-col gap-y-1">
<label for="article-title">Titel</label>
<div class="w-full" id="article-banner-container">
<img src="data:image/webp;base64,{{.BannerImage}}" alt="Banner Image">
<input id="article-banner-url" name="article-banner-url" type="hidden" value="{{.Article.BannerLink}}" />
</div>
<div class="grid grid-cols-2 gap-4 items-center">
<input name="article-title" type="text" value="{{.Article.Title}}" />
<label class="btn text-center" for="image-upload">Titelbild</label>
<input class="hidden" id="image-upload" name="issue-image" type="file" required
hx-post="/issue/upload-image" />
<!-- TODO: Route einfügen -->
<div class="flex flex-col">
<label for="article-title">Titel</label>
<input name="article-title" type="text" value="{{.Article.Title}}" />
</div>
<div class="grid grid-cols-1 items-center">
<label class="btn cursor-pointer text-center" for="article-banner">Titelbild</label>
<input class="hidden" id="article-banner" name="article-banner" type="file" required
hx-post="/article/upload-banner" hx-target="#article-banner-container" />
</div>
</div>
</div>
@ -81,3 +90,10 @@
});
</script>
{{end}}
{{define "article-banner-template"}}
<div class="w-full" id="article-banner-container">
<img src="data:image/webp;base64,{{.BannerImage}}" alt="Banner Image">
<input id="article-banner-url" name="article-banner-url" type="hidden" value="{{.URL}}" />
</div>
{{end}}

View File

@ -25,7 +25,7 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
<button class="btn" hx-get="/issue/this" hx-target="#page-content">Diese Ausgabe</button>
<form class="flex" hx-encoding="multipart/form-data">
<label class="btn text-center" for="pdf-upload">PDF hochladen</label>
<label class="btn cursor-pointer text-center" for="pdf-upload">PDF hochladen</label>
<input accept=".pdf" class="hidden" id="pdf-upload" name="pdf-upload" type="file"
hx-post="/pdf/upload" />
</form>

View File

@ -2,6 +2,10 @@
<h2>{{.ActionTitle}}</h2>
<div>
<div class="w-full" id="article-banner-container">
<img src="data:image/webp;base64,{{.BannerImage}}" alt="Banner Image">
</div>
<span>Titel</span>
<div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
{{.Article.Title}}