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

feat: remove cqmin system (#2407)

Browse Source 
* feat: remove cqmin system

* fix: improve weather widget

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>
This commit is contained in:
Manuel
2025-03-07 17:46:01 +00:00
committed by GitHub
parent 9881577f47
commit 37d471457a
26 changed files with 576 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/widgets/src/media-requests/stats/component.module.css
View File

@@ -1,7 +1,7 @@
.gridElement:not(:nth-child(8n)) {
border-right: 0.5cqmin solid var(--app-shell-border-color);
[data-mantine-color-scheme="light"] .card {
background-color: var(--mantine-color-gray-1);
}
.gridElement:not(:nth-last-child(-n + 8)) {
border-bottom: 0.5cqmin solid var(--app-shell-border-color);
[data-mantine-color-scheme="dark"] .card {
background-color: var(--mantine-color-dark-7);
}

63
packages/widgets/src/media-requests/stats/component.tsx
View File

@@ -17,6 +17,7 @@ import {
import combineClasses from "clsx";
import { clientApi } from "@homarr/api/client";
import { useRequiredBoard } from "@homarr/boards/context";
import type { RequestStats } from "@homarr/integrations/types";
import { useScopedI18n } from "@homarr/translation/client";
@@ -42,9 +43,10 @@ export default function MediaServerWidget({
const { width, height, ref } = useElementSize();
const board = useRequiredBoard();
if (requestStats.users.length === 0 && requestStats.stats.length === 0) throw new NoIntegrationDataError();
//Add processing and available
const data = [
{
name: "approved",
@@ -93,37 +95,35 @@ export default function MediaServerWidget({
className="mediaRequests-stats-layout"
display="flex"
h="100%"
gap="2cqmin"
p="2cqmin"
gap="sm"
p="sm"
align="center"
style={{ pointerEvents: isEditMode ? "none" : undefined }}
>
<Text className="mediaRequests-stats-stats-title" size="6.5cqmin">
<Text className="mediaRequests-stats-stats-title" fw={"bold"} size="md">
{t("titles.stats.main")}
</Text>
<Grid className="mediaRequests-stats-stats-grid" gutter={0} w="100%">
<Grid className="mediaRequests-stats-stats-grid" gutter={10} w="100%">
{data.map((stat) => (
<Grid.Col
className={combineClasses(
classes.gridElement,
"mediaRequests-stats-stat-wrapper",
`mediaRequests-stats-stat-${stat.name}`,
)}
className={combineClasses("mediaRequests-stats-stat-wrapper", `mediaRequests-stats-stat-${stat.name}`)}
key={stat.name}
span={3}
>
<Tooltip label={t(`titles.stats.${stat.name}`)}>
<Stack className="mediaRequests-stats-stat-stack" align="center" gap="2cqmin" p="2cqmin">
<stat.icon className="mediaRequests-stats-stat-icon" size="7.5cqmin" />
<Text className="mediaRequests-stats-stat-value" size="5cqmin">
{stat.number}
</Text>
</Stack>
<Card p={0} radius={board.itemRadius} className={classes.card}>
<Stack className="mediaRequests-stats-stat-stack" align="center" gap={0} p="xs">
<stat.icon className="mediaRequests-stats-stat-icon" size={30} />
<Text className="mediaRequests-stats-stat-value" size="md">
{stat.number}
</Text>
</Stack>
</Card>
</Tooltip>
</Grid.Col>
))}
</Grid>
<Text className="mediaRequests-stats-users-title" size="6.5cqmin">
<Text className="mediaRequests-stats-users-title" fw={"bold"} size="md">
{t("titles.users.main")}
</Text>
<Stack
@@ -132,36 +132,34 @@ export default function MediaServerWidget({
w="100%"
ref={ref}
display="flex"
gap="2cqmin"
style={{ overflow: "hidden" }}
gap="sm"
style={{ overflow: "hidden", justifyContent: "end" }}
>
{requestStats.users.slice(0, Math.max(Math.floor((height / width) * 5), 1)).map((user) => (
<Card
className={combineClasses(
"mediaRequests-stats-users-user-wrapper",
`mediaRequests-stats-users-user-${user.id}`,
classes.card,
)}
key={user.id}
withBorder
p="2cqmin"
flex={1}
mah="38.5cqmin"
radius="2.5cqmin"
p="sm"
radius={board.itemRadius}
>
<Group className="mediaRequests-stats-users-user-group" h="100%" p={0} gap="2cqmin" display="flex">
<Group className="mediaRequests-stats-users-user-group" h="100%" p={0} gap="sm" display="flex">
<Tooltip label={user.integration.name}>
<Avatar
className="mediaRequests-stats-users-user-avatar"
size="12.5cqmin"
size="md"
src={user.avatar}
bd={`0.5cqmin solid ${user.integration.kind === "overseerr" ? "#ECB000" : "#6677CC"}`}
bd={`2px solid ${user.integration.kind === "overseerr" ? "#ECB000" : "#6677CC"}`}
/>
</Tooltip>
<Stack className="mediaRequests-stats-users-user-infos" gap="2cqmin">
<Text className="mediaRequests-stats-users-user-userName" size="6cqmin">
<Stack className="mediaRequests-stats-users-user-infos" gap={0}>
<Text className="mediaRequests-stats-users-user-userName" fw={"bold"} size="md">
{user.displayName}
</Text>
<Text className="mediaRequests-stats-users-user-request-count" size="4cqmin">
<Text className="mediaRequests-stats-users-user-request-count" size="md">
{`${t("titles.users.requests")}: ${user.requestCount}`}
</Text>
</Stack>
@@ -170,11 +168,12 @@ export default function MediaServerWidget({
className="mediaRequests-stats-users-user-link-button"
variant="light"
color="var(--mantine-color-text)"
size="10cqmin"
size={40}
component="a"
radius={board.itemRadius}
href={user.link}
>
<IconExternalLink className="mediaRequests-stats-users-user-link-icon" size="7.5cqmin" />
<IconExternalLink className="mediaRequests-stats-users-user-link-icon" size={25} />
</ActionIcon>
</Group>
</Card>