feat: mobile responsive patches page

src/app.css

@@ -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;
 }
 
 /*---------------*/

src/lib/components/atoms/DocsNavNode.svelte

@@ -1,25 +1,26 @@
 <script lang="ts">
-  import type { DocumentInfo } from '$lib/documentation.shared';
+	import type { DocumentInfo } from '$lib/documentation.shared';
-  export let info: DocumentInfo;
+	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}">
-    <a href="/docs/{info.slug}"><h5>{info.title}</h5></a>
+		<div class="doc-section item" class:selected={$page.url.pathname === `/docs/${info.slug}`}>
-  </div>
+			<h5>{info.title}</h5>
+		</div>
+	</a>
 </li>
 
-
 <style>
+	a {
+		text-decoration: none;
+	}
 
-  a {
+	li {
-    text-decoration: none;
+		list-style: none;
-  }
+	}
-
-  li {
-    list-style: none;
-  }
 	.item {
 		padding: 0.6rem 1rem;
 		border-radius: 8px;

src/lib/components/atoms/Search.svelte

@@ -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;
+		z-index: 1;
-		transform: translate(60%, 60%);
+		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);
+		color: var(--grey-five);
-		padding-left: 2.5rem;
 		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>

src/lib/components/atoms/TreeMenuButton.svelte

@@ -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={() =>
+	on:click={handleClick}
-		(selectedPkg = selectedPkg === name ? false : name) &&
-		window.scrollTo({ top: 0, behavior: 'smooth' })}
 >
 	<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>

src/lib/components/molecules/PatchCell.svelte

@@ -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>

src/lib/components/molecules/TreeMenu.svelte

@@ -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>

src/routes/patches/+page.svelte

@@ -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} />
+			<Search bind:searchTerm bind:searchTermFiltered title="Search patches" sticky={true} on:keyup={debounce} />
-			<span>
+			<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>