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

201
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,102 +98,110 @@ 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}>
<Image {!isTiny && (
className="mediaRequests-list-item-poster" <Image
src={mediaRequest.posterImagePath} className="mediaRequests-list-item-poster"
h={60} src={mediaRequest.posterImagePath}
w="auto" h={40}
radius={"md"} w="auto"
/> 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">
{mediaRequest.airDate?.getFullYear() ?? t("toBeDetermined")} <Stack gap={0} w="100%">
</Text> <Group justify="space-between" gap="xs" className="mediaRequests-list-item-top-group">
<Badge <Group gap="xs">
className="mediaRequests-list-item-media-status" <Text className="mediaRequests-list-item-media-year" size="xs">
color={getAvailabilityProperties(mediaRequest.availability, t).color} {mediaRequest.airDate?.getFullYear() ?? t("toBeDetermined")}
variant="light" </Text>
size="md" {!isTiny && (
> <Badge
{getAvailabilityProperties(mediaRequest.availability, t).label} className="mediaRequests-list-item-media-status"
</Badge> color={getAvailabilityProperties(mediaRequest.availability, t).color}
variant="light"
size="xs"
>
{getAvailabilityProperties(mediaRequest.availability, t).label}
</Badge>
)}
</Group>
<Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap">
<Avatar
className="mediaRequests-list-item-request-user-avatar"
src={mediaRequest.requestedBy?.avatar}
size="xs"
/>
<Anchor
className="mediaRequests-list-item-request-user-name"
href={mediaRequest.requestedBy?.link}
c="var(--mantine-color-text)"
target={options.linksTargetNewTab ? "_blank" : "_self"}
fz="xs"
lineClamp={1}
style={{ wordBreak: "break-all" }}
>
{(mediaRequest.requestedBy?.displayName ?? "") || "unknown"}
</Anchor>
</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 ? (
<Group className="mediaRequests-list-item-pending-buttons" gap="sm">
<Tooltip label={t("pending.approve")}>
<ActionIcon
className="mediaRequests-list-item-pending-button-approve"
variant="light"
color="green"
size="xs"
radius="md"
onClick={() => {
mutateRequestAnswer({
integrationId: mediaRequest.integrationId,
requestId: mediaRequest.id,
answer: "approve",
});
}}
>
<IconThumbUp size={16} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("pending.decline")}>
<ActionIcon
className="mediaRequests-list-item-pending-button-decline"
variant="light"
color="red"
size="xs"
radius="md"
onClick={() => {
mutateRequestAnswer({
integrationId: mediaRequest.integrationId,
requestId: mediaRequest.id,
answer: "decline",
});
}}
>
<IconThumbDown size={16} />
</ActionIcon>
</Tooltip>
</Group>
) : (
<StatusBadge status={mediaRequest.status} />
)}
</Group> </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="md"
fw={"bold"}
lineClamp={1}
>
{mediaRequest.name || "unknown"}
</Anchor>
</Stack> </Stack>
</Group> </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
className="mediaRequests-list-item-request-user-avatar"
src={mediaRequest.requestedBy?.avatar}
size="sm"
/>
<Anchor
className="mediaRequests-list-item-request-user-name"
href={mediaRequest.requestedBy?.link}
c="var(--mantine-color-text)"
target={options.linksTargetNewTab ? "_blank" : "_self"}
fz="md"
lineClamp={1}
style={{ wordBreak: "break-all" }}
>
{(mediaRequest.requestedBy?.displayName ?? "") || "unknown"}
</Anchor>
</Group>
{mediaRequest.status === MediaRequestStatus.PendingApproval ? (
<Group className="mediaRequests-list-item-pending-buttons" gap="sm">
<Tooltip label={t("pending.approve")}>
<ActionIcon
className="mediaRequests-list-item-pending-button-approve"
variant="light"
color="green"
size="md"
radius={"md"}
onClick={() => {
mutateRequestAnswer({
integrationId: mediaRequest.integrationId,
requestId: mediaRequest.id,
answer: "approve",
});
}}
>
<IconThumbUp size={23} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("pending.decline")}>
<ActionIcon
className="mediaRequests-list-item-pending-button-decline"
variant="light"
color="red"
size="md"
radius={"md"}
onClick={() => {
mutateRequestAnswer({
integrationId: mediaRequest.integrationId,
requestId: mediaRequest.id,
answer: "decline",
});
}}
>
<IconThumbDown size={23} />
</ActionIcon>
</Tooltip>
</Group>
) : (
<StatusBadge status={mediaRequest.status} />
)}
</Stack>
</Group> </Group>
</Card> </Card>
))} ))}