jason/cpolis
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases 58 Wiki Activity

Add profile pic and correct usage of banner link

Browse Source
This commit is contained in:
Jason Streifling
2024-11-01 16:31:47 +01:00
parent dbddff6e55
commit b2a8578c72
16 changed files with 176 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/static/css/input.css
View File

@ -24,7 +24,7 @@ textarea {
}
.btn-area {
@apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 mt-4;
@apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1;
}
.btn-area-3 {
@ -40,33 +40,33 @@ textarea {
}
.EasyMDEContainer .CodeMirror {
@apply bg-slate-50 dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-100
@apply bg-slate-50 dark:bg-slate-950 border-slate-200 dark:border-slate-800 text-slate-900 dark:text-slate-100;
}
.EasyMDEContainer .cm-s-easymde .CodeMirror-cursor {
@apply border-slate-900 dark:border-slate-100
@apply border-slate-900 dark:border-slate-100;
}
.EasyMDEContainer .editor-toolbar > * {
@apply text-slate-900 dark:text-slate-100
@apply text-slate-900 dark:text-slate-100;
}
.EasyMDEContainer .editor-toolbar > .active, .editor-toolbar > button:hover, .editor-preview pre, .cm-s-easymde .cm-comment {
@apply bg-slate-100 dark:bg-slate-900
@apply bg-slate-100 dark:bg-slate-900;
}
.EasyMDEContainer .CodeMirror-fullscreen {
@apply bg-slate-50 dark:bg-slate-950
@apply bg-slate-50 dark:bg-slate-950;
}
.editor-toolbar {
@apply border border-slate-200 dark:border-slate-800
@apply border border-slate-200 dark:border-slate-800;
}
.editor-toolbar.fullscreen {
@apply bg-slate-50 dark:bg-slate-950
@apply bg-slate-50 dark:bg-slate-950;
}
.editor-preview {
@apply bg-slate-50 dark:bg-slate-950
@apply bg-slate-50 dark:bg-slate-950;
}

66
web/templates/add-user.html
View File

@ -1,66 +0,0 @@
{{define "page-content"}}
<h2>Neuer Benutzer</h2>
<form>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div>
<label for="username">Benutzername</label>
<input class="w-full" required name="username" type="text" value="{{.UserName}}" />
</div>
<div>
<label for="password">Passwort</label>
<input class="w-full" required name="password" placeholder="***" type="password" />
</div>
<div>
<label for="password2">Passwort wiederholen</label>
<input class="w-full" required name="password2" placeholder="***" type="password" />
</div>
<div>
<label for="first-name">Vorname</label>
<input class="w-full" required name="first-name" type="text" value="{{.FirstName}}" />
</div>
<div>
<label for="last-name">Nachname</label>
<input class="w-full" required name="last-name" type="text" value="{{.LastName}}" />
</div>
<div>
<label for="email">Emailadresse</label>
<input class="w-full" required name="email" type="text" value="{{.Email}}" />
</div>
<div>
<label for="email2">Emailadresse wiederholen</label>
<input class="w-full" required name="email2" type="text" value="{{.Email}}" />
</div>
</div>
<div class="flex flex-wrap gap-4">
<div>
<input required id="author" name="role" type="radio" value="3" {{if eq .Role 3 }}checked{{end}} />
<label for="author">Autor</label>
</div>
<div>
<input required id="editor" name="role" type="radio" value="2" {{if eq .Role 2 }}checked{{end}} />
<label for="editor">Redakteur</label>
</div>
<div>
<input required id="publisher" name="role" type="radio" value="1" {{if eq .Role 1 }}checked{{end}} />
<label for="publisher">Herausgeber</label>
</div>
<div>
<input required id="admin" name="role" type="radio" value="0" {{if eq .Role 0 }}checked{{end}} />
<label for="admin">Administrator</label>
</div>
</div>
<div class="btn-area">
<input class="action-btn" type="submit" value="Anlegen" hx-post="/user/add" hx-target="#page-content" />
<button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
</div>
</form>
{{end}}

6
web/templates/current-issue.html
View File

@ -79,8 +79,8 @@
{{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 id="issue-banner-container">
<img src="/image/serve/{{.Image}}" alt="" />
<input id="issue-banner-url" name="issue-banner-url" type="hidden" value="{{.Image}}" />
</div>
{{end}}

53
web/templates/edit-self.html
View File

@ -1,53 +0,0 @@
{{define "page-content"}}
<h2>Profil bearbeiten</h2>
<form>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div>
<label for="username">Benutzername</label>
<input class="w-full" name="username" type="text" value="{{.UserName}}" />
</div>
<div>
<label for="first-name">Vorname</label>
<input class="w-full" name="first-name" type="text" value="{{.FirstName}}" />
</div>
<div>
<label for="last-name">Nachname</label>
<input class="w-full" name="last-name" type="text" value="{{.LastName}}" />
</div>
<div>
<label for="old-password">Altes Passwort</label>
<input class="w-full" name="old-password" placeholder="***" type="password" />
</div>
<div>
<label for="password">Passwort</label>
<input class="w-full" name="password" placeholder="***" type="password" />
</div>
<div>
<label for="password2">Passwort wiederholen</label>
<input class="w-full" name="password2" placeholder="***" type="password" />
</div>
<div>
<label for="email">Emailadresse</label>
<input class="w-full" required name="email" type="text" value="{{.Email}}" />
</div>
<div>
<label for="email2">Emailadresse wiederholen</label>
<input class="w-full" required name="email2" type="text" value="{{.Email}}" />
</div>
</div>
<div class="btn-area">
<input class="action-btn" type="submit" value="Aktualisieren" hx-post="/user/update/self"
hx-target="#page-content" />
<button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
</div>
</form>
{{end}}

71
web/templates/edit-user.html
View File

@ -1,67 +1,90 @@
{{define "page-content"}}
<h2>Profil von {{.FirstName}} {{.LastName}} bearbeiten</h2>
<h2>{{.Title}}</h2>
<form class="flex flex-col gap-4" hx-encoding="multipart/form-data">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
{{template "profile-pic-template" .}}
<form>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div>
<label for="username">Benutzername</label>
<input class="w-full" name="username" type="text" value="{{.UserName}}" />
</div>
<div>
<label for="first-name">Vorname</label>
<input class="w-full" name="first-name" type="text" value="{{.FirstName}}" />
</div>
<div>
<label for="last-name">Nachname</label>
<input class="w-full" name="last-name" type="text" value="{{.LastName}}" />
<input class="w-full" required name="username" type="text" {{if lt .Role 4}}value="{{.UserName}}" {{end}} />
</div>
<div>
<label for="password">Passwort</label>
<input class="w-full" name="password" placeholder="***" type="password" />
<input class="w-full" required name="password" placeholder="***" type="password" />
</div>
<div>
<label for="password2">Passwort wiederholen</label>
<input class="w-full" name="password2" placeholder="***" type="password" />
<input class="w-full" required name="password2" placeholder="***" type="password" />
</div>
<div>
<label for="first-name">Vorname</label>
<input class="w-full" required name="first-name" type="text" {{if lt .Role 4}}value="{{.FirstName}}"
{{end}} />
</div>
<div>
<label for="last-name">Nachname</label>
<input class="w-full" required name="last-name" type="text" {{if lt .Role 4}}value="{{.LastName}}"
{{end}} />
</div>
<div>
<label for="email">Emailadresse</label>
<input class="w-full" required name="email" type="text" value="{{.Email}}" />
<input class="w-full" required name="email" type="text" {{if lt .Role 4}}value="{{.Email}}" {{end}} />
</div>
<div>
<label for="email2">Emailadresse wiederholen</label>
<input class="w-full" required name="email2" type="text" value="{{.Email}}" />
<input class="w-full" required name="email2" type="text" {{if lt .Role 4}}value="{{.Email}}" {{end}} />
</div>
</div>
{{if lt .Role 4}}
<div class="flex flex-wrap gap-4">
<div>
<input required id="author" name="role" type="radio" value="3" {{if eq .Role 3 }}checked{{end}} />
<input required id="author" name="role" type="radio" value="3" {{if eq .Role 3}}checked{{end}} />
<label for="author">Autor</label>
</div>
<div>
<input required id="editor" name="role" type="radio" value="2" {{if eq .Role 2 }}checked{{end}} />
<input required id="editor" name="role" type="radio" value="2" {{if eq .Role 2}}checked{{end}} />
<label for="editor">Redakteur</label>
</div>
<div>
<input required id="publisher" name="role" type="radio" value="1" {{if eq .Role 1 }}checked{{end}} />
<input required id="publisher" name="role" type="radio" value="1" {{if eq .Role 1}}checked{{end}} />
<label for="publisher">Herausgeber</label>
</div>
<div>
<input required id="admin" name="role" type="radio" value="0" {{if eq .Role 0 }}checked{{end}} />
<input required id="admin" name="role" type="radio" value="0" {{if eq .Role 0}}checked{{end}} />
<label for="admin">Administrator</label>
</div>
</div>
{{end}}
<div class="btn-area">
<input class="action-btn" type="submit" value="Aktualisieren" hx-post="/user/update/{{.ID}}"
hx-target="#page-content" />
<input class="action-btn" type="submit" value="{{.ButtonText}}" hx-post="{{.URL}}" hx-target="#page-content" />
<button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>
</div>
</form>
{{end}}
{{define "profile-pic-template"}}
<div class="flex items-center justify-center row-span-3 self-center" id="profile-pic-container">
<label
class="bg-slate-200 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-900 border border-slate-200 dark:border-slate-800 cursor-pointer flex flex-col h-48 items-center justify-center overflow-hidden rounded-full w-48"
for="upload-profile-pic">
{{if gt (len .Image) 0}}
<img src="/image/serve/{{.Image}}" alt="" />
{{else}}
<span class="text-2xl">+</span>
<span>Profilbild</span>
{{end}}
</label>
<input class="hidden" id="upload-profile-pic" name="upload-profile-pic" type="file"
hx-post="/user/upload-profile-pic" hx-swap="outerHTML" hx-target="#profile-pic-container" />
<input id="profile-pic-url" name="profile-pic-url" type="hidden" value="{{.Image}}" />
</div>
{{end}}

24
web/templates/editor.html
View File

@ -1,7 +1,7 @@
{{define "page-content"}}
<h2>Editor</h2>
<form id="edit-area" hx-encoding="multipart/form-data">
<form class="flex flex-col gap-4" id="edit-area" hx-encoding="multipart/form-data">
<div class="flex flex-col gap-y-1">
{{template "article-banner-template" .}}
@ -11,7 +11,7 @@
<input name="article-title" type="text" value="{{.Article.Title}}" />
</div>
<div class="grid grid-cols-1 items-center">
<div class="flex">
<label class="btn 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-swap="outerHTML" hx-target="#article-banner-container" />
@ -19,20 +19,14 @@
</div>
</div>
<div class="flex flex-col gap-y-1">
<div class="flex flex-col gap-1">
<label for="article-summary">Beschreibung</label>
<textarea name="article-summary">{{.Article.Summary}}</textarea>
</div>
<div class="flex flex-col gap-y-1">
<label for="easyMDE">Artikel</label>
<textarea id="easyMDE">{{.Content}}</textarea>
<input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
</div>
<div>
<span>Tags</span>
<div class="flex flex-wrap gap-x-4">
<div class="flex flex-wrap gap-4">
<div>
<input id="issue" name="issue" type="checkbox" {{if .Article.IsInIssue}}checked{{end}} />
<label for="issue">Orient Express</label>
@ -48,6 +42,12 @@
</div>
</div>
<div class="flex flex-col gap-1">
<label for="easyMDE">Artikel</label>
<textarea id="easyMDE">{{.Content}}</textarea>
<input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
</div>
<div class="btn-area">
<input class="action-btn" type="submit" value="Senden" hx-post="/article/{{.Action}}"
hx-target="#page-content" />
@ -90,7 +90,7 @@
{{define "article-banner-template"}}
<div id="article-banner-container">
<img src="/image/serve/{{.BannerImage}}" alt="">
<input id="article-banner-url" name="article-banner-url" type="hidden" value="{{.BannerImage}}" />
<img src="/image/serve/{{.Image}}" alt="" />
<input id="article-banner-url" name="article-banner-url" type="hidden" value="{{.Image}}" />
</div>
{{end}}

46
web/templates/first-user.html
View File

@ -1,46 +0,0 @@
{{define "page-content"}}
<h2>Erster Benutzer (Administrator)</h2>
<form>
<div class="grid grid-cols-3 gap-4">
<div>
<label for="username">Benutzername</label>
<input class="w-full" required name="username" type="text" />
</div>
<div>
<label for="password">Passwort</label>
<input class="w-full" required name="password" placeholder="***" type="password" />
</div>
<div>
<label for="password2">Passwort wiederholen</label>
<input class="w-full" required name="password2" placeholder="***" type="password" />
</div>
<div>
<label for="first-name">Vorname</label>
<input class="w-full" required name="first-name" type="text" />
</div>
<div>
<label for="last-name">Nachname</label>
<input class="w-full" required name="last-name" type="text" />
</div>
<div>
<label for="email">Emailadresse</label>
<input class="w-full" required name="email" type="text" />
</div>
<div>
<label for="email2">Emailadresse wiederholen</label>
<input class="w-full" required name="email2" type="text" />
</div>
</div>
<div class="btn-area-1">
<input class="action-btn" type="submit" value="Anlegen" hx-post="/user/add-first" hx-target="#page-content" />
</div>
</form>
{{end}}

2
web/templates/review-article.html
View File

@ -3,7 +3,7 @@
<div>
<div class="w-full" id="article-banner-container">
<img src="/image/serve/{{.BannerImage}}" alt="Banner Image">
<img src="/image/serve/{{.Image}}" alt="Banner Image">
</div>
<span>Titel</span>