Skip to content

Commit

Permalink
fix mobile styles for lists (chrisbenincasa#423)
Browse files Browse the repository at this point in the history
  • Loading branch information
markdavella authored May 8, 2024
1 parent 1a8e09d commit 5aefa9d
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 18 deletions.
19 changes: 16 additions & 3 deletions web/src/components/channel_config/ChannelProgrammingConfig.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,14 @@
import { Alert, Box, Link, Stack } from '@mui/material';
import { Link as RouterLink } from 'react-router-dom';
import {
Alert,
Box,
Link,
Stack,
useMediaQuery,
useTheme,
} from '@mui/material';
import { DateTimePicker } from '@mui/x-date-pickers';
import dayjs, { Dayjs } from 'dayjs';
import { Link as RouterLink } from 'react-router-dom';
import { useSlideSchedule } from '../../hooks/programming_controls/useSlideSchedule.ts';
import { usePreloadedChannelEdit } from '../../hooks/usePreloadedChannel.ts';
import { setChannelStartTime } from '../../store/channelEditor/actions.ts';
Expand All @@ -12,6 +19,8 @@ import { ChannelProgrammingTools } from './ChannelProgrammingTools.tsx';

export function ChannelProgrammingConfig() {
const { currentEntity: channel, schedule } = usePreloadedChannelEdit();
const theme = useTheme();
const smallViewport = useMediaQuery(theme.breakpoints.down('sm'));

const slideSchedule = useSlideSchedule();

Expand Down Expand Up @@ -74,7 +83,11 @@ export function ChannelProgrammingConfig() {
</Stack>

<ChannelProgrammingList
virtualListProps={{ width: '100%', height: 600, itemSize: 35 }}
virtualListProps={{
width: '100%',
height: 600,
itemSize: smallViewport ? 70 : 35,
}}
/>
</Box>
);
Expand Down
45 changes: 31 additions & 14 deletions web/src/components/channel_config/ChannelProgrammingList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@ import InfoOutlined from '@mui/icons-material/InfoOutlined';
import MusicNote from '@mui/icons-material/MusicNote';
import TheatersIcon from '@mui/icons-material/Theaters';
import TvIcon from '@mui/icons-material/Tv';
import { ListItemIcon, Typography, lighten } from '@mui/material';
import {
ListItemIcon,
Typography,
lighten,
useMediaQuery,
useTheme,
} from '@mui/material';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List';
Expand Down Expand Up @@ -175,6 +181,9 @@ const ProgramListItem = ({
},
}));

const theme = useTheme();
const smallViewport = useMediaQuery(theme.breakpoints.down('sm'));

const startTime = ListItemTimeFormatter.format(startTimeDate);
// console.log(ListItemTimeFormatter.formatToParts(startTimeDate));

Expand Down Expand Up @@ -235,7 +244,8 @@ const ProgramListItem = ({
secondaryAction={
enableDrag && isDragging ? null : (
<>
{program.type === 'flex' || program.type === 'redirect' ? (
{(!smallViewport && program.type === 'flex') ||
program.type === 'redirect' ? (
<IconButton
onClick={() => onEditClicked({ ...program, index })}
edge="end"
Expand Down Expand Up @@ -264,21 +274,28 @@ const ProgramListItem = ({
) : (
<>
<ListItemIcon
sx={{ minWidth: program.type === 'content' ? 35 : null }}
sx={{
minWidth: smallViewport || program.type === 'content' ? 35 : null,
}}
>
<DragIndicatorIcon />
</ListItemIcon>
{program.type === 'content' ? (
<ListItemIcon
onClick={handleInfoButtonClick}
sx={{ cursor: 'pointer', minWidth: 0, pr: 1 }}
>
<InfoOutlined />
</ListItemIcon>
) : (
<Box sx={{ pr: 1, width: 24 }} />
)}
{icon ?? <Box sx={{ pr: 1, width: 20 }} />}

{!smallViewport ? (
program.type === 'content' ? (
<ListItemIcon
onClick={handleInfoButtonClick}
sx={{ cursor: 'pointer', minWidth: 0, pr: 1 }}
>
<InfoOutlined />
</ListItemIcon>
) : (
<Box sx={{ pr: 1, width: 20 }} />
)
) : null}

{!smallViewport ? icon ?? <Box sx={{ pr: 1, width: 20 }} /> : null}

<ListItemText
primary={title}
sx={{
Expand Down
6 changes: 5 additions & 1 deletion web/src/pages/channels/TimeSlotEditorPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
SelectChangeEvent,
Snackbar,
Typography,
useMediaQuery,
useTheme,
} from '@mui/material';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { dayjsMod, scheduleTimeSlots } from '@tunarr/shared';
Expand Down Expand Up @@ -419,6 +421,8 @@ export default function TimeSlotEditorPage() {
);

const updateLineupMutation = useUpdateLineup();
const theme = useTheme();
const smallViewport = useMediaQuery(theme.breakpoints.down('sm'));

// TODO: This can be shared between random / time slots
const programOptions: ProgramOption[] = useMemo(() => {
Expand Down Expand Up @@ -824,7 +828,7 @@ export default function TimeSlotEditorPage() {
virtualListProps={{
width: '100%',
height: 400,
itemSize: 35,
itemSize: smallViewport ? 70 : 35,
overscanCount: 5,
}}
/>
Expand Down

0 comments on commit 5aefa9d

Please sign in to comment.