Merge branch 'devel'

web/static/css/input.css

@@ -20,7 +20,11 @@ textarea {
 }
 
 .btn-area {
-    @apply flex gap-4 mt-4;
+    @apply grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 mt-4;
+}
+
+.btn-area-3 {
+    @apply grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-1 mt-4;
 }
 
 .btn {

web/templates/add-tag.html

@@ -2,7 +2,7 @@
 <h2>Neuer Tag</h2>
 
 <form>
-    <input required name="tag" placeholder="Tag eingeben" type="text" />
+    <input class="w-full" name="tag" placeholder="Tag eingeben" required type="text" />
     <div class="btn-area">
         <input class="action-btn" type="submit" value="Anlegen" hx-post="/tag/add" hx-target="#page-content" />
         <button class="btn" hx-get="/hub" hx-target="#page-content">Abbrechen</button>

web/templates/add-user.html

@@ -2,7 +2,7 @@
 <h2>Neuer Benutzer</h2>
 
 <form>
-    <div class="grid grid-cols-3 gap-4">
+    <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}}" />
@@ -25,7 +25,7 @@
         </div>
     </div>
 
-    <div class="flex gap-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}} />
             <label for="author">Autor</label>

web/templates/edit-self.html

@@ -2,7 +2,7 @@
 <h2>Profil bearbeiten</h2>
 
 <form>
-    <div class="grid grid-cols-3 gap-4">
+    <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}}" />

web/templates/edit-user.html

@@ -2,7 +2,7 @@
 <h2>Profil von {{.FirstName}} {{.LastName}} bearbeiten</h2>
 
 <form>
-    <div class="grid grid-cols-3 gap-4">
+    <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}}" />
@@ -29,7 +29,7 @@
         </div>
     </div>
 
-    <div class="flex gap-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}} />
             <label for="author">Autor</label>

web/templates/hub.html

@@ -5,7 +5,7 @@
     {{if lt . 4}}
     <div class="mb-3">
         <h2>Artikel</h2>
-        <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
             <button class="btn" hx-get="/article/write" hx-target="#page-content">Artikel schreiben</button>
             <button class="btn" hx-get="/article/all-rejected" hx-target="#page-content">Abgelehnte Artikel</button>
             {{if lt . 3}}<button class="btn" hx-get="/article/all-unpublished" hx-target="#page-content">
@@ -22,7 +22,7 @@
     {{if lt . 2}}
     <div class="mb-3">
         <h2>Ausgabe</h2>
-        <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+        <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>
@@ -36,7 +36,7 @@
     {{if lt . 4}}
     <div class="mb-3">
         <h2>Benutzer</h2>
-        <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2">
             <button class="btn" hx-get="/user/edit/self" hx-target="#page-content">Mein Profil bearbeiten</button>
             {{if eq . 0}}<button class="btn" hx-get="/user/create" hx-target="#page-content">
                 Benutzer hinzufügen

web/templates/index.html

@@ -10,8 +10,8 @@
     <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
 </head>
 
-<body style="width: 800px;"
-    class="bg-slate-50 dark:bg-slate-950 flex flex-col justify-between min-h-screen mx-auto text-slate-900 dark:text-slate-100">
+<body
+    class="bg-slate-50 dark:bg-slate-950 container flex flex-col justify-between max-w-screen-lg min-h-screen mx-auto text-slate-900 dark:text-slate-100">
     <header class="my-8">
         <h1 class="font-bold text-4xl text-center">Orient Editor</h1>
 
@@ -38,7 +38,7 @@
             &copy; 2024 Jason Streifling. Alle Rechte vorbehalten.
         </p>
         <p>
-            v0.9.1 - <strong>Hinweis:</strong> Diese Software befindet sich noch in der Entwicklung und kann Fehler
+            v0.10.0 - <strong>Hinweis:</strong> Diese Software befindet sich noch in der Entwicklung und kann Fehler
             enthalten.
         </p>
     </footer>

web/templates/login.html

@@ -2,11 +2,13 @@
 <h2>Anmeldung</h2>
 
 <form>
-    <div class="btn-area">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 my-1">
         <input class="w-full" name="username" placeholder="Benutzername" type="text" />
         <input class="w-full" name="password" placeholder="Passwort" type="password" />
     </div>
 
-    <input class="action-btn" type="submit" value="Anmelden" hx-post="/login" hx-target="#page-content" />
+    <div class="mt-2">
+        <input class="action-btn" type="submit" value="Anmelden" hx-post="/login" hx-target="#page-content" />
+    </div>
 </form>
 {{end}}

web/templates/rework-article.html

@@ -15,7 +15,7 @@
     <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" />
+        <input id="article-content" name="article-content" type="hidden" value="{{.Content}}" />
     </div>
 
     <div>
@@ -44,8 +44,6 @@
 </form>
 
 <script>
-    document.getElementById('article-content').value = easyMDE.value();
-
     var easyMDE = new EasyMDE({
         element: document.getElementById('easyMDE'),
         hideIcons: ['image'],

web/templates/to-be-deleted.html

@@ -3,24 +3,24 @@
 
 <div>
     <span>Titel</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
         {{.Title}}
     </div>
 
     <span>Beschreibung</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
         {{.Description}}
     </div>
 
     <span>Artikel</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
-        <div class="prose">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+        <div class="prose text-slate-900 dark:text-slate-100">
             {{.Content}}
         </div>
     </div>
 
     <span>Tags</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
         {{range .Tags}}
         {{.Name}}
         <br>

web/templates/to-be-published.html

@@ -3,24 +3,24 @@
 
 <div>
     <span>Titel</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
         {{.Article.Title}}
     </div>
 
     <span>Beschreibung</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
         {{.Article.Description}}
     </div>
 
     <span>Artikel</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
         <div class="prose">
             {{.Content}}
         </div>
     </div>
 
     <span>Tags</span>
-    <div class="bg-white border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
+    <div class="border border-slate-200 dark:border-slate-800 mb-3 px-2 py-2 rounded-md w-full">
         {{if .Article.IsInIssue}}
         <span>Orient Express</span>
         <br>
@@ -31,7 +31,7 @@
         {{end}}
     </div>
 
-    <div class="btn-area">
+    <div class="btn-area-3">
         <input class="action-btn" type="submit" value="Veröffentlichen" hx-get="/article/publish/{{.Article.ID}}"
             hx-target="#page-content" />
         <input class="btn" type="submit" value="Ablehnen" hx-get="/article/reject/{{.Article.ID}}"