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

Improve mobile layout of the dashboard, contacts, and calendar pages

Browse Source 
- Layout nav wraps gracefully on narrow screens instead of overflowing
  (username truncates, links/logout reflow).
- Dashboard resource cards and share rows wrap instead of clipping
  when names/usernames are long.
- Contacts list hides secondary columns (organization/email below
  md, phone below sm) so the name and actions stay usable on phones.
- Calendar month/week grids get a horizontally scrollable wrapper
  with a sane minimum width and smaller cell padding on mobile so the
  7-day grid stays legible instead of being squeezed unreadably thin.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
arnef
2026-08-21 09:16:01 +02:00
co-authored by Copilot
parent b2f39bd1f6
commit 9f8bfba420
9 changed files with 155 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/templates/contacts.templ
+38 -36
View File
@@ -116,43 +116,45 @@ templ ContactsList(username, book string, contacts []ContactSummary) {
</div>
</div>
<table class="w-full text-sm bg-white rounded-lg border border-gray-200">
<thead>
<tr class="text-left text-gray-400 border-b border-gray-100">
<th class="py-2 px-3 font-medium" colspan="2">Name</th>
<th class="py-2 px-3 font-medium">Organization</th>
<th class="py-2 px-3 font-medium">Phone</th>
<th class="py-2 px-3 font-medium">Email</th>
<th class="py-2 px-3 font-medium"></th>
</tr>
</thead>
<tbody>
for _, c := range contacts {
<tr class="border-b border-gray-50 hover:bg-gray-50">
<td class="py-2 px-3 w-10">
@avatar(c.PhotoDataURL, "w-8 h-8")
</td>
<td class="py-2 px-3 break-words">
<a href={ templ.URL("/web/contacts/" + book + "/" + c.ID + "/edit") } class="text-indigo-600 hover:underline">{ c.FullName }</a>
</td>
<td class="py-2 px-3 text-gray-500 break-words">{ c.Organization }</td>
<td class="py-2 px-3 text-gray-500 whitespace-nowrap">{ c.Phone }</td>
<td class="py-2 px-3 text-gray-500 break-words">{ c.Email }</td>
<td class="py-2 px-3 text-right whitespace-nowrap">
<a href={ templ.URL("/web/contacts/" + book + "/" + c.ID + "/export") } class="text-gray-500 hover:underline text-xs mr-3">Export</a>
<form method="POST" action={ templ.URL("/web/contacts/" + book + "/" + c.ID + "/delete") } class="inline" onsubmit="return confirm('Delete this contact?')">
<button type="submit" class="text-red-600 hover:underline text-xs">Delete</button>
</form>
</td>
<div class="overflow-x-auto rounded-lg border border-gray-200 bg-white">
<table class="w-full text-sm">
<thead>
<tr class="text-left text-gray-400 border-b border-gray-100">
<th class="py-2 px-3 font-medium" colspan="2">Name</th>
<th class="hidden md:table-cell py-2 px-3 font-medium">Organization</th>
<th class="hidden sm:table-cell py-2 px-3 font-medium">Phone</th>
<th class="hidden md:table-cell py-2 px-3 font-medium">Email</th>
<th class="py-2 px-3 font-medium"></th>
</tr>
}
if len(contacts) == 0 {
<tr>
<td colspan="6" class="py-6 px-3 text-center text-gray-400">No contacts yet — add one above.</td>
</tr>
}
</tbody>
</table>
</thead>
<tbody>
for _, c := range contacts {
<tr class="border-b border-gray-50 hover:bg-gray-50">
<td class="py-2 px-3 w-10">
@avatar(c.PhotoDataURL, "w-8 h-8")
</td>
<td class="py-2 px-3 break-words">
<a href={ templ.URL("/web/contacts/" + book + "/" + c.ID + "/edit") } class="text-indigo-600 hover:underline">{ c.FullName }</a>
</td>
<td class="hidden md:table-cell py-2 px-3 text-gray-500 break-words">{ c.Organization }</td>
<td class="hidden sm:table-cell py-2 px-3 text-gray-500 whitespace-nowrap">{ c.Phone }</td>
<td class="hidden md:table-cell py-2 px-3 text-gray-500 break-words">{ c.Email }</td>
<td class="py-2 px-1 sm:px-3 text-right whitespace-nowrap">
<a href={ templ.URL("/web/contacts/" + book + "/" + c.ID + "/export") } class="text-gray-500 hover:underline text-xs mr-2 sm:mr-3">Export</a>
<form method="POST" action={ templ.URL("/web/contacts/" + book + "/" + c.ID + "/delete") } class="inline" onsubmit="return confirm('Delete this contact?')">
<button type="submit" class="text-red-600 hover:underline text-xs">Delete</button>
</form>
</td>
</tr>
}
if len(contacts) == 0 {
<tr>
<td colspan="6" class="py-6 px-3 text-center text-gray-400">No contacts yet — add one above.</td>
</tr>
}
</tbody>
</table>
</div>
}
}