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

Mobile improvements and packages updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-06 14:07:58 -05:00
parent 44fc088b2a
commit a148335284
20 changed files with 391 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,7 +30,6 @@ export default function CurrentWeather({ current }: { current: CW }) {
);
}
}, [sunStateData]);
return (
<>
{current ? (
@@ -202,7 +201,7 @@ export default function CurrentWeather({ current }: { current: CW }) {
className={themeIconClasses.weatherIcon}
classNames={themeIconClasses}
>
<FaWind size={32} />
<FaWind size={28} />
</ThemeIcon>
</Grid.Col>
<Grid.Col

4
src/components/WeatherModal/ExtendedForecastCard.tsx
View File

@@ -1,4 +1,5 @@
import { Group, SimpleGrid, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import type { ExtendedForecast } from 'types';
import WeatherIcon from './WeatherIcon';
@@ -6,6 +7,7 @@ import WeatherIcon from './WeatherIcon';
export default function ExtendedForecastCard({
forecast,
}: { forecast: ExtendedForecast[] }) {
const { isMobile } = useCommonHooks();
const day = forecast.slice(2, 14).filter((item: ExtendedForecast) => item.isDaytime);
const night = forecast.slice(2, 14).filter((item: ExtendedForecast) => !item.isDaytime);
return (
@@ -30,7 +32,7 @@ export default function ExtendedForecastCard({
Extended Forecast
</Text>
</Group>
<SimpleGrid w={'100%'} cols={6}>
<SimpleGrid w={'100%'} cols={isMobile ? 3 : 6}>
{day.map((item: ExtendedForecast, index: number) => {
const short = item.shortForecast.includes('And')
? item.shortForecast.substring(0, item.shortForecast.indexOf('And'))

73
src/pages/homepage/components/Search/Search.tsx
View File

@@ -280,16 +280,20 @@ export default function Search({
const [showFillButton, setShowFillButton] = useState(false);
if (item.option.searchTerm !== undefined) {
const m = new Date(item.option.dateTimeStamp);
const year = m.getUTCFullYear();
const year = `${m.getUTCFullYear()}`.slice(-2);
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
const day = `0${m.getUTCDate()}`.slice(-2);
const hours = `0${m.getUTCHours()}`.slice(-2);
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
const seconds = `0${m.getUTCSeconds()}`.slice(-2);
const dateString = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
const dateString = isMobile
? `${month}/${day}/${year}`
: `${month}/${day}/${year} ${hours}:${minutes}`;
return (
<Group
w={'100%'}
display={'flex'}
justify={'space-between'}
gap={0}
onClick={() => {
handleSearchHistoryItem(item);
}}
@@ -300,7 +304,7 @@ export default function Search({
setShowFillButton(false);
}}
>
<Group w={'15%'}>
<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
<Text
style={{
backgroundColor: `${theme.primaryColor}33`,
@@ -324,32 +328,57 @@ export default function Search({
</ActionIcon>
)}
</Group>
<Group justify='space-between' w={'80%'}>
<Text c={'var(--mantine-color-primary-0)'}>{item.option.searchTerm}</Text>
<Group
m={0}
p={0}
gap={0}
justify='space-between'
w={'65%'}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
w={'75%'}
c={'var(--mantine-color-primary-0)'}
style={{
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
>
{item.option.searchTerm}
</Text>
<Text
w={'25%'}
style={{
color: `${theme.primaryColor}55`,
textAlign: 'right',
}}
>
{dateString}
</Text>
</Group>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
<Group m={0} p={0} right={16} w={'24px'}>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
mutateAsync({
method: 'DELETE',
endpoint: searchEndpoint,
body: { id: item.option.id },
});
}}
>
<FiTrash />
</ActionIcon>
)}
</Group>
</Group>
);
}

25
src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -101,7 +101,15 @@ function SettingsButton() {
}, [allThemeData, allThemeDataIsFetched]);
return (
<>
{overlayOpened && <Overlay pos={'fixed'} />}
{overlayOpened && (
<Overlay
pos={'fixed'}
blur={3}
onTouchStart={(e) => {
e.stopPropagation();
}}
/>
)}
<Menu
classNames={menuClasses}
width={isMobile ? '98%' : 'auto'}
@@ -126,7 +134,15 @@ function SettingsButton() {
}}
>
<Group p={'1rem'} gap={12}>
<Stack display={'flex'} align='center'>
<Stack
justify='center'
align='center'
style={{
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
width: isMobile ? '100%' : undefined,
}}
>
<Stack
gap={0}
align='center'
@@ -167,6 +183,7 @@ function SettingsButton() {
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
@@ -263,6 +280,7 @@ function SettingsButton() {
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
@@ -270,7 +288,6 @@ function SettingsButton() {
}}
comboboxProps={{
withinPortal: false,
width: 'fit-content',
}}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
@@ -364,6 +381,7 @@ function SettingsButton() {
value={appSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
@@ -451,6 +469,7 @@ function SettingsButton() {
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
root: selectClasses.menuSelectRoot,
}}
comboboxProps={{
withinPortal: false,

6
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -340,8 +340,12 @@ const ApplicationSettings = () => {
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Box
@@ -358,7 +362,7 @@ const ApplicationSettings = () => {
/>
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedApplication
application={application}
setIsOpen={setIsOpen}

22
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -24,7 +24,7 @@ function DebouncedApplication({
setIsOpen,
allIcons,
}: { application: Application; setIsOpen: (isOpen: boolean) => void; allIcons: any }) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -47,7 +47,11 @@ function DebouncedApplication({
}
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -79,6 +83,7 @@ function DebouncedApplication({
>
<ActionIcon
pos={'absolute'}
top={16}
right={16}
color='red'
onClick={() => {
@@ -112,7 +117,7 @@ function DebouncedApplication({
}}
/>
</Tooltip>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
@@ -140,11 +145,11 @@ function DebouncedApplication({
}}
/>
</Group>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
w={'100%'}
w={isMobile ? undefined : '100%'}
pt={16}
classNames={textInputClasses}
defaultValue={app.url}
@@ -156,9 +161,12 @@ function DebouncedApplication({
}}
/>
</Group>
<Group w={'100%'} justify='space-between'>
<Group
justify='space-between'
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<Select
w={'48%'}
w={isMobile ? '80%' : '48%'}
label={'Icon'}
className={selectClasses.settingsItem}
classNames={{

15
src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
View File

@@ -11,7 +11,7 @@ function DebouncedBookmarkItem({
bookmarkItem,
setIsOpen,
}: { bookmarkItem: Bookmark; setIsOpen: (isOpen: boolean) => void }) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -35,7 +35,11 @@ function DebouncedBookmarkItem({
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -68,6 +72,7 @@ function DebouncedBookmarkItem({
<ActionIcon
pos={'absolute'}
right={16}
top={16}
color='red'
onClick={() => {
setIsOpen(true);
@@ -77,7 +82,7 @@ function DebouncedBookmarkItem({
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
@@ -105,11 +110,11 @@ function DebouncedBookmarkItem({
}}
/>
</Group>
<Group w={'100%'} justify='center'>
<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
w={'100%'}
w={isMobile ? '80%' : '100%'}
pt={16}
classNames={textInputClasses}
defaultValue={bookmark.url}

12
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -193,7 +193,7 @@ function DebouncedGroupSettingsItem({
borderRadius: '100%',
backgroundColor: 'var(--mantine-color-accent-0)',
position: 'absolute',
top: isMobile ? 164 : 78,
top: isMobile ? 140 : 78,
right: 18,
zIndex: 10,
fontSize: 20,
@@ -226,8 +226,11 @@ function DebouncedGroupSettingsItem({
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
>
<Popover.Target>
<Box pos={'relative'}>
@@ -252,7 +255,7 @@ function DebouncedGroupSettingsItem({
<BookmarkSettingsItem bookmark={bookmark} />
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedBookmarkItem
bookmarkItem={bookmark}
setIsOpen={setIsOpen}
@@ -279,7 +282,8 @@ function DebouncedGroupSettingsItem({
<Popover
withArrow
withOverlay
position='top'
trapFocus
position='bottom'
opened={popoverOpened}
onChange={setPopoverOpened}
closeOnEscape
@@ -301,7 +305,7 @@ function DebouncedGroupSettingsItem({
<FiPlus /> Bookmark
</Button>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Stack w={'100%'} display={'flex'} pos={'relative'}>
<Group w={'100%'} justify='center'>

11
src/pages/settings/components/Search/DebouncedSearchProvider.tsx
View File

@@ -14,7 +14,7 @@ function DebouncedSearchProvider({
searchProvider: Provider;
setIsOpen: (isOpen: boolean) => void;
}) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -40,7 +40,11 @@ function DebouncedSearchProvider({
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
@@ -82,7 +86,7 @@ function DebouncedSearchProvider({
<FiTrash color='black' />
</ActionIcon>
</Tooltip>
<Stack>
<Stack w={'100%'} align='center'>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
@@ -113,6 +117,7 @@ function DebouncedSearchProvider({
</Group>
<TextInput
label={'Url'}
w={isMobile ? '80%' : '100%'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}

8
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -71,7 +71,7 @@ const SearchProviderSettings = () => {
title={'Add a new Search Provider'}
body={
<Stack gap={0} w={'100%'} align='center'>
<Stack>
<Stack w={'100%'} align='center'>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
@@ -104,6 +104,7 @@ const SearchProviderSettings = () => {
label={'Url'}
className={textInputClasses.settingsItem}
pt={16}
w={isMobile ? '64%' : '100%'}
classNames={textInputClasses}
defaultValue={newProvider.url}
onChange={(event) => {
@@ -171,8 +172,11 @@ const SearchProviderSettings = () => {
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
>
<Popover.Target>
<Box
@@ -183,7 +187,7 @@ const SearchProviderSettings = () => {
<SearchProviderSettingsItem provider={provider} />
</Box>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedSearchProvider
searchProvider={provider}
setIsOpen={setIsOpen}

2
src/pages/settings/components/Shared/AddItemModal.tsx
View File

@@ -28,7 +28,7 @@ function AddItemModal({
centered
>
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
<Modal.Content style={{ zIndex: 1000 }}>
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
<Modal.CloseButton />

2
src/pages/settings/components/Shared/DeleteItemModal.tsx
View File

@@ -29,7 +29,7 @@ function DeleteItemModal({
centered
>
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
<Modal.Content style={{ zIndex: 1000 }}>
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
<Modal.Header>
<Modal.Title>{title}</Modal.Title>
<Modal.CloseButton />

18
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -160,8 +160,13 @@ function ThemeModal({
<Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} />
<Divider color='black' my='sm' />
<Group w={'100%'} h={'100%'} gap={0}>
<Stack w={'50%'}>
<Group
w={'100%'}
h={'100%'}
gap={isMobile ? 20 : 0}
style={{ flexDirection: isMobile ? 'column' : 'row' }}
>
<Stack w={isMobile ? '100%' : '50%'}>
{pickerOpen ? (
<Group justify='center'>
<ColorPicker
@@ -330,7 +335,12 @@ function ThemeModal({
</Stack>
)}
</Stack>
<Stack h={'100%'} w={'50%'} align='center' justify='center'>
<Stack
h={'100%'}
w={isMobile ? '100%' : '50%'}
align='center'
justify='center'
>
<Group gap={0}>
<Text mr={8}>Search:</Text>
<TextInput
@@ -393,7 +403,7 @@ function ThemeModal({
</Stack>
</Group>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={isMobile ? -64 : 8}>
<Group pos={'absolute'} bottom={isMobile ? -72 : 8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}

6
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -149,7 +149,7 @@ function ThemesSettings() {
align='center'
pos={'relative'}
mt={isMobile ? '10rem' : '7rem'}
mb={isMobile ? '8rem' : '6.5rem'}
mb={isMobile ? '12rem' : '6.5rem'}
>
<Overlay
display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
@@ -222,7 +222,7 @@ function ThemesSettings() {
style={{
backdropFilter: 'blur(10px) brightness(.75)',
zIndex: 199,
paddingTop: '1.5rem',
paddingTop: isMobile ? '.5rem' : '1.5rem',
paddingBottom: '1.5rem',
paddingLeft: '1rem',
paddingRight: '1rem',
@@ -230,7 +230,7 @@ function ThemesSettings() {
width: '100%',
marginTop: 0,
position: 'absolute',
bottom: 0,
bottom: isMobile ? '3.25rem' : 0,
}}
>
<Group w={isMobile ? undefined : '100%'}>

8
src/pages/settings/components/WoL/DebouncedWolClient.tsx
View File

@@ -14,7 +14,7 @@ function DebouncedWolClient({
wolClient: WolClient;
setIsOpen: (isOpen: boolean) => void;
}) {
const { handleDelete } = useCommonHooks();
const { handleDelete, isMobile } = useCommonHooks();
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const { mutateAsync } = useMutationAPI();
@@ -39,7 +39,11 @@ function DebouncedWolClient({
}, [update]);
return (
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Card
p={isMobile ? 'xl' : undefined}
className={cardClasses.settingsItem}
classNames={cardClasses}
>
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}

6
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -152,8 +152,12 @@ const WolClientSettings = () => {
<Popover
withArrow
withOverlay
trapFocus
closeOnClickOutside={!isOpen}
classNames={popoverClasses}
middlewares={{ shift: { padding: 20 } }}
position='bottom'
offset={isMobile ? -100 : 0}
>
<Popover.Target>
<Group
@@ -165,7 +169,7 @@ const WolClientSettings = () => {
<WolClientSettingsItem client={client} />
</Group>
</Popover.Target>
<Popover.Dropdown w={isMobile ? '100%' : undefined}>
<Popover.Dropdown w={isMobile ? '90%' : undefined}>
<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
</Popover.Dropdown>
</Popover>

3
src/styles/Select.module.css
View File

@@ -1,3 +1,6 @@
.menuSelectRoot {
width: 45%;
}
.menuSelectLabel {
margin-bottom: 5px !important;
color: var(--mantine-color-primary-0) !important;

1
src/styles/Tabs.module.css
View File

@@ -22,7 +22,6 @@
&[data-active="true"] {
border-color: var(--mantine-color-primary-0);
}
width: 100%;
border-radius: 0%;
}
.tabLabel {