From 4004bcb8f03b0ca3f076fafac84efe9f1fa83b30 Mon Sep 17 00:00:00 2001
From: Jason Streifling <jason@streifling.com>
Date: Mon, 9 Sep 2024 22:03:31 +0200
Subject: [PATCH] Make interface responsive

---
 web/static/css/input.css     | 2 +-
 web/templates/add-user.html  | 4 ++--
 web/templates/edit-self.html | 2 +-
 web/templates/edit-user.html | 4 ++--
 web/templates/hub.html       | 6 +++---
 web/templates/index.html     | 6 +++---
 web/templates/login.html     | 6 ++++--
 7 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/static/css/input.css b/web/static/css/input.css
index 815ea0b..e2fe988 100644
--- a/web/static/css/input.css
+++ b/web/static/css/input.css
@@ -20,7 +20,7 @@ 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 {
diff --git a/web/templates/add-user.html b/web/templates/add-user.html
index a3c9cf7..d6aeae9 100644
--- a/web/templates/add-user.html
+++ b/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>
diff --git a/web/templates/edit-self.html b/web/templates/edit-self.html
index ee4bdf0..334da84 100644
--- a/web/templates/edit-self.html
+++ b/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}}" />
diff --git a/web/templates/edit-user.html b/web/templates/edit-user.html
index d998f7b..335f7eb 100644
--- a/web/templates/edit-user.html
+++ b/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>
diff --git a/web/templates/hub.html b/web/templates/hub.html
index 451d645..43f9e05 100644
--- a/web/templates/hub.html
+++ b/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
diff --git a/web/templates/index.html b/web/templates/index.html
index 2547389..74d950c 100644
--- a/web/templates/index.html
+++ b/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>
diff --git a/web/templates/login.html b/web/templates/login.html
index d542120..bfba131 100644
--- a/web/templates/login.html
+++ b/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}}