Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-17 18:51:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Weather widget styling

Browse Source
This commit is contained in:
ajnart
2023-01-03 20:15:07 +09:00
parent 908d0f9f09
commit 4f948021dd
2 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/widgets/weather/WeatherIcon.tsx
View File

@@ -30,7 +30,7 @@ export const WeatherIcon = ({ code }: WeatherIconProps) => {
return ( return (
<Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}> <Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}>
<Box> <Box>
<Icon size={50} /> <Icon style={{ float: 'left' }} size={50} />
</Box> </Box>
</Tooltip> </Tooltip>
); );

29
src/widgets/weather/WeatherTile.tsx
View File

@@ -19,7 +19,7 @@ const definition = defineWidget({
}, },
}, },
gridstack: { gridstack: {
minWidth: 4, minWidth: 2,
minHeight: 2, minHeight: 2,
maxWidth: 12, maxWidth: 12,
maxHeight: 12, maxHeight: 12,
@@ -61,39 +61,34 @@ function WeatherTile({ widget }: WeatherTileProps) {
// TODO: add widgetWrapper that is generic and uses the definition // TODO: add widgetWrapper that is generic and uses the definition
return ( return (
<Center style={{ height: '100%' }}> <Stack
<Group spacing="md" noWrap align="center"> spacing="xs"
justify="space-around"
align="center"
style={{ height: '100%', width: '100%' }}
>
<Group grow>
<WeatherIcon code={weather!.current_weather.weathercode} /> <WeatherIcon code={weather!.current_weather.weathercode} />
<Stack p={0} spacing={4}>
<Title order={2}> <Title order={2}>
{getPerferedUnit( {getPerferedUnit(
weather!.current_weather.temperature, weather!.current_weather.temperature,
widget.properties.displayInFahrenheit widget.properties.displayInFahrenheit
)} )}
</Title> </Title>
<Group spacing="xs" noWrap> </Group>
<div> <Group noWrap spacing="xs">
<span> <IconArrowUpRight />
{getPerferedUnit( {getPerferedUnit(
weather!.daily.temperature_2m_max[0], weather!.daily.temperature_2m_max[0],
widget.properties.displayInFahrenheit widget.properties.displayInFahrenheit
)} )}
</span> <IconArrowDownRight />
<IconArrowUpRight size={16} style={{ right: 15 }} />
</div>
<div>
<span>
{getPerferedUnit( {getPerferedUnit(
weather!.daily.temperature_2m_min[0], weather!.daily.temperature_2m_min[0],
widget.properties.displayInFahrenheit widget.properties.displayInFahrenheit
)} )}
</span>
<IconArrowDownRight size={16} />
</div>
</Group> </Group>
</Stack> </Stack>
</Group>
</Center>
); );
} }