fix: do not toggle collapsible if you click on a citation

This commit is contained in:
Jannik Streidl 2024-10-07 21:22:36 +02:00
parent 209948af6f
commit 73c291193b
2 changed files with 19 additions and 13 deletions

View File

@ -68,7 +68,7 @@
{#each _citations as citation, idx}
<div class="flex gap-1 text-xs font-semibold">
<button
class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
on:click={() => {
showCitationModal = true;
selectedCitation = citation;
@ -94,7 +94,7 @@
{#each _citations.slice(0, 2) as citation, idx}
<div class="flex gap-1 text-xs font-semibold">
<button
class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
on:click={() => {
showCitationModal = true;
selectedCitation = citation;
@ -130,7 +130,7 @@
{#each _citations as citation, idx}
<div class="flex gap-1 text-xs font-semibold">
<button
class="flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
class="no-toggle flex dark:text-gray-300 py-1 px-1 bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition rounded-xl max-w-96"
on:click={() => {
showCitationModal = true;
selectedCitation = citation;

View File

@ -8,32 +8,38 @@
export let open = false;
export let className = '';
export let title = null;
function handleClick(event) {
if (!event.target.closest('.no-toggle')) {
open = !open;
}
}
</script>
<div class={className}>
{#if title !== null}
<button class="w-full" on:click={() => (open = !open)}>
<div class=" w-full font-medium transition flex items-center justify-between gap-2">
<button class="w-full" on:click={handleClick}>
<div class="w-full font-medium transition flex items-center justify-between gap-2">
<div>
{title}
</div>
<div>
{#if open}
<ChevronUp strokeWidth="3.5" className="size-3.5 " />
<ChevronUp strokeWidth="3.5" className="size-3.5" />
{:else}
<ChevronDown strokeWidth="3.5" className="size-3.5 " />
<ChevronDown strokeWidth="3.5" className="size-3.5" />
{/if}
</div>
</div>
</button>
{:else}
<button on:click={() => (open = !open)}>
<div
class="flex items-center gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition"
>
<slot />
</div>
<button
type="button"
on:click={handleClick}
class="flex w-full items-center gap-2 text-left text-gray-500 transition hover:text-gray-700 dark:hover:text-gray-300"
>
<slot />
</button>
{/if}