arnef/nidus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 3 Activity

Stack dashboard form fields on mobile instead of breaking layout

Browse Source 
The new-calendar/new-address-book creation forms and the per-resource
share form used flex-row layouts that overflowed on narrow viewports.
Switch to flex-col on mobile, flex-row from sm: up, with inputs/buttons
going full-width below the sm breakpoint.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
arnef
2026-08-19 12:57:05 +02:00
co-authored by Copilot
parent 7d4f28de3c
commit 37399d1ceb
3 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/templates/dashboard.templ
+12 -12
View File
@@ -29,40 +29,40 @@ templ Dashboard(username string, resources []ResourceCard, sharedWithMe []Shared
@Layout("Dashboard", username) {
<h1 class="text-2xl font-semibold mb-6">Your calendars &amp; address books</h1>
<div class="flex gap-4 mb-6">
<div class="flex flex-col sm:flex-row gap-4 mb-6">
<form
class="flex items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
class="flex flex-col sm:flex-row sm:items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
hx-post="/web/resources/calendar"
hx-target="#resources"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<div>
<div class="flex-1">
<label class="block text-xs text-gray-500 mb-1">New calendar</label>
<input name="name" type="text" required pattern="[a-zA-Z0-9_-]{1,64}"
placeholder="e.g. work"
class="rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
class="w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
</div>
<button type="submit"
class="bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
class="w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
Add
</button>
</form>
<form
class="flex items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
class="flex flex-col sm:flex-row sm:items-end gap-2 bg-white rounded-lg border border-gray-200 p-4"
hx-post="/web/resources/addressbook"
hx-target="#resources"
hx-swap="outerHTML"
hx-on::after-request="if(event.detail.successful) this.reset()"
>
<div>
<div class="flex-1">
<label class="block text-xs text-gray-500 mb-1">New address book</label>
<input name="name" type="text" required pattern="[a-zA-Z0-9_-]{1,64}"
placeholder="e.g. contacts"
class="rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
class="w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm"/>
</div>
<button type="submit"
class="bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
class="w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
Add
</button>
</form>
@@ -147,7 +147,7 @@ templ ResourceCardView(r ResourceCard) {
</ul>
<form
class="flex items-end gap-2"
class="flex flex-col sm:flex-row sm:items-end gap-2"
hx-post={ shareEndpoint(r.Kind) }
hx-target={ "#resource-" + r.Kind + "-" + r.Name }
hx-swap="outerHTML"
@@ -160,13 +160,13 @@ templ ResourceCardView(r ResourceCard) {
</div>
<div>
<label class="block text-xs text-gray-500 mb-1">Permission</label>
<select name="permission" class="rounded-md border-gray-300 border px-2 py-1.5 text-sm">
<select name="permission" class="w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm">
<option value="read">read</option>
<option value="write">write</option>
</select>
</div>
<button type="submit"
class="bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
class="w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700">
Share
</button>
</form>
internal/web/templates/dashboard_templ.go
+3 -3
View File
@@ -66,7 +66,7 @@ func Dashboard(username string, resources []ResourceCard, sharedWithMe []SharedW
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<h1 class=\"text-2xl font-semibold mb-6\">Your calendars &amp; address books</h1><div class=\"flex gap-4 mb-6\"><form class=\"flex items-end gap-2 bg-white rounded-lg border border-gray-200 p-4\" hx-post=\"/web/resources/calendar\" hx-target=\"#resources\" hx-swap=\"outerHTML\" hx-on::after-request=\"if(event.detail.successful) this.reset()\"><div><label class=\"block text-xs text-gray-500 mb-1\">New calendar</label> <input name=\"name\" type=\"text\" required pattern=\"[a-zA-Z0-9_-]{1,64}\" placeholder=\"e.g. work\" class=\"rounded-md border-gray-300 border px-2 py-1.5 text-sm\"></div><button type=\"submit\" class=\"bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700\">Add</button></form><form class=\"flex items-end gap-2 bg-white rounded-lg border border-gray-200 p-4\" hx-post=\"/web/resources/addressbook\" hx-target=\"#resources\" hx-swap=\"outerHTML\" hx-on::after-request=\"if(event.detail.successful) this.reset()\"><div><label class=\"block text-xs text-gray-500 mb-1\">New address book</label> <input name=\"name\" type=\"text\" required pattern=\"[a-zA-Z0-9_-]{1,64}\" placeholder=\"e.g. contacts\" class=\"rounded-md border-gray-300 border px-2 py-1.5 text-sm\"></div><button type=\"submit\" class=\"bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700\">Add</button></form></div>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<h1 class=\"text-2xl font-semibold mb-6\">Your calendars &amp; address books</h1><div class=\"flex flex-col sm:flex-row gap-4 mb-6\"><form class=\"flex flex-col sm:flex-row sm:items-end gap-2 bg-white rounded-lg border border-gray-200 p-4\" hx-post=\"/web/resources/calendar\" hx-target=\"#resources\" hx-swap=\"outerHTML\" hx-on::after-request=\"if(event.detail.successful) this.reset()\"><div class=\"flex-1\"><label class=\"block text-xs text-gray-500 mb-1\">New calendar</label> <input name=\"name\" type=\"text\" required pattern=\"[a-zA-Z0-9_-]{1,64}\" placeholder=\"e.g. work\" class=\"w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm\"></div><button type=\"submit\" class=\"w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700\">Add</button></form><form class=\"flex flex-col sm:flex-row sm:items-end gap-2 bg-white rounded-lg border border-gray-200 p-4\" hx-post=\"/web/resources/addressbook\" hx-target=\"#resources\" hx-swap=\"outerHTML\" hx-on::after-request=\"if(event.detail.successful) this.reset()\"><div class=\"flex-1\"><label class=\"block text-xs text-gray-500 mb-1\">New address book</label> <input name=\"name\" type=\"text\" required pattern=\"[a-zA-Z0-9_-]{1,64}\" placeholder=\"e.g. contacts\" class=\"w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm\"></div><button type=\"submit\" class=\"w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700\">Add</button></form></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -397,7 +397,7 @@ func ResourceCardView(r ResourceCard) templ.Component {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</ul><form class=\"flex items-end gap-2\" hx-post=\"")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "</ul><form class=\"flex flex-col sm:flex-row sm:items-end gap-2\" hx-post=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -436,7 +436,7 @@ func ResourceCardView(r ResourceCard) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\"><div class=\"flex-1\"><label class=\"block text-xs text-gray-500 mb-1\">Username</label> <input name=\"shared_with\" type=\"text\" required class=\"w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm\"></div><div><label class=\"block text-xs text-gray-500 mb-1\">Permission</label> <select name=\"permission\" class=\"rounded-md border-gray-300 border px-2 py-1.5 text-sm\"><option value=\"read\">read</option> <option value=\"write\">write</option></select></div><button type=\"submit\" class=\"bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700\">Share</button></form></div>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\"><div class=\"flex-1\"><label class=\"block text-xs text-gray-500 mb-1\">Username</label> <input name=\"shared_with\" type=\"text\" required class=\"w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm\"></div><div><label class=\"block text-xs text-gray-500 mb-1\">Permission</label> <select name=\"permission\" class=\"w-full rounded-md border-gray-300 border px-2 py-1.5 text-sm\"><option value=\"read\">read</option> <option value=\"write\">write</option></select></div><button type=\"submit\" class=\"w-full sm:w-auto bg-indigo-600 text-white rounded-md px-3 py-1.5 text-sm font-medium hover:bg-indigo-700\">Share</button></form></div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}