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} {#each _citations as citation, idx}
<div class="flex gap-1 text-xs font-semibold"> <div class="flex gap-1 text-xs font-semibold">
<button <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={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
selectedCitation = citation; selectedCitation = citation;
@ -94,7 +94,7 @@
{#each _citations.slice(0, 2) as citation, idx} {#each _citations.slice(0, 2) as citation, idx}
<div class="flex gap-1 text-xs font-semibold"> <div class="flex gap-1 text-xs font-semibold">
<button <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={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
selectedCitation = citation; selectedCitation = citation;
@ -130,7 +130,7 @@
{#each _citations as citation, idx} {#each _citations as citation, idx}
<div class="flex gap-1 text-xs font-semibold"> <div class="flex gap-1 text-xs font-semibold">
<button <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={() => { on:click={() => {
showCitationModal = true; showCitationModal = true;
selectedCitation = citation; selectedCitation = citation;

View File

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