Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-08-04 07:42:47 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Enhancement: Hide drop-downs for the system event viewer when in the collapsed state and on a smaller display.

Browse source
This commit is contained in:
SergeantPanda 2025-11-25 10:04:52 -06:00
parent 7673cd0793
commit 962d5e965b
1 changed files with 41 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/src/components/SystemEvents.jsx
View file

@ -12,6 +12,7 @@ import {
Text,
Title,
} from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import {
ChevronDown,
CirclePlay,
@ -38,6 +39,8 @@ const SystemEvents = () => {
const [events, setEvents] = useState([]);
const [totalEvents, setTotalEvents] = useState(0);
const [isExpanded, setIsExpanded] = useState(false);
const { ref: cardRef, width: cardWidth } = useElementSize();
const isNarrow = cardWidth < 650;
const [isLoading, setIsLoading] = useState(false);
const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
const dateFormat = dateFormatSetting === 'mdy' ? 'MM/DD' : 'DD/MM';
@ -166,6 +169,7 @@ const SystemEvents = () => {
return (
<Card
ref={cardRef}
shadow="sm"
padding="sm"
radius="md"
@ -186,39 +190,43 @@ const SystemEvents = () => {
<Title order={4}>System Events</Title>
</Group>
<Group gap="xs">
<NumberInput
size="xs"
label="Events Per Page"
value={eventsLimit}
onChange={(value) => setEventsLimit(value || 10)}
min={10}
max={1000}
step={10}
style={{ width: 130 }}
/>
<Select
size="xs"
label="Auto Refresh"
value={eventsRefreshInterval.toString()}
onChange={(value) => setEventsRefreshInterval(parseInt(value))}
data={[
{ value: '0', label: 'Manual' },
{ value: '5', label: '5s' },
{ value: '10', label: '10s' },
{ value: '30', label: '30s' },
{ value: '60', label: '1m' },
]}
style={{ width: 120 }}
/>
<Button
size="xs"
variant="subtle"
onClick={fetchEvents}
loading={isLoading}
style={{ marginTop: 'auto' }}
>
Refresh
</Button>
{(isExpanded || !isNarrow) && (
<>
<NumberInput
size="xs"
label="Events Per Page"
value={eventsLimit}
onChange={(value) => setEventsLimit(value || 10)}
min={10}
max={1000}
step={10}
style={{ width: 130 }}
/>
<Select
size="xs"
label="Auto Refresh"
value={eventsRefreshInterval.toString()}
onChange={(value) => setEventsRefreshInterval(parseInt(value))}
data={[
{ value: '0', label: 'Manual' },
{ value: '5', label: '5s' },
{ value: '10', label: '10s' },
{ value: '30', label: '30s' },
{ value: '60', label: '1m' },
]}
style={{ width: 120 }}
/>
<Button
size="xs"
variant="subtle"
onClick={fetchEvents}
loading={isLoading}
style={{ marginTop: 'auto' }}
>
Refresh
</Button>
</>
)}
<ActionIcon
variant="subtle"
onClick={() => setIsExpanded(!isExpanded)}