Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-07-19 01:25:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(guide): improve program badge display for collapsed state (moved badges back to their own line)

Browse source
This commit is contained in:
SergeantPanda 2026-03-06 14:16:12 -06:00
parent 4aa0d3ae01
commit 3134a29f16
1 changed files with 122 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

232
frontend/src/pages/Guide.jsx
View file

@ -999,38 +999,43 @@ export default function TVChannelGuide({ startDate, endDate }) {
></div>
)}
{program.title}
{!isExpanded && seasonEpisodeLabel && (
<Badge
size="xs"
variant="light"
color="gray"
style={{ flexShrink: 0 }}
>
{seasonEpisodeLabel}
</Badge>
)}
{!isExpanded && program.is_live && (
<Badge
size="xs"
variant="light"
color="red"
style={{ flexShrink: 0 }}
>
LIVE
</Badge>
)}
{!isExpanded && program.is_new && (
<Badge
size="xs"
variant="light"
color="green"
style={{ flexShrink: 0 }}
>
NEW
</Badge>
)}
</Group>
</Text>
{!isExpanded &&
(seasonEpisodeLabel || program.is_live || program.is_new) && (
<Group gap={4} wrap="nowrap">
{seasonEpisodeLabel && (
<Badge
size="xs"
variant="light"
color="gray"
style={{ flexShrink: 0 }}
>
{seasonEpisodeLabel}
</Badge>
)}
{program.is_live && (
<Badge
size="xs"
variant="light"
color="red"
style={{ flexShrink: 0 }}
>
LIVE
</Badge>
)}
{program.is_new && (
<Badge
size="xs"
variant="light"
color="green"
style={{ flexShrink: 0 }}
>
NEW
</Badge>
)}
</Group>
)}
{!isExpanded && (program.sub_title || program.description) && (
<Text
size="xs"
@ -1046,86 +1051,93 @@ export default function TVChannelGuide({ startDate, endDate }) {
{program.sub_title || program.description}
</Text>
)}
{isExpanded && (program.sub_title || seasonEpisodeLabel || program.is_new || program.is_live || program.is_premiere || program.is_finale) && (
<Group gap="xs" wrap="nowrap" align="center">
{program.sub_title && (
<Text
size="sm"
fs="italic"
style={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
minWidth: 0,
}}
c={isPast ? '#718096' : '#e2e8f0'}
>
{program.sub_title}
</Text>
)}
{seasonEpisodeLabel && (
<Badge
size="xs"
variant="light"
color="gray"
style={{ flexShrink: 0 }}
>
{seasonEpisodeLabel}
</Badge>
)}
{program.is_live && (
<Badge
size="xs"
variant="light"
color="red"
style={{ flexShrink: 0 }}
>
LIVE
</Badge>
)}
{program.is_new && (
<Badge
size="xs"
variant="light"
color="green"
style={{ flexShrink: 0 }}
>
NEW
</Badge>
)}
{program.is_premiere && (
<Badge
size="xs"
variant="light"
color="yellow"
style={{ flexShrink: 0 }}
>
PREMIERE
</Badge>
)}
{program.is_finale && (
<Badge
size="xs"
variant="light"
color="orange"
style={{ flexShrink: 0 }}
>
FINALE
</Badge>
)}
</Group>
)}
<Text
size="sm"
style={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
}}
>
{format(programStart, timeFormat)} -{' '}
{format(programEnd, timeFormat)}
</Text>
{isExpanded &&
(program.sub_title ||
seasonEpisodeLabel ||
program.is_new ||
program.is_live ||
program.is_premiere ||
program.is_finale) && (
<Group gap="xs" wrap="nowrap" align="center">
{program.sub_title && (
<Text
size="sm"
fs="italic"
style={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
minWidth: 0,
}}
c={isPast ? '#718096' : '#e2e8f0'}
>
{program.sub_title}
</Text>
)}
{seasonEpisodeLabel && (
<Badge
size="xs"
variant="light"
color="gray"
style={{ flexShrink: 0 }}
>
{seasonEpisodeLabel}
</Badge>
)}
{program.is_live && (
<Badge
size="xs"
variant="light"
color="red"
style={{ flexShrink: 0 }}
>
LIVE
</Badge>
)}
{program.is_new && (
<Badge
size="xs"
variant="light"
color="green"
style={{ flexShrink: 0 }}
>
NEW
</Badge>
)}
{program.is_premiere && (
<Badge
size="xs"
variant="light"
color="yellow"
style={{ flexShrink: 0 }}
>
PREMIERE
</Badge>
)}
{program.is_finale && (
<Badge
size="xs"
variant="light"
color="orange"
style={{ flexShrink: 0 }}
>
FINALE
</Badge>
)}
</Group>
)}
<Group gap={6} wrap="nowrap" align="center">
<Text
size="sm"
style={{
whiteSpace: 'nowrap',
flexShrink: 0,
}}
>
{format(programStart, timeFormat)} -{' '}
{format(programEnd, timeFormat)}
</Text>
</Group>
{isExpanded && program.description && (
<Text
size="xs"