smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Mobile and style improvements

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-28 14:25:33 -05:00
parent e935b13baf
commit 332c759ed0
23 changed files with 743 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/WeatherModal/CurrentWeather.tsx
View File

@@ -7,7 +7,7 @@ import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
import WeatherIcon from './WeatherIcon';
export default function CurrentWeather({ current }: any) {
const { currentLocation } = useCommonHooks();
const { currentLocation, isMobile } = useCommonHooks();
const { data: sunStateData } = useSunStateAPI({
lat: currentLocation.lat,
lon: currentLocation.lon,
@@ -56,7 +56,7 @@ export default function CurrentWeather({ current }: any) {
</Text>
</Group>
<Group gap={8} w={'100%'} justify='space-between'>
<Stack gap={0} w={'45%'}>
<Stack gap={0} w={isMobile ? '40%' : '45%'}>
<Group gap={0} justify='flex-end'>
<WeatherIcon
textDescription={`${
@@ -73,7 +73,7 @@ export default function CurrentWeather({ current }: any) {
: current.textDescription
}`}
/>
<Text fz={'7rem'} fw={200}>
<Text fz={isMobile ? '5rem' : '7rem'} fw={200}>
{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
</Text>
</Group>
@@ -89,7 +89,7 @@ export default function CurrentWeather({ current }: any) {
{current.textDescription}
</Text>
</Stack>
<Stack gap={4} w={'45%'}>
<Stack gap={4} w={isMobile ? '50%' : '45%'}>
<Text>
Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
°<sup>F</sup>
@@ -105,7 +105,12 @@ export default function CurrentWeather({ current }: any) {
<FaLongArrowAltUp size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>
{current.highTemp}°<sup>F</sup>
</Text>
@@ -120,7 +125,12 @@ export default function CurrentWeather({ current }: any) {
<FaLongArrowAltDown size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={1}>
<Grid.Col
span={1}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>
{current.lowTemp}°<sup>F</sup>
</Text>
@@ -137,7 +147,12 @@ export default function CurrentWeather({ current }: any) {
<WiSunrise size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{sunStates[0]?.sunrise}</Text>
</Grid.Col>
<Grid.Col span={1}>
@@ -150,7 +165,12 @@ export default function CurrentWeather({ current }: any) {
<WiSunset size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{sunStates[0]?.sunset}</Text>
</Grid.Col>
</Grid>
@@ -165,10 +185,20 @@ export default function CurrentWeather({ current }: any) {
<WiHumidity size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Humidity</Text>
</Grid.Col>
<Grid.Col span={2}>
<Grid.Col
span={2}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.humidity}%</Text>
</Grid.Col>
</Grid>
@@ -183,10 +213,20 @@ export default function CurrentWeather({ current }: any) {
<FaWind size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Wind</Text>
</Grid.Col>
<Grid.Col span={2}>
<Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.windSpeed}mph</Text>
</Grid.Col>
</Grid>
@@ -201,10 +241,20 @@ export default function CurrentWeather({ current }: any) {
<WiBarometer size={32} />
</ThemeIcon>
</Grid.Col>
<Grid.Col span={3}>
<Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Pressure</Text>
</Grid.Col>
<Grid.Col span={2}>
<Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.pressure} in</Text>
</Grid.Col>
</Grid>