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>

35
src/components/WeatherModal/ExtendedForecast.tsx
View File

@@ -1,9 +1,12 @@
import { Group, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import WeatherIcon from './WeatherIcon';
export default function ExtendedForecast({ forecast }: any) {
const day = forecast.slice(2, 14).filter((item: any) => item.isDaytime);
const night = forecast.slice(2, 14).filter((item: any) => !item.isDaytime);
const { isMobile } = useCommonHooks();
return (
<Stack
gap={0}
@@ -16,7 +19,7 @@ export default function ExtendedForecast({ forecast }: any) {
paddingBottom: '.5rem',
}}
>
<Group gap={0} px={16} w={'100%'}>
<Group gap={0} px={16} mb={8} w={'100%'}>
<Text
c={'var(--color-text-pri)'}
style={{
@@ -34,11 +37,37 @@ export default function ExtendedForecast({ forecast }: any) {
: item.shortForecast.includes('then')
? item.shortForecast.substring(0, item.shortForecast.indexOf('then'))
: item.shortForecast;
return (
<Stack key={item.name} gap={0} align='center'>
<Stack
w={isMobile ? '30%' : '15%'}
key={item.name}
gap={0}
align='center'
bg={'var(--color-background)'}
style={{
borderRadius: '8px',
}}
>
<Text>{item.name}</Text>
<WeatherIcon textDescription={short} />
<Text>{short}</Text>
<Group
justify={short.length > 15 ? 'flex-start' : 'center'}
style={{
width: '100%',
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
className={short.length > 15 ? textClasses.autoScrollText : undefined}
classNames={textClasses}
>
{short}
</Text>
</Group>
<Text>
{item.temperature}°{item.temperatureUnit}/{night[index].temperature}°
{item.temperatureUnit}

8
src/components/WeatherModal/WeatherGraphs.tsx
View File

@@ -58,7 +58,11 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
});
}}
/>
<YAxis stroke={theme.primaryColor} unit={'°F'} dataKey={'temperature'} />
<YAxis
stroke={theme.primaryColor}
unit={'°F'}
domain={['dataMin', 'dataMax']}
/>
<CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} />
<Line
@@ -105,7 +109,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
return data.probabilityOfPrecipitation.value;
}}
stroke={theme.primaryColor}
fill={theme.accentColor}
fill={theme.primaryColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/>
<Area

17
src/components/WeatherModal/WeatherModal.tsx
View File

@@ -9,20 +9,15 @@ import ExtendedForecast from './ExtendedForecast';
import WeatherGraphs from './WeatherGraphs';
export function WeatherModal({
setSearchValue,
setProviderLabel,
setProviderURL,
current,
extendedForecast,
closeWeatherModal,
weatherModalOpened,
}: any) {
const {
theme,
isMobile,
setProviderLabel,
setSearchValue,
setProviderURL,
currentUser,
currentLocation,
} = useCommonHooks();
const { theme, isMobile, currentUser, currentLocation } = useCommonHooks();
const { data: hourly } = useWeatherAPI({
endpoint: 'hourly',
office: currentLocation.office,
@@ -45,10 +40,10 @@ export function WeatherModal({
classNames={modalClasses}
opened={weatherModalOpened}
onClose={() => {
closeWeatherModal();
setProviderLabel('Google Search');
setSearchValue('');
setProviderLabel('Google Search');
setProviderURL('https://www.google.com/search?q=');
closeWeatherModal();
}}
style={{
'--color-text-pri': theme.primaryColor,