Make interface responsive

This commit is contained in:
Jason Streifling 2024-09-09 22:03:31 +02:00
parent 9e0182ed03
commit 4004bcb8f0
7 changed files with 16 additions and 14 deletions

View File

@ -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 {

View File

@ -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>

View File

@ -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}}" />

View File

@ -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>

View File

@ -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

View File

@ -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>

View File

@ -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}}