Skip to content

Commit 90a2163

Browse files
AugustinMauroyAugustinMauroy
committed
fix(admin): align notifcation on ticket list, wrap assign scope button, make failure case of tasks red (#1051)
- add color to differentiate error/success - remove layout shift when there are unread notifications <img width="331" src="https://github.com/user-attachments/assets/2768de0f-7a73-44cc-8891-68e65dff374a" /> ![iPhone-14-Plus-jsr test](https://github.com/user-attachments/assets/854da8a8-6599-4fb6-bc56-146fef1cd9b7) ![Macbook-Air-jsr test](https://github.com/user-attachments/assets/87d9f62e-ad92-4555-97a5-c641088d8ccd)
1 parent 5448ce4 commit 90a2163

File tree

4 files changed

+78
-61
lines changed

4 files changed

+78
-61
lines changed

‎frontend/routes/admin/(_components)/URLQuerySearch.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function URLQuerySearch(
1010
},
1111
) {
1212
return (
13-
<form method="GET" class="flex mt-4 flex-grow gap-4" ref={formRef}>
13+
<form method="GET" class="flex flex-grow gap-2 md:gap-4 mt-4" ref={formRef}>
1414
{children}
1515
<input
1616
type="text"

‎frontend/routes/admin/publishingTasks.tsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,22 @@ export default define.page<typeof handler>(function PublishingTasks({
5050
ID
5151
</CopyButton>
5252
<div>
53-
{publishingTask.status}
54-
<br />
53+
<span
54+
class={`font-bold ${
55+
publishingTask.status === "failure"
56+
? "text-red-500"
57+
: "text-green-500"
58+
}`}
59+
>
60+
{publishingTask.status}
61+
</span>
5562
{publishingTask.status === "failure" && publishingTask.error &&
56-
`Error ${publishingTask.error.code}: ${publishingTask.error.message}`}
63+
(
64+
<span class="font-mono">
65+
<br />Error {publishingTask.error.code}:{" "}
66+
{publishingTask.error.message}
67+
</span>
68+
)}
5769
</div>
5870
</TableData>
5971
<TableData flex>
@@ -93,7 +105,7 @@ export default define.page<typeof handler>(function PublishingTasks({
93105
<TableData>
94106
<a
95107
href={`/@${publishingTask.packageScope}/${publishingTask.packageName}/${publishingTask.packageVersion}`}
96-
class="underline underline-offset-2"
108+
class="underline underline-offset-2 font-mono"
97109
>
98110
{publishingTask.packageVersion}
99111
</a>

‎frontend/routes/admin/scopes/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default define.page<typeof handler>(function Scopes({ data, url }) {
1414
return (
1515
<div class="mb-20">
1616
<AdminNav currentTab="scopes" />
17-
<div class="flex gap-4">
17+
<div class="flex gap-2 md:gap-4 flex-wrap">
1818
<URLQuerySearch query={data.query} />
1919
<a class="button-primary mt-4" href="/admin/scopes/assign">
2020
Assign Scope <TbArrowRight />

‎frontend/routes/admin/tickets.tsx

+60-55
Original file line numberDiff line numberDiff line change
@@ -41,63 +41,68 @@ export default define.page<typeof handler>(function Tickets({
4141
sortBy={data.sortBy}
4242
currentUrl={url}
4343
>
44-
{data.tickets.map((ticket) => (
45-
<TableRow key={ticket.id}>
46-
<TableData>
47-
<div class="flex items-center gap-1.5">
48-
{ticket.messages.at(-1)!.author.id === ticket.creator.id &&
49-
!ticket.closed && (
50-
<div class="rounded-full bg-orange-600 h-2.5 w-2.5" />
51-
)}
52-
<div
53-
class={`${
54-
ticket.closed ? "bg-green-400" : "bg-orange-400"
55-
} rounded-full p-1`}
56-
>
57-
{ticket.closed
58-
? <TbCheck class="text-white" />
59-
: <TbClock class="text-white" />}
44+
{data.tickets.map((ticket) => {
45+
const isNotification =
46+
ticket.messages.at(-1)!.author.id === ticket.creator.id &&
47+
!ticket.closed;
48+
49+
return (
50+
<TableRow key={ticket.id}>
51+
<TableData>
52+
<div class="flex items-center gap-1.5">
53+
{isNotification && (
54+
<div class="rounded-full bg-orange-600 h-2.5 w-2.5" />
55+
)}
56+
<div
57+
class={`${
58+
ticket.closed ? "bg-green-400" : "bg-orange-400"
59+
} ${!isNotification && "ml-4"} rounded-full p-1`}
60+
>
61+
{ticket.closed
62+
? <TbCheck class="text-white" />
63+
: <TbClock class="text-white" />}
64+
</div>
65+
<span>{ticket.closed ? "closed" : "open"}</span>
6066
</div>
61-
<span>{ticket.closed ? "closed" : "open"}</span>
62-
</div>
63-
</TableData>
64-
<TableData>
65-
<a
66-
href={`/admin/users?search=${ticket.creator.id}`}
67-
class="underline underline-offset-2"
67+
</TableData>
68+
<TableData>
69+
<a
70+
href={`/admin/users?search=${ticket.creator.id}`}
71+
class="underline underline-offset-2"
72+
>
73+
{ticket.creator.name}
74+
</a>
75+
</TableData>
76+
<TableData>
77+
<a href={`/ticket/${ticket.id}`}>{ticket.id}</a>
78+
</TableData>
79+
<TableData>
80+
{ticket.kind.replaceAll("_", " ")}
81+
</TableData>
82+
<TableData
83+
title={new Date(ticket.updatedAt).toISOString().slice(
84+
0,
85+
10,
86+
)}
87+
align="right"
88+
>
89+
{twas(new Date(ticket.updatedAt).getTime())}
90+
</TableData>
91+
<TableData
92+
title={new Date(ticket.createdAt).toISOString().slice(
93+
0,
94+
10,
95+
)}
96+
align="right"
6897
>
69-
{ticket.creator.name}
70-
</a>
71-
</TableData>
72-
<TableData>
73-
<a href={`/ticket/${ticket.id}`}>{ticket.id}</a>
74-
</TableData>
75-
<TableData>
76-
{ticket.kind.replaceAll("_", " ")}
77-
</TableData>
78-
<TableData
79-
title={new Date(ticket.updatedAt).toISOString().slice(
80-
0,
81-
10,
82-
)}
83-
align="right"
84-
>
85-
{twas(new Date(ticket.updatedAt).getTime())}
86-
</TableData>
87-
<TableData
88-
title={new Date(ticket.createdAt).toISOString().slice(
89-
0,
90-
10,
91-
)}
92-
align="right"
93-
>
94-
{twas(new Date(ticket.createdAt).getTime())}
95-
</TableData>
96-
<TableData align="right">
97-
<a class="button-primary" href={`/ticket/${ticket.id}`}>view</a>
98-
</TableData>
99-
</TableRow>
100-
))}
98+
{twas(new Date(ticket.createdAt).getTime())}
99+
</TableData>
100+
<TableData align="right">
101+
<a class="button-primary" href={`/ticket/${ticket.id}`}>view</a>
102+
</TableData>
103+
</TableRow>
104+
);
105+
})}
101106
</Table>
102107
</div>
103108
);

0 commit comments

Comments
 (0)