cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(ui): modernise application tracking and right context

Browse Source
This commit is contained in:
cesnimda
2026-11-03 10:04:00 +01:00
parent dc93b589c9
commit 98e9502af5
65 changed files with 1543 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/JobTable.tsx
+5 -5
View File
@@ -491,7 +491,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
</Box>
) : null}
{isMobile ? (
<Paper variant="outlined" sx={{ mt: 2, p: 1.25, borderRadius: 2.5, boxShadow: "none" }}>
<Box sx={{ mt: 2, pb: 2, borderBottom: 1, borderColor: "divider", minWidth: 0 }}>
<Stack spacing={1.1}>
<TextField
label={t("jobTableSearch")}
@@ -572,9 +572,9 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
</Box>
{!boardView ? densityControl : null}
</Stack>
</Paper>
</Box>
) : (
<Paper variant="outlined" sx={{ display: "flex", gap: 1.5, alignItems: "center", mt: 2, p: 1.5, flexWrap: "wrap", borderRadius: 2.5, boxShadow: "none" }}>
<Box sx={{ display: "flex", gap: 1.5, alignItems: "center", mt: 2, pb: 2, flexWrap: "wrap", borderBottom: 1, borderColor: "divider", minWidth: 0 }}>
<TextField
label={t("jobTableSearch")}
value={search}
@@ -627,7 +627,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
{!boardView && !isMobile ? <Tooltip title={t("jobTableColumns")}><IconButton aria-label={t("jobTableColumns")} onClick={(e) => setColumnsAnchor(e.currentTarget)}><ViewColumnIcon /></IconButton></Tooltip> : null}
{!boardView ? densityControl : null}
</Box>
</Paper>
</Box>
)}
{!boardView && selectedIds.length > 0 ? (
@@ -674,7 +674,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
sx={{
mt: 1.5,
overflow: "hidden",
borderRadius: 2.5,
borderRadius: 1,
border: "1px solid",
borderColor: "divider",
boxShadow: "none",
job-tracker-ui/src/components/KanbanBoard.tsx
+9 -5
View File
@@ -214,6 +214,9 @@ export default function KanbanBoard({ refreshToken = 0, onResultCount }: { refre
{!jobsResource.loading && !jobsResource.refreshing && !jobsResource.error ? (
<Box
role="region"
aria-label={t("jobsBoardView")}
tabIndex={0}
sx={{
display: { xs: "flex", lg: "grid" },
width: "100%",
@@ -226,6 +229,7 @@ export default function KanbanBoard({ refreshToken = 0, onResultCount }: { refre
scrollSnapType: { xs: "x mandatory", lg: "none" },
pb: { xs: 1, lg: 0 },
WebkitOverflowScrolling: "touch",
"&:focus-visible": { outline: "3px solid", outlineColor: "focus.main", outlineOffset: -3 },
}}
>
{columns.map(({ key, label, droppable }) => {
@@ -260,7 +264,7 @@ export default function KanbanBoard({ refreshToken = 0, onResultCount }: { refre
onDrop={() => { if (droppable) void onDropTo(key as PipelineGroup); }}
sx={{
p: 1.25,
borderRadius: 2.5,
borderRadius: 1,
minHeight: 220,
flex: { xs: "0 0 min(85vw, 340px)", lg: "none" },
scrollSnapAlign: { xs: "start", lg: "none" },
@@ -269,7 +273,7 @@ export default function KanbanBoard({ refreshToken = 0, onResultCount }: { refre
outline: isActiveTarget ? "2px solid" : "none",
outlineColor: droppable ? "primary.main" : "error.main",
outlineOffset: 2,
backgroundColor: isActiveTarget && droppable ? "action.hover" : "background.paper",
backgroundColor: isActiveTarget && droppable ? "action.hover" : "background.default",
transition: "background-color .15s, border-color .15s, outline-color .15s",
"&:focus-visible": { outline: "3px solid", outlineColor: "focus.main", outlineOffset: 2 },
}}
@@ -316,11 +320,11 @@ export default function KanbanBoard({ refreshToken = 0, onResultCount }: { refre
onDragEnd={() => { setDragJobId(null); setDragOverColumn(null); }}
sx={{
cursor: "grab",
borderRadius: 2,
borderRadius: 1,
border: "1px solid",
borderColor: "divider",
borderLeft: `3px solid ${cardColor}`,
backgroundColor: "background.elevated",
borderInlineStart: `3px solid ${cardColor}`,
backgroundColor: "background.paper",
boxShadow: "none",
transition: "border-color .15s, background-color .15s",
outline: dragJobId === j.id ? "2px solid" : "none",