jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(media-request-list): improve responsive styles (#2543)

Browse Source
This commit is contained in:
Meier Lukas
2025-03-08 23:54:57 +01:00
committed by GitHub
parent 4472c04967
commit 9e48f438b4
1 changed files with 106 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
packages/widgets/src/media-requests/list/component.tsx
View File

@@ -16,6 +16,7 @@ export default function MediaServerWidget({
integrationIds, integrationIds,
isEditMode, isEditMode,
options, options,
width,
}: WidgetComponentProps<"mediaRequests-requestList">) { }: WidgetComponentProps<"mediaRequests-requestList">) {
const t = useScopedI18n("widget.mediaRequests-requestList"); const t = useScopedI18n("widget.mediaRequests-requestList");
const [mediaRequests] = clientApi.widget.mediaRequests.getLatestRequests.useSuspenseQuery( const [mediaRequests] = clientApi.widget.mediaRequests.getLatestRequests.useSuspenseQuery(
@@ -59,19 +60,21 @@ export default function MediaServerWidget({
if (mediaRequests.length === 0) throw new NoIntegrationDataError(); if (mediaRequests.length === 0) throw new NoIntegrationDataError();
const isTiny = width < 256;
return ( return (
<ScrollArea <ScrollArea
className="mediaRequests-list-scrollArea" className="mediaRequests-list-scrollArea"
scrollbarSize="md" scrollbarSize="md"
style={{ pointerEvents: isEditMode ? "none" : undefined }} style={{ pointerEvents: isEditMode ? "none" : undefined }}
> >
<Stack className="mediaRequests-list-list" gap="sm" p="sm"> <Stack className="mediaRequests-list-list" gap="xs" p="sm">
{mediaRequests.map((mediaRequest) => ( {mediaRequests.map((mediaRequest) => (
<Card <Card
className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${mediaRequest.type} mediaRequests-list-item-${mediaRequest.status}`} className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${mediaRequest.type} mediaRequests-list-item-${mediaRequest.status}`}
key={`${mediaRequest.integrationId}-${mediaRequest.id}`} key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
radius={board.itemRadius} radius={board.itemRadius}
p="sm" p="xs"
withBorder withBorder
> >
<Image <Image
@@ -95,59 +98,65 @@ export default function MediaServerWidget({
gap={0} gap={0}
> >
<Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}> <Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}>
{!isTiny && (
<Image <Image
className="mediaRequests-list-item-poster" className="mediaRequests-list-item-poster"
src={mediaRequest.posterImagePath} src={mediaRequest.posterImagePath}
h={60} h={40}
w="auto" w="auto"
radius={"md"} radius={"md"}
/> />
<Stack className="mediaRequests-list-item-media-infos" gap={0}> )}
<Group className="mediaRequests-list-item-info-first-line" gap="sm" align={"end"} wrap="nowrap">
<Text className="mediaRequests-list-item-media-year" size="md" pt="xs"> <Stack gap={0} w="100%">
<Group justify="space-between" gap="xs" className="mediaRequests-list-item-top-group">
<Group gap="xs">
<Text className="mediaRequests-list-item-media-year" size="xs">
{mediaRequest.airDate?.getFullYear() ?? t("toBeDetermined")} {mediaRequest.airDate?.getFullYear() ?? t("toBeDetermined")}
</Text> </Text>
{!isTiny && (
<Badge <Badge
className="mediaRequests-list-item-media-status" className="mediaRequests-list-item-media-status"
color={getAvailabilityProperties(mediaRequest.availability, t).color} color={getAvailabilityProperties(mediaRequest.availability, t).color}
variant="light" variant="light"
size="md" size="xs"
> >
{getAvailabilityProperties(mediaRequest.availability, t).label} {getAvailabilityProperties(mediaRequest.availability, t).label}
</Badge> </Badge>
)}
</Group> </Group>
<Anchor <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap">
className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
href={mediaRequest.href}
c="var(--mantine-color-text)"
target={options.linksTargetNewTab ? "_blank" : "_self"}
fz="md"
fw={"bold"}
lineClamp={1}
>
{mediaRequest.name || "unknown"}
</Anchor>
</Stack>
</Group>
<Stack className="mediaRequests-list-item-right-side" gap="xs" ms={"lg"} align="end">
<Group className="mediaRequests-list-item-request-user" gap="sm" wrap="nowrap">
<Avatar <Avatar
className="mediaRequests-list-item-request-user-avatar" className="mediaRequests-list-item-request-user-avatar"
src={mediaRequest.requestedBy?.avatar} src={mediaRequest.requestedBy?.avatar}
size="sm" size="xs"
/> />
<Anchor <Anchor
className="mediaRequests-list-item-request-user-name" className="mediaRequests-list-item-request-user-name"
href={mediaRequest.requestedBy?.link} href={mediaRequest.requestedBy?.link}
c="var(--mantine-color-text)" c="var(--mantine-color-text)"
target={options.linksTargetNewTab ? "_blank" : "_self"} target={options.linksTargetNewTab ? "_blank" : "_self"}
fz="md" fz="xs"
lineClamp={1} lineClamp={1}
style={{ wordBreak: "break-all" }} style={{ wordBreak: "break-all" }}
> >
{(mediaRequest.requestedBy?.displayName ?? "") || "unknown"} {(mediaRequest.requestedBy?.displayName ?? "") || "unknown"}
</Anchor> </Anchor>
</Group> </Group>
</Group>
<Group gap="xs" justify="space-between" className="mediaRequests-list-item-bottom-group">
<Anchor
className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
href={mediaRequest.href}
c="var(--mantine-color-text)"
target={options.linksTargetNewTab ? "_blank" : "_self"}
fz={isTiny ? "xs" : "sm"}
fw={"bold"}
title={mediaRequest.name}
lineClamp={1}
>
{mediaRequest.name || "unknown"}
</Anchor>
{mediaRequest.status === MediaRequestStatus.PendingApproval ? ( {mediaRequest.status === MediaRequestStatus.PendingApproval ? (
<Group className="mediaRequests-list-item-pending-buttons" gap="sm"> <Group className="mediaRequests-list-item-pending-buttons" gap="sm">
<Tooltip label={t("pending.approve")}> <Tooltip label={t("pending.approve")}>
@@ -155,8 +164,8 @@ export default function MediaServerWidget({
className="mediaRequests-list-item-pending-button-approve" className="mediaRequests-list-item-pending-button-approve"
variant="light" variant="light"
color="green" color="green"
size="md" size="xs"
radius={"md"} radius="md"
onClick={() => { onClick={() => {
mutateRequestAnswer({ mutateRequestAnswer({
integrationId: mediaRequest.integrationId, integrationId: mediaRequest.integrationId,
@@ -165,7 +174,7 @@ export default function MediaServerWidget({
}); });
}} }}
> >
<IconThumbUp size={23} /> <IconThumbUp size={16} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
<Tooltip label={t("pending.decline")}> <Tooltip label={t("pending.decline")}>
@@ -173,8 +182,8 @@ export default function MediaServerWidget({
className="mediaRequests-list-item-pending-button-decline" className="mediaRequests-list-item-pending-button-decline"
variant="light" variant="light"
color="red" color="red"
size="md" size="xs"
radius={"md"} radius="md"
onClick={() => { onClick={() => {
mutateRequestAnswer({ mutateRequestAnswer({
integrationId: mediaRequest.integrationId, integrationId: mediaRequest.integrationId,
@@ -183,15 +192,17 @@ export default function MediaServerWidget({
}); });
}} }}
> >
<IconThumbDown size={23} /> <IconThumbDown size={16} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
</Group> </Group>
) : ( ) : (
<StatusBadge status={mediaRequest.status} /> <StatusBadge status={mediaRequest.status} />
)} )}
</Group>
</Stack> </Stack>
</Group> </Group>
</Group>
</Card> </Card>
))} ))}
</Stack> </Stack>