Cushion between control bar and item header

* Makes sure item rows not getting displayed above the sticky header nor does the header get cut off at it's top
This commit is contained in:
Johannes Zillmann 2021-03-07 21:52:32 +01:00
parent 1154eb3eab
commit 1a02c41059
4 changed files with 7 additions and 14 deletions

View File

@ -6,7 +6,7 @@
<input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} />
<label
for="checkbox-{name}"
class="py-0.5 px-1 border-t-2 border-b-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
class="px-1 border-t-2 border-b-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
<style>
input:not(:checked) + label:hover {

View File

@ -25,6 +25,6 @@
<style>
.popupContent :global(*) {
@apply z-20;
@apply z-30;
}
</style>

View File

@ -34,7 +34,7 @@
$: pageIsPinned = !isNaN(pinnedPage);
</script>
<div class="controls py-2">
<div class="sticky top-0 pt-2 pb-1 z-20 bg-gray-50">
<div class="flex items-center space-x-2">
{#if pageIsPinned}
<span on:click={() => (pinnedPage = undefined)} transition:slideH={{ duration: 180, easing: linear }}>
@ -114,12 +114,5 @@
</div>
</div>
<style>
.controls {
@apply bg-gray-50;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
}
</style>
<!-- Little cushion sitting between the control bar and the item header. Relevant is the z-index. Item headers should go over it, item rows under! -->
<div class="sticky top-8 h-3 bg-gray-50" style="z-index:1" />

View File

@ -153,7 +153,7 @@
@apply whitespace-nowrap;
position: -webkit-sticky;
position: sticky;
top: 2.7em;
top: 2.4em;
z-index: 2;
}
@ -161,7 +161,7 @@
@apply px-1;
position: -webkit-sticky;
position: sticky;
top: 2.6em;
top: 2.4em;
z-index: 2;
}
td:not(#page) {