Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2026-02-27 00:40:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: DNS Hole summary Scalability (#646)

Browse Source
This commit is contained in:
SeDemal
2024-06-09 17:36:18 +02:00
committed by GitHub
parent 28927cfa28
commit 0710425e78
2 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/translation/src/lang/en.ts
View File

@@ -680,8 +680,8 @@ export default {
internalServerError: "Failed to fetch DNS Hole Summary",
},
data: {
adsBlockedToday: "blocked today",
adsBlockedTodayPercentage: "blocked today",
adsBlockedToday: "Blocked today",
adsBlockedTodayPercentage: "Blocked today",
dnsQueriesToday: "Queries today",
domainsBeingBlocked: "Domains on blocklist",
},

55
packages/widgets/src/dns-hole/summary/component.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import type { BoxProps } from "@mantine/core";
import { Box, Card, Center, Flex, Text } from "@mantine/core";
import { Box, Card, Flex, Text } from "@mantine/core";
import { useElementSize } from "@mantine/hooks";
import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
@@ -93,35 +93,46 @@ const StatCard = ({ item, data, usePiHoleColors }: StatCardProps) => {
return (
<Card
ref={ref}
m={6}
p={3}
className="summary-card"
m="2.5cqmin"
p="2.5cqmin"
bg={usePiHoleColors ? item.color : "rgba(96, 96, 96, 0.1)"}
style={{
flex: 1,
}}
withBorder
>
<Center h="100%" w="100%">
<Flex h="100%" w="100%" align="center" justify="space-evenly" direction={isLong ? "row" : "column"}>
<item.icon size={30} style={{ margin: "0 10" }} />
<Flex
justify="center"
direction="column"
style={{
flex: isLong ? 1 : undefined,
}}
>
<Text ta="center" lh={1.2} size="md" fw="bold">
{item.value(data, t)}
<Flex
className="summary-card-elements"
h="100%"
w="100%"
align="center"
justify="space-evenly"
direction={isLong ? "row" : "column"}
style={{ containerType: "size" }}
>
<item.icon className="summary-card-icon" size="50cqmin" style={{ margin: "2cqmin" }} />
<Flex
className="summary-card-texts"
justify="center"
direction="column"
style={{
flex: isLong ? 1 : undefined,
}}
w="100%"
h="100%"
gap="1cqmin"
>
<Text className="summary-card-value" ta="center" size="25cqmin" fw="bold">
{item.value(data, t)}
</Text>
{item.label && (
<Text className="summary-card-label" ta="center" size="17.5cqmin">
{translateIfNecessary(t, item.label)}
</Text>
{item.label && (
<Text ta="center" lh={1.2} size="0.75rem">
{translateIfNecessary(t, item.label)}
</Text>
)}
</Flex>
)}
</Flex>
</Center>
</Flex>
</Card>
);
};