mirror of
https://github.com/revanced/revanced-website.git
synced 2025-05-22 19:08:59 +02:00
feat(routes/patches): allow scrolling to footer without scrolling through patch cards
This commit is contained in:
parent
c54c69b5ac
commit
9defa75ae5
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user