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

Cushion between control bar and item header

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/Checkbox.svelte
View File

@ -6,7 +6,7 @@
<input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} /> <input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} />
<label <label
for="checkbox-{name}" 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> <style>
input:not(:checked) + label:hover { input:not(:checked) + label:hover {

2
ui/src/components/Popup.svelte
View File

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

13
ui/src/debug/ControlBar.svelte
View File

@ -34,7 +34,7 @@
$: pageIsPinned = !isNaN(pinnedPage); $: pageIsPinned = !isNaN(pinnedPage);
</script> </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"> <div class="flex items-center space-x-2">
{#if pageIsPinned} {#if pageIsPinned}
<span on:click={() => (pinnedPage = undefined)} transition:slideH={{ duration: 180, easing: linear }}> <span on:click={() => (pinnedPage = undefined)} transition:slideH={{ duration: 180, easing: linear }}>
@ -114,12 +114,5 @@
</div> </div>
</div> </div>
<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! -->
.controls { <div class="sticky top-8 h-3 bg-gray-50" style="z-index:1" />
@apply bg-gray-50;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
}
</style>

4
ui/src/debug/ItemTable.svelte
View File

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