tailwind.config.js

@@ -7,5 +7,4 @@ module.exports = {
     plugins: [
         require('@tailwindcss/typography')
     ],
-    darkMode: 'selector',
 }

web/static/css/input.css

@@ -2,21 +2,30 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+    width: 800px;
+    @apply mx-auto text-slate-900;
+}
+
 h2 {
     @apply font-bold mb-2 text-2xl;
 }
 
-h3 {
+form {
-    @apply font-bold mb-2 text-xl;
+    @apply flex flex-col gap-y-3;
+}
+
+input[type="file"] {
+    @apply border rounded-md w-full;
 }
 
 input[type="password"],
 input[type="text"] {
-    @apply bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 h-8 rounded-md;
+    @apply border h-8 rounded-md;
 }
 
 textarea {
-    @apply bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 h-32 rounded-md;
+    @apply border h-32 rounded-md;
 }
 
 .btn-area {
@@ -24,41 +33,9 @@ textarea {
 }
 
 .btn {
-    @apply bg-slate-200 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-900 border border-slate-200 dark:border-slate-800 my-2 px-3 py-2 rounded-md w-full;
+    @apply bg-slate-200 border my-2 px-3 py-2 rounded-md w-full hover:bg-slate-100;
 }
 
 .action-btn {
-    @apply bg-slate-800 dark:bg-slate-200 hover:bg-slate-700 dark:hover:bg-slate-300 my-2 px-3 py-2 rounded-md text-slate-50 dark:text-slate-950 w-full;
+    @apply bg-slate-800 border my-2 px-3 py-2 rounded-md text-slate-50 w-full hover:bg-slate-700;
-}
-
-.EasyMDEContainer .CodeMirror {
-    @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
-}
-
-.EasyMDEContainer .editor-toolbar > * {
-    @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
-}
-
-.EasyMDEContainer .CodeMirror-fullscreen {
-    @apply bg-slate-50 dark:bg-slate-950
-}
-
-.editor-toolbar {
-    @apply border border-slate-200
-}
-
-.editor-toolbar.fullscreen {
-    @apply bg-slate-50 dark:bg-slate-950
-}
-
-.editor-preview {
-    @apply bg-slate-50 dark:bg-slate-950
 }

web/templates/hub.html

@@ -4,49 +4,49 @@
 
     {{if lt . 4}}
     <div class="mb-3">
-        <h2>Artikel</h2>
+        <h2>Autor</h2>
         <div class="grid 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">
+            <button class="btn" hx-get="/user/edit/self" hx-target="#page-content">Profil bearbeiten</button>
+        </div>
+    </div>
+    {{end}}
+
+    {{if lt . 3}}
+    <div class="mb-3">
+        <h2>Redakteur</h2>
+        <div class="grid grid-cols-2 gap-x-4 gap-y-2">
+            <button class="btn" hx-get="/article/all-unpublished" hx-target="#page-content">
                 Unveröffentlichte Artikel
-            </button>{{end}}
+            </button>
-            {{if lt . 2}}<button class="btn" hx-get="/article/all-published" hx-target="#page-content">
+            <button class="btn" hx-get="/tag/create" hx-target="#page-content">Neuer Tag</button>
-                Artikel löschen
-            </button>{{end}}
-            {{if lt . 3}}<button class="btn" hx-get="/tag/create" hx-target="#page-content">Neuer Tag</button>{{end}}
         </div>
     </div>
     {{end}}
 
     {{if lt . 2}}
     <div class="mb-3">
-        <h2>Ausgabe</h2>
+        <h2>Herausgeber</h2>
         <div class="grid grid-cols-2 gap-x-4 gap-y-2">
             <button class="btn" hx-get="/issue/this" hx-target="#page-content">Diese Ausgabe</button>
+            <button class="btn" hx-get="/article/all-published" hx-target="#page-content">Artikel löschen</button>
             <form class="flex" hx-encoding="multipart/form-data">
                 <label class="btn 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>
         </div>
-        {{end}}
     </div>
+    {{end}}
 
-    {{if lt . 4}}
+    {{if eq . 0}}
     <div class="mb-3">
-        <h2>Benutzer</h2>
+        <h2>Administrator</h2>
         <div class="grid 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>
+            <button class="btn" hx-get="/user/create" hx-target="#page-content">Benutzer hinzufügen</button>
-            {{if eq . 0}}<button class="btn" hx-get="/user/create" hx-target="#page-content">
+            <button class="btn" hx-get="/user/show-all/edit" hx-target="#page-content">Benutzer bearbeiten</button>
-                Benutzer hinzufügen
+            <button class="btn" hx-get="/user/show-all/delete" hx-target="#page-content">Benutzer löschen</button>
-            </button>{{end}}
-            {{if eq . 0}}<button class="btn" hx-get="/user/show-all/edit" hx-target="#page-content">
-                Benutzer bearbeiten
-            </button>{{end}}
-            {{if eq . 0}}<button class="btn" hx-get="/user/show-all/delete" hx-target="#page-content">
-                Benutzer löschen
-            </button>{{end}}
         </div>
     </div>
     {{end}}

web/templates/index.html

@@ -5,26 +5,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Orient Editor</title>
-
     <link href="/web/static/css/style.css" rel="stylesheet">
     <link rel="stylesheet" href="https://unpkg.com/easymde/dist/easymde.min.css">
 </head>
 
-<body style="width: 800px;"
+<body class="flex flex-col justify-between min-h-screen bg-slate-50">
-    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">
     <header class="my-8">
         <h1 class="font-bold text-4xl text-center">Orient Editor</h1>
-
-        <div class="ml-4">
-            <label class="cursor-pointer flex items-center relative" for="theme-toggle">
-                <div class="bg-slate-200 dark:bg-slate-800 block h-6 w-12 rounded-full"></div>
-                <div
-                    class="absolute bg-slate-800 dark:bg-slate-50 dot left-1 top-1 h-4 w-4 rounded-full transform transition">
-                </div>
-                <span class="ml-2">Dunkel</span>
-            </label>
-            <input type="checkbox" id="theme-toggle" class="sr-only">
-        </div>
     </header>
 
     <main class="mx-4">
@@ -33,44 +20,18 @@
         </div>
     </main>
 
-    <footer class="text-center text-gray-500 my-8">
+    <footer class="text-center text-gray-500 dark:text-gray-400 my-8">
         <p>
             &copy; 2024 Jason Streifling. Alle Rechte vorbehalten.
         </p>
         <p>
-            v0.9.0 - <strong>Hinweis:</strong> Diese Software befindet sich noch in der Entwicklung und kann Fehler
+            v0.8.3 - <strong>Hinweis:</strong> Diese Software befindet sich noch in der Entwicklung und kann Fehler
             enthalten.
         </p>
     </footer>
 
     <script src="https://unpkg.com/htmx.org@2.0.2"></script>
     <script src="https://unpkg.com/easymde/dist/easymde.min.js"></script>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const toggleSwitch = document.getElementById('theme-toggle');
-            const dot = document.querySelector('.dot');
-
-            if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-                document.documentElement.classList.add('dark')
-                toggleSwitch.checked = true;
-                dot.classList.add('translate-x-6');
-            } else {
-                document.documentElement.classList.remove('dark')
-            }
-
-            toggleSwitch.addEventListener('change', () => {
-                if (toggleSwitch.checked) {
-                    document.documentElement.classList.add('dark');
-                    localStorage.theme = 'dark';
-                    dot.classList.add('translate-x-6');
-                } else {
-                    document.documentElement.classList.remove('dark');
-                    localStorage.theme = 'light';
-                    dot.classList.remove('translate-x-6');
-                }
-            });
-        });
-    </script>
 </body>
 
 </html>