mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
feat: mobile responsive patches page
This commit is contained in:
afn
parent
e54c4fb670
commit
63a36628ea
@ -48,6 +48,7 @@ body {
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: #202126;
|
||||
--grey-seven: #18191d;
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
@ -97,7 +98,7 @@ h5 {
|
||||
h6 {
|
||||
color: var(--grey-five);
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/*---------------*/
|
||||
|
||||
@ -1,25 +1,26 @@
|
||||
<script lang="ts">
|
||||
import type { DocumentInfo } from '$lib/documentation.shared';
|
||||
export let info: DocumentInfo;
|
||||
import type { DocumentInfo } from '$lib/documentation.shared';
|
||||
export let info: DocumentInfo;
|
||||
import { page } from '$app/stores';
|
||||
</script>
|
||||
|
||||
<!-- Always part of a list -->
|
||||
<li>
|
||||
<div class="doc-section item">
|
||||
<a href="/docs/{info.slug}"><h5>{info.title}</h5></a>
|
||||
</div>
|
||||
<a href="/docs/{info.slug}">
|
||||
<div class="doc-section item" class:selected={$page.url.pathname === `/docs/${info.slug}`}>
|
||||
<h5>{info.title}</h5>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
.item {
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
export let title: string;
|
||||
export let searchTerm: string | null;
|
||||
export let searchTermFiltered: string | null
|
||||
export let searchTermFiltered: string | null;
|
||||
import { fade } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
searchTerm = null;
|
||||
searchTermFiltered = null;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<div>
|
||||
@ -35,17 +34,21 @@
|
||||
|
||||
<style>
|
||||
#search {
|
||||
/* umm dont ask */
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
transform: translate(60%, 60%);
|
||||
z-index: 1;
|
||||
left: 23px;
|
||||
top: 52px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
#clear {
|
||||
position: absolute;
|
||||
right: 42px;
|
||||
top: 52px;
|
||||
z-index: 1;
|
||||
height: 20px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
transform: translate(1060%, 60%);
|
||||
}
|
||||
|
||||
.clear {
|
||||
@ -55,19 +58,43 @@
|
||||
input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0.75rem 1rem;
|
||||
padding: 1rem 3rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
padding-left: 2.5rem;
|
||||
color: var(--grey-five);
|
||||
width: 100%;
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--grey-five);
|
||||
color: var(--grey-eight);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#search {
|
||||
left: 26px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
#clear {
|
||||
right: 26px;
|
||||
top: 38px;
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--grey-one);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
<script lang="ts">
|
||||
export let selectedPkg: string | boolean;
|
||||
export let name: string;
|
||||
|
||||
function handleClick() {
|
||||
selectedPkg = selectedPkg === name ? false : name
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
class="package"
|
||||
class:selected={selectedPkg === name}
|
||||
on:click={() =>
|
||||
(selectedPkg = selectedPkg === name ? false : name) &&
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
on:click={handleClick}
|
||||
>
|
||||
<h5>{name}</h5>
|
||||
</div>
|
||||
@ -47,4 +50,25 @@
|
||||
.package:not(.selected):hover h5 {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.package {
|
||||
border-radius: 12px;
|
||||
width: max-content;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
.package h5 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.package:not(.selected):hover h5 {
|
||||
color: var(--grey-five);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -86,6 +86,7 @@
|
||||
background-color: var(--grey-two);
|
||||
padding: 0.2rem 0.4rem;
|
||||
display: flex;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
#option-title {
|
||||
@ -156,4 +157,10 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.patch-container {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="menu">
|
||||
<div class="package-list">
|
||||
<div class="slot">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@ -24,7 +24,7 @@
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.package-list {
|
||||
.slot {
|
||||
margin-top: 0.75rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@ -32,4 +32,12 @@
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.menu {
|
||||
padding: 0.75rem;
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -68,8 +68,8 @@
|
||||
<TreeMenu>
|
||||
<!-- Must bind both variables: we get searchTerm from the text input, -->
|
||||
<!-- and searchTermFiltered gets cleared with the clear button -->
|
||||
<Search bind:searchTerm bind:searchTermFiltered title="Search patches" on:keyup={debounce} />
|
||||
<span>
|
||||
<Search bind:searchTerm bind:searchTermFiltered title="Search patches" sticky={true} on:keyup={debounce} />
|
||||
<span class="packages">
|
||||
{#each packages as pkg}
|
||||
<TreeMenuButton bind:selectedPkg name={pkg} />
|
||||
{/each}
|
||||
@ -85,7 +85,7 @@
|
||||
{#if filterByPackage(selectedPkg, patch.compatiblePackages) || !selectedPkg}
|
||||
<!-- ...same with search -->
|
||||
{#if search(patch) || !searchTermFiltered}
|
||||
<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
|
||||
<div in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
|
||||
<PatchCell {patch} />
|
||||
</div>
|
||||
{/if}
|
||||
@ -105,10 +105,6 @@
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
aside {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.patches-container {
|
||||
margin-top: 6.7rem;
|
||||
display: flex;
|
||||
@ -121,4 +117,33 @@
|
||||
padding-bottom: 3rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
grid-template-columns: none;
|
||||
flex-direction: column;
|
||||
margin-top: 4rem;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.patches-container {
|
||||
padding-left: 0.75rem;
|
||||
padding-bottom: 1.25rem;
|
||||
margin-top: 0;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.packages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
height: 2.75rem;
|
||||
gap: 0.5rem;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.packages::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user