move div up slots instead of using condition

This commit is contained in:
Luc Mcgrady 2025-08-09 13:04:13 +01:00
parent 05da8ee361
commit 407f046c32
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
3 changed files with 22 additions and 26 deletions

View file

@ -12,7 +12,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export { className as class }; export { className as class };
export let title: string; export let title: string;
export let onHelpClick: ((_e: MouseEvent | KeyboardEvent) => void) | null = null;
</script> </script>
<div <div
@ -28,18 +27,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<h1> <h1>
{title} {title}
</h1> </h1>
{#if onHelpClick} <div class="help-badge position-absolute" class:rtl>
<div <slot name="tooltip" />
on:click={onHelpClick} </div>
on:keydown={onHelpClick}
role="button"
tabindex="0"
class="help-badge position-absolute"
class:rtl
>
<slot name="tooltip" />
</div>
{/if}
</div> </div>
<slot /> <slot />
</div> </div>

View file

@ -8,7 +8,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
// When title is null (default), the graph is inlined, not having TitledContainer wrapper. // When title is null (default), the graph is inlined, not having TitledContainer wrapper.
export let title: string | null = null; export let title: string | null = null;
export let subtitle: string | null = null; export let subtitle: string | null = null;
export let onHelpClick: ((_e: MouseEvent | KeyboardEvent) => void) | null = null;
</script> </script>
{#if title == null} {#if title == null}
@ -19,8 +18,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot /> <slot />
</div> </div>
{:else} {:else}
<TitledContainer class="d-flex flex-column" {title} {onHelpClick}> <TitledContainer class="d-flex flex-column" {title}>
<slot slot="tooltip" name="tooltip"></slot> <slot name="tooltip" slot="tooltip"></slot>
<div class="graph d-flex flex-grow-1 flex-column justify-content-center"> <div class="graph d-flex flex-grow-1 flex-column justify-content-center">
{#if subtitle} {#if subtitle}
<div class="subtitle">{subtitle}</div> <div class="subtitle">{subtitle}</div>

View file

@ -62,17 +62,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}; };
</script> </script>
<Graph {title} {subtitle} {onHelpClick}> <Graph {title} {subtitle}>
<HelpModal <div
title={tr.statisticsTrueRetentionTitle()}
url={HelpPage.DeckOptions.fsrs}
slot="tooltip" slot="tooltip"
{helpSections} onclick={onHelpClick}
on:mount={(e) => { onkeydown={onHelpClick}
modal = e.detail.modal; role="button"
carousel = e.detail.carousel; tabindex="0"
}} >
/> <HelpModal
title={tr.statisticsTrueRetentionTitle()}
url={HelpPage.DeckOptions.fsrs}
{helpSections}
on:mount={(e) => {
modal = e.detail.modal;
carousel = e.detail.carousel;
}}
/>
</div>
<InputBox> <InputBox>
<label> <label>
<input type="radio" bind:group={mode} value={DisplayMode.Young} /> <input type="radio" bind:group={mode} value={DisplayMode.Young} />