Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-17 10:41:10 +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 (
<Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}>
<Box>
<Icon size={50} />
<Icon style={{ float: 'left' }} size={50} />
</Box>
</Tooltip>
);

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

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