extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2025-06-24 19:41:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Page selection popup: from grid to flexbox

Browse Source
This commit is contained in:
Johannes Zillmann 2021-04-24 00:24:07 +02:00
parent 28c2b1a6a6
commit f7bf4d95b3
1 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ui/src/debug/PageSelectionPopup.svelte
View File

@ -23,17 +23,33 @@
} }
</script> </script>
<div class="absolute mt-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96" transition:slide> <div
class="absolute my-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96"
style="max-width: 77%;"
transition:slide>
<span class="mt-1 pr-2" on:click={$pagePinned && unpinPage}> <span class="mt-1 pr-2" on:click={$pagePinned && unpinPage}>
<Collection size="1x" class={$pagePinned ? 'hover:text-select cursor-pointer' : 'opacity-50'} /> <Collection size="1x" class={$pagePinned ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
</span> </span>
<div class="grid gap-3 grid-cols-5 sm:grid-cols-10 md:grid-cols-15 xl:grid-cols-20"> <div class="flex flex-wrap gap-1">
{#each new Array(pageControl.totalPages) as _, idx} {#each new Array(pageControl.totalPages) as _, idx}
<div <div
on:click={() => pageControl.pageHasItems(idx) && pinPage(idx)} class="flex-grow-0 px-2 w-12 max-w-xs border border-gray-300 rounded-full text-center {pageControl.pageHasItems(idx) ? ($pinnedPageIndex === idx ? 'bg-select' : 'hover:text-select hover:border-select cursor-pointer') : 'opacity-50'}"
class="px-2 border border-gray-300 rounded-full text-center {pageControl.pageHasItems(idx) ? ($pinnedPageIndex === idx ? 'bg-select' : 'hover:text-select hover:border-select cursor-pointer') : 'opacity-50'}"> on:click={() => pageControl.pageHasItems(idx) && pinPage(idx)}>
{#if showIndex}{idx}{:else}{$pageMapping.pageLabel(idx)}{/if} {#if showIndex}{idx}{:else}{$pageMapping.pageLabel(idx)}{/if}
</div> </div>
{/each} {/each}
</div> </div>
</div> </div>
<style>
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
</style>