fix: mobile responsiveness for all admin pages
- DataTable: overflow-x-auto on table wrapper (affects users, rooms, tickets) - Radio: overflow-x-auto wrappers around all 3 tables (shouts, applications, schedules) - Catalog items: responsive grids (grid-cols-1 sm:grid-cols-3) in Add/Edit dialogs - Catalog tabs: TabsList overflow-x-auto for narrow screens - Import clone: pagination flex-wrap to prevent overlap on small screens
This commit is contained in:
openhands committed
1 parent
d189bb5af4
commit
827595ef00
5 files changed
+1504
-1478
No files matched your search
@@ -69,7 +69,7 @@ export function CatalogDetailTabs({
|
||||
}: CatalogDetailTabsProps) {
|
||||
return (
|
||||
<Tabs defaultValue="settings">
|
||||
<TabsList>
|
||||
<TabsList className="overflow-x-auto flex-nowrap w-full">
|
||||
<TabsTrigger value="settings" className="gap-2">
|
||||
<Settings className="h-4 w-4" />
|
||||
Settings
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -876,7 +876,7 @@ function FurniGrid({ source }: FurniGridProps) {
|
||||
|
||||
{/* Pagination */}
|
||||
{total > PER_PAGE && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-between flex-wrap gap-2">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Page {page} / {lastPage}
|
||||
</span>
|
||||
|
||||
+106
-109
@@ -34,7 +34,6 @@ type Schedule = {
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
|
||||
function formatTime(d: Date | null): string {
|
||||
return d ? d.toISOString().slice(11, 16) : "\u2014";
|
||||
}
|
||||
@@ -108,22 +107,14 @@ export default async function AdminRadioPage() {
|
||||
return (
|
||||
<main>
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard
|
||||
label={t("shouts")}
|
||||
value={shouts.length}
|
||||
icon="📣"
|
||||
/>
|
||||
<StatusCard label={t("shouts")} value={shouts.length} icon="📣" />
|
||||
<StatusCard
|
||||
label={t("pendingApplications")}
|
||||
value={pendingApps}
|
||||
state={pendingApps > 0 ? "warn" : "ok"}
|
||||
icon="📝"
|
||||
/>
|
||||
<StatusCard
|
||||
label={t("schedules")}
|
||||
value={schedules.length}
|
||||
icon="🗓️"
|
||||
/>
|
||||
<StatusCard label={t("schedules")} value={schedules.length} icon="🗓️" />
|
||||
<StatusCard
|
||||
label={t("activeSchedules")}
|
||||
value={activeSchedules}
|
||||
@@ -141,39 +132,41 @@ export default async function AdminRadioPage() {
|
||||
{t("noShouts")}
|
||||
</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(s.id)}
|
||||
</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(s.createdAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("deleteShout")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("message")}</th>
|
||||
<th>{t("posted")}</th>
|
||||
<th />
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{shouts.map((s) => (
|
||||
<tr key={String(s.id)}>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
|
||||
{String(s.id)}
|
||||
</td>
|
||||
<td>{String(s.userId)}</td>
|
||||
<td>{s.message}</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(s.createdAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<td>
|
||||
<form action={deleteShout}>
|
||||
<input type="hidden" name="id" value={String(s.id)} />
|
||||
<button type="submit" className="btn btn-danger">
|
||||
{t("deleteShout")}
|
||||
</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -186,42 +179,44 @@ export default async function AdminRadioPage() {
|
||||
{t("noApplications")}
|
||||
</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("realName")}</th>
|
||||
<th>{t("age")}</th>
|
||||
<th>{t("style")}</th>
|
||||
<th>Discord</th>
|
||||
<th>{t("status")}</th>
|
||||
<th>{t("applied")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applications.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td>{String(a.id)}</td>
|
||||
<td>{String(a.userId)}</td>
|
||||
<td>{a.realName}</td>
|
||||
<td>{a.age}</td>
|
||||
<td>{a.musicStyle ?? "\u2014"}</td>
|
||||
<td>{a.discordUsername ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{a.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(a.createdAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("realName")}</th>
|
||||
<th>{t("age")}</th>
|
||||
<th>{t("style")}</th>
|
||||
<th>Discord</th>
|
||||
<th>{t("status")}</th>
|
||||
<th>{t("applied")}</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applications.map((a) => (
|
||||
<tr key={String(a.id)}>
|
||||
<td>{String(a.id)}</td>
|
||||
<td>{String(a.userId)}</td>
|
||||
<td>{a.realName}</td>
|
||||
<td>{a.age}</td>
|
||||
<td>{a.musicStyle ?? "\u2014"}</td>
|
||||
<td>{a.discordUsername ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${statusBadgeClass(a.status) === "ok" ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : statusBadgeClass(a.status) === "danger" ? "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-accent)]/18 text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{a.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-sm theme-text-muted dark:theme-text-muted">
|
||||
{formatDate(a.createdAt, "datetime", "\u2014")}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -234,38 +229,40 @@ export default async function AdminRadioPage() {
|
||||
{t("noSchedules")}
|
||||
</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("day")}</th>
|
||||
<th>{t("start")}</th>
|
||||
<th>{t("end")}</th>
|
||||
<th>{t("show")}</th>
|
||||
<th>{t("active")}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{schedules.map((sc) => (
|
||||
<tr key={String(sc.id)}>
|
||||
<td>{String(sc.id)}</td>
|
||||
<td>{String(sc.userId)}</td>
|
||||
<td>{sc.day}</td>
|
||||
<td>{formatTime(sc.startTime)}</td>
|
||||
<td>{formatTime(sc.endTime)}</td>
|
||||
<td>{sc.showName ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{sc.isActive ? t("active") : t("inactive")}
|
||||
</span>
|
||||
</td>
|
||||
<div className="overflow-x-auto">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>{t("user")}</th>
|
||||
<th>{t("day")}</th>
|
||||
<th>{t("start")}</th>
|
||||
<th>{t("end")}</th>
|
||||
<th>{t("show")}</th>
|
||||
<th>{t("active")}</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{schedules.map((sc) => (
|
||||
<tr key={String(sc.id)}>
|
||||
<td>{String(sc.id)}</td>
|
||||
<td>{String(sc.userId)}</td>
|
||||
<td>{sc.day}</td>
|
||||
<td>{formatTime(sc.startTime)}</td>
|
||||
<td>{formatTime(sc.endTime)}</td>
|
||||
<td>{sc.showName ?? "\u2014"}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${sc.isActive ? "bg-[var(--admin-success-subtle)] text-[var(--admin-text)]" : "bg-[var(--admin-error-subtle)] text-[var(--admin-text)]"}`}
|
||||
>
|
||||
{sc.isActive ? t("active") : t("inactive")}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in new issue
Block a user