chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix spacing issues around images/pdfs in ivans and rs

Browse Source
This commit is contained in:
vkuchenik
2026-08-11 13:11:11 -07:00
parent 058b51795b
commit 2bea05bf29
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/IvansAlerts.jsx
+6 -6
View File
@@ -132,19 +132,19 @@ export default function IvansAlerts({ settings, widgetID }) {
}, [isCopy, data, widgetID, updateSettings]); }, [isCopy, data, widgetID, updateSettings]);
if (isLoading) return ( if (isLoading) return (
<Flex w="100%" h="100%" align="center" justify="center" borderRadius="md" bg="gray.800"> <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
<Spinner size="xl" color="blue.400" thickness="4px"/> <Spinner size="xl" color="blue.400" thickness="4px"/>
</Flex> </Flex>
); );
if (error) return ( if (error) return (
<Flex w="100%" h="100%" align="center" justify="center" p={4} borderRadius="md" bg="gray.800"> <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
<Text color="red.400">{error}</Text> <Text color="red.400">{error}</Text>
</Flex> </Flex>
); );
if (data.length === 0) return ( if (data.length === 0) return (
<Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md"> <Flex w="100%" h="100%" align="center" justify="center" borderRadius="lg" bg="gray.800">
<Text color="gray.400">No flight level data available this week.</Text> <Text color="gray.400">No flight level data available this week.</Text>
</Flex> </Flex>
); );
@@ -170,17 +170,17 @@ export default function IvansAlerts({ settings, widgetID }) {
<Flex direction="row" <Flex direction="row"
w="100%" h="100%" w="100%" h="100%"
justify="space-between" align="center" justify="space-between" align="center"
pb={1} p={1} pl={3} pr={3}
gap={2} gap={2}
borderTopRadius="lg" borderTopRadius="lg"
borderBottomRadius={collapsible.open ? "0" : "lg"} borderBottomRadius={collapsible.open ? "0" : "lg"}
bg="gray.700" bg="gray.700"
> >
<Flex direction="column" minW={0} pl={3} textAlign="left" color="gray.100"> <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
<Text truncate>{item.volcano_name}</Text> <Text truncate>{item.volcano_name}</Text>
<Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text> <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
</Flex> </Flex>
<Flex minW={0} pr={3}> <Flex w="100%" minW={0} justify="right">
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100">{item.report_num}</Text> <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100">{item.report_num}</Text>
</Flex> </Flex>
</Flex> </Flex>
client/src/components/Widgets/RemoteSensing.jsx
+5 -3
View File
@@ -181,15 +181,16 @@ export default function RemoteSensing({ settings, widgetID }) {
w="100%" h="100%" w="100%" h="100%"
justify="space-between" align="center" justify="space-between" align="center"
gap={2} gap={2}
p={1} pl={3} pr={3}
borderTopRadius="lg" borderTopRadius="lg"
borderBottomRadius={collapsible.open ? "0" : "lg"} borderBottomRadius={collapsible.open ? "0" : "lg"}
bg="gray.700" bg="gray.700"
> >
<Flex direction="column" w="100%" minW={0} pl={3} textAlign="left" color="gray.100"> <Flex direction="column" w="100%" minW={0} textAlign="left" color="gray.100">
<Text truncate >{item?.volcano_name}</Text> <Text truncate >{item?.volcano_name}</Text>
<Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text> <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
</Flex> </Flex>
<Flex pr={3} minW={0} w="100%"> <Flex w="100%" minW={0} justify="right">
<Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text> <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text>
</Flex> </Flex>
</Flex> </Flex>
@@ -225,13 +226,13 @@ export default function RemoteSensing({ settings, widgetID }) {
</a> </a>
</Flex> </Flex>
</object> </object>
<br/>
</Box> </Box>
); );
// IMAGE FILE TYPE // IMAGE FILE TYPE
else if (file?.type === "image") return ( else if (file?.type === "image") return (
<Box key={index} w="100%" h="100%" p={1}> <Box key={index} w="100%" h="100%" p={1}>
<br />
<Flex dir="row" justify="space-between" align="center" mb={2}> <Flex dir="row" justify="space-between" align="center" mb={2}>
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text> <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PNG</Text> <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300/90">PNG</Text>
@@ -246,6 +247,7 @@ export default function RemoteSensing({ settings, widgetID }) {
// DOWNLOADABLE LINK // DOWNLOADABLE LINK
else if (file?.type === "download") return ( else if (file?.type === "download") return (
<Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between"> <Flex key={index} dir="row" w="100%" h="100%" p={1} align="center" justify="space-between">
<br />
<Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text> <Text pl={1} pr={1} bg="gray.600/50" borderRadius="md" fontSize="xs" color="gray.300">{file?.name}</Text>
<Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}> <Button asChild variant="surface" size="xxs" fontSize="xs" pl={2} pr={2}>
<a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a> <a href={file?.url} target="_blank" rel="noopener noreferrer">Download</a>