ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-30 14:44:28 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(Footer): improve mobile responsiveness

Browse Source
This commit is contained in:
afn 2023-06-06 08:32:58 -04:00
parent cc94848838
commit 889e1b543d
2 changed files with 107 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/layout/Footer.svelte → src/layout/Footer/FooterHost.svelte
View File

@ -7,12 +7,20 @@
import { createQuery } from '@tanstack/svelte-query';
import Query from '$lib/components/Query.svelte';
import FooterSection from './FooterSection.svelte';
const query = createQuery(['repositories'], queries.repositories);
</script>
<!-- squiggly divider line -->
<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<svg
aria-hidden="true"
width="100%"
height="8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
in:fly={{ y: 10, easing: quintOut, duration: 750 }}
>
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
<g clip-path="url(#clip0_2426_11367)">
<path
@ -39,16 +47,14 @@
</section>
<section class="links-container">
<ul>
<li>Pages</li>
<FooterSection title="Pages">
<li><a href="/">Home</a></li>
<li><a href="/download">Download</a></li>
<li><a href="/docs">Documentation</a></li>
<li><a href="/patches">Patches</a></li>
<li><a href="/contributors">Contributors</a></li>
</ul>
<ul>
<li>Repositories</li>
</FooterSection>
<FooterSection title="Repositories">
<Query {query} let:data>
{#each data as { name }}
<li>
@ -58,23 +64,18 @@
</li>
{/each}
</Query>
</ul>
</FooterSection>
<FooterSection title="Socials">
<ul>
<!-- to replace -->
<li>Socials</li>
<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
<li><a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a></li>
<li>
<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a>
</li>
<li><a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a></li>
<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
<li>
<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a>
</li>
<li>
<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a>
</li>
<li><a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a></li>
<li><a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a></li>
</ul>
</FooterSection>
</section>
</div>
<div class="footer-bottom">
@ -181,8 +182,17 @@
.links-container {
display: grid;
gap: 3rem;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
}
@media screen and (max-width: 768px) {
.links-container {
display: flex;
flex-direction: column;
gap: initial;
}
}
</style>

73
src/layout/Footer/FooterSection.svelte Normal file
View File

@ -0,0 +1,73 @@
<script lang="ts">
import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
export let title: string;
let expanded: boolean = false;
</script>
<div class="desktop-only">
<span>{title}</span>
<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
<slot />
</ul>
</div>
<div class="mobile-only">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<button class="title" on:click={() => (expanded = !expanded)}>
<span>
{title}
</span>
<span>{expanded ? '-' : '+'}</span>
</button>
{#if expanded}
<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
<slot />
</ul>
{/if}
</div>
<style lang="scss">
span {
list-style: none;
color: var(--grey-five);
font-size: 0.9rem;
font-weight: 500;
}
ul {
margin: 1.25rem 0rem;
display: flex;
gap: 1rem;
flex-direction: column;
width: max-content;
}
.title {
display: flex;
justify-content: space-between;
background-color: transparent;
border: none;
width: 100%;
margin: 1.5rem 0;
cursor: pointer;
}
.mobile-only:not(:last-child) {
border-bottom: 1px solid var(--grey-three);
}
.mobile-only {
display: none;
}
@media screen and (max-width: 768px) {
.mobile-only {
display: block;
}
.desktop-only {
display: none;
}
}
</style>