This commit is contained in:
2025-12-05 15:18:27 +01:00
parent 01a2c12feb
commit 78c85a429c
50 changed files with 596 additions and 221 deletions

View File

@@ -522,7 +522,7 @@ export function ScoringPatternSection({
const [activePresetFlyout, setActivePresetFlyout] = useState<string | null>(null);
const pointsInfoRef = useRef<HTMLButtonElement>(null);
const bonusInfoRef = useRef<HTMLButtonElement>(null);
const presetInfoRefs = useRef<Record<string, HTMLButtonElement | null>>({});
const presetInfoRefs = useRef<Record<string, HTMLElement | null>>({});
return (
<div className="space-y-5">
@@ -623,17 +623,25 @@ export function ScoringPatternSection({
)}
{/* Info button */}
<button
<div
ref={(el) => { presetInfoRefs.current[preset.id] = el; }}
type="button"
role="button"
tabIndex={0}
onClick={(e) => {
e.stopPropagation();
setActivePresetFlyout(activePresetFlyout === preset.id ? null : preset.id);
}}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.stopPropagation();
setActivePresetFlyout(activePresetFlyout === preset.id ? null : preset.id);
}
}}
className="flex h-6 w-6 items-center justify-center rounded-full text-gray-500 hover:text-primary-blue hover:bg-primary-blue/10 transition-colors shrink-0"
>
<HelpCircle className="w-3.5 h-3.5" />
</button>
</div>
</button>
{/* Preset Info Flyout */}
@@ -923,7 +931,7 @@ export function ChampionshipsSection({
const [showChampFlyout, setShowChampFlyout] = useState(false);
const [activeChampFlyout, setActiveChampFlyout] = useState<string | null>(null);
const champInfoRef = useRef<HTMLButtonElement>(null);
const champItemRefs = useRef<Record<string, HTMLButtonElement | null>>({});
const champItemRefs = useRef<Record<string, HTMLElement | null>>({});
const updateChampionship = (key: keyof LeagueConfigFormModel['championships'], value: boolean) => {
if (!onChange) return;
@@ -1073,17 +1081,25 @@ export function ChampionshipsSection({
</div>
{/* Info button */}
<button
<div
ref={(el) => { champItemRefs.current[champ.key] = el; }}
type="button"
role="button"
tabIndex={0}
onClick={(e) => {
e.stopPropagation();
setActiveChampFlyout(activeChampFlyout === champ.key ? null : champ.key);
}}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.stopPropagation();
setActiveChampFlyout(activeChampFlyout === champ.key ? null : champ.key);
}
}}
className="flex h-5 w-5 items-center justify-center rounded-full text-gray-500 hover:text-primary-blue hover:bg-primary-blue/10 transition-colors shrink-0"
>
<HelpCircle className="w-3 h-3" />
</button>
</div>
</button>
{/* Championship Item Info Flyout */}