feat(routes/patches): allow scrolling to footer without scrolling through patch cards

This commit is contained in:
PalmDevs 2024-06-07 00:10:18 +07:00
parent c54c69b5ac
commit 9defa75ae5
No known key found for this signature in database
GPG Key ID: 3E6E83A6DD60F38D
2 changed files with 37 additions and 20 deletions

View File

@ -134,20 +134,20 @@
title="Search for patches"
on:keyup={debounce(update)}
/>
<div class="filter-chips" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<FilterChip
selected={!!selectedPkg}
dropdown
on:click={() => (mobilePackages = !mobilePackages)}
>
{selectedPkg || 'Packages'}
</FilterChip>
<!-- <FilterChip check>Universal</FilterChip>
<FilterChip>Patch options</FilterChip> -->
</div>
</div>
</div>
<main>
<div class="filter-chips" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<FilterChip
selected={!!selectedPkg}
dropdown
on:click={() => (mobilePackages = !mobilePackages)}
>
{selectedPkg || 'Packages'}
</FilterChip>
<!-- <FilterChip check>Universal</FilterChip>
<FilterChip>Patch options</FilterChip> -->
</div>
<Query {query} let:data>
<div class="mobile-packages-Dialogue">
@ -204,6 +204,8 @@
width: min(90%, 80rem);
margin-inline: auto;
gap: 1.5rem;
height: 100vh;
height: 100dvh;
}
.search {
@ -218,7 +220,7 @@
}
.patches-container {
overflow: hidden;
overflow: auto;
border-radius: 20px;
margin-top: 1.5rem;
display: flex;
@ -227,7 +229,7 @@
width: 100%;
position: sticky;
z-index: 1;
min-height: calc(100vh - 6rem);
height: calc(100vh - 12rem);
margin-bottom: 3rem;
}
@ -254,6 +256,15 @@
gap: 0;
}
.patches-container {
height: calc(100vh - 14rem);
}
.mobile-packages-Dialogue {
/* CSS black magic made this have a weird gap, so this fixes it */
position: absolute;
}
aside {
display: none;
}

View File

@ -1,6 +1,8 @@
<div class="menu">
<h6>Packages</h6>
<hr />
<div class="header">
<h6>Packages</h6>
<hr />
</div>
<div class="slot">
<slot />
</div>
@ -8,14 +10,11 @@
<style>
.menu {
height: calc(100vh - 60px);
height: calc(100vh - 10.5rem);
width: 100%;
padding: 0px 30px 30px 10px;
padding: 0px 30px 0px 10px;
display: flex;
flex-direction: column;
position: sticky;
top: 60px;
padding-top: calc(6rem - 60px);
overflow-y: scroll;
}
@ -26,6 +25,13 @@
background-color: var(--accent-color);
}
.header {
padding-top: calc(6rem - 64px);
position: sticky;
top: 0;
background-color: var(--bg-color);
}
.slot {
margin-top: 0.75rem;
display: flex;