Make page popup responsive

This commit is contained in:
Johannes Zillmann 2021-03-26 14:04:26 +01:00
parent 75c526129d
commit efcd2b01c0
2 changed files with 6 additions and 4 deletions

View File

@ -26,13 +26,11 @@
<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 <div class="grid gap-3 grid-cols-5 sm:grid-cols-10 md:grid-cols-15 xl:grid-cols-20">
class="grid gap-3"
style="grid-template-columns: repeat({Math.min(20, pageControl.totalPages)}, minmax(0, 1fr));">
{#each new Array(pageControl.totalPages) as _, idx} {#each new Array(pageControl.totalPages) as _, idx}
<div <div
on:click={() => pageControl.pageHasItems(idx) && pinPage(idx)} on:click={() => pageControl.pageHasItems(idx) && pinPage(idx)}
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'}"> 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'}">
{idx + 1} {idx + 1}
</div> </div>
{/each} {/each}

View File

@ -14,6 +14,10 @@ module.exports = {
// gray-400 hue-rotated 180deg // gray-400 hue-rotated 180deg
select: '#A8A297', select: '#A8A297',
}, },
gridTemplateColumns: {
15: 'repeat(15, minmax(0, 1fr))',
20: 'repeat(20, minmax(0, 1fr))',
},
}, },
}, },
variants: { variants: {