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

added icon size and gap changes when tile is small

Browse Source
This commit is contained in:
Ishan Parlikar
2023-07-29 22:22:59 +05:30
parent ec34339e16
commit 6f0a259268
2 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,9 +11,11 @@ import {
Icon, Icon,
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useElementSize } from '@mantine/hooks';
interface WeatherIconProps { interface WeatherIconProps {
code: number; code: number;
size?: number;
} }
/** /**
@@ -21,8 +23,9 @@ interface WeatherIconProps {
* @param code weather code from api * @param code weather code from api
* @returns weather tile component * @returns weather tile component
*/ */
export const WeatherIcon = ({ code }: WeatherIconProps) => { export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => {
const { t } = useTranslation('modules/weather'); const { t } = useTranslation('modules/weather');
const { width, ref } = useElementSize();
const { icon: Icon, name } = const { icon: Icon, name } =
weatherDefinitions.find((wd) => wd.codes.includes(code)) ?? unknownWeather; weatherDefinitions.find((wd) => wd.codes.includes(code)) ?? unknownWeather;
@@ -30,7 +33,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 style={{ float: 'left' }} size={50} /> <Icon style={{ float: 'left' }} size={size} />
</Box> </Box>
</Tooltip> </Tooltip>
); );

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

@@ -85,14 +85,14 @@ function WeatherTile({ widget }: WeatherTileProps) {
return ( return (
<Stack <Stack
ref={ref} ref={ref}
spacing="xs" spacing={width<120 ? "0.25rem" : "xs"}
justify="space-around" justify="space-around"
align="center" align="center"
style={{ height: '100%', width: '100%' }} style={{ height: '100%', width: '100%' }}
> >
<Flex align="center" gap={'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}> <Flex align="center" gap={width<120 ? '0.25rem' : 'xs'} justify={'center'} direction={width < 200 ? 'column' : 'row'}>
<WeatherIcon code={weather.current_weather.weathercode} /> <WeatherIcon size={width<300 ? 30 : 50} code={weather.current_weather.weathercode} />
<Title size={width < 200 ? 'h4' : 'h2'}> <Title size={width < 300 ? 'h4' : 'h2'}>
{getPerferedUnit( {getPerferedUnit(
weather.current_weather.temperature, weather.current_weather.temperature,
widget.properties.displayInFahrenheit widget.properties.displayInFahrenheit