improve mobile ux

carlosqsilva · Sep 4, 2024 · c9d61b8 · c9d61b8
1 parent 448bef8
commit c9d61b8
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/app/src/components/search/index.tsx b/app/src/components/search/index.tsx
@@ -42,11 +42,11 @@ export function Search() {
 
 function SearchEmpty() {
 	return (
-		<div class="px-8 max-w-screen-lg mx-auto min-h-[80vh] flex flex-col gap-10 items-center justify-center">
+		<div class="px-8 max-w-screen-lg mx-auto min-h-[70vh] flex flex-col gap-10 items-center justify-center">
 			<Logo size="lg" />
 
-			<p class="text-xl text-zinc-600">
-				Search curated content from 7 programming newsletter
+			<p class="text-lg md:text-xl text-center text-zinc-600">
+				Search curated content from many programing/coding newsletter
 			</p>
 
 			<SearchInput class="w-full" />
@@ -57,17 +57,17 @@ function SearchEmpty() {
 function SearchResult() {
 	return (
 		<div class="h-screen flex flex-col">
-			<header class="px-4 border-b">
-				<div class="py-10 container mx-auto flex items-center gap-8">
-					<Logo />
+			<header class="md:px-4 md:border-b">
+				<div class="md:py-10 container mx-auto flex items-center gap-8">
+					<Logo class="max-[640px]:hidden" />
 
-					<SearchInput class="flex-1" />
+					<SearchInput class="flex-1 max-[640px]:rounded-none" />
 				</div>
 			</header>
 
-			<div class="px-4 flex-1 bg-zinc-50">
-				<main class="flex gap-8 h-full container mx-auto">
-					<div class="max-w-56 py-10 px-4">
+			<div class="flex-1 bg-zinc-50">
+				<main class="flex gap-6 h-full container mx-auto">
+					<div class="hidden md:block max-w-56 pt-6 pr-4">
 						<FilterOptions
 							onChange={(filters) => {
 								setSearchStore("searchFilter", filters);
@@ -88,7 +88,7 @@ function SearchResult() {
 
 					<div class="flex-1 flex flex-col">
 						<Show when={resultStore.results.length > 0}>
-							<div class="pt-5 text-zinc-800">
+							<div class="px-4 pt-5 text-zinc-800">
 								Found{" "}
 								<span class="font-semibold">{resultStore.results.length}</span>{" "}
 								items in {resultStore.searchTime} ms

diff --git a/app/src/components/search/result.tsx b/app/src/components/search/result.tsx
@@ -10,7 +10,7 @@ export function Result(props: {
 			rel="noreferrer"
 			class="p-4 py-5 hover:underline underline-offset-4 decoration-zinc-400"
 		>
-			<p class="text-lg text-zinc-700">{props.result.description}</p>
+			<p class="md:text-lg text-zinc-700">{props.result.description}</p>
 			<div class="text-zinc-500">
 				{props.result.date} | {props.result.source}
 			</div>

diff --git a/app/src/components/search/results.tsx b/app/src/components/search/results.tsx
@@ -31,7 +31,7 @@ export function Results() {
 	return (
 		<div class="flex-1 relative" ref={observeSize}>
 			<div
-				class="overflow-y-auto w-full absolute top-0 left-0"
+				class="overflow-y-auto w-full absolute top-0 left-0 px-4"
 				ref={listContainer}
 			>
 				<ul

diff --git a/app/src/components/ui/logo.tsx b/app/src/components/ui/logo.tsx
@@ -1,16 +1,23 @@
-import { mergeProps } from "solid-js";
+import { mergeProps, splitProps, type JSX } from "solid-js";
 import { cn } from "../../utils";
 
-interface LogoProps {
+interface LogoProps extends JSX.ButtonHTMLAttributes<HTMLDivElement> {
 	size?: "sm" | "lg";
 }
 
 export function Logo(props: LogoProps) {
 	const merged = mergeProps({ size: "sm" }, props);
-	const iconSize = merged.size === "sm" ? "64px" : "72px";
+	const [local, defaultProps] = splitProps(merged, ["size", "class"]);
+	const iconSize = local.size === "sm" ? "64px" : "72px";
 
 	return (
-		<div class="flex text-zinc-600 items-center">
+		<div
+			{...defaultProps}
+			class={cn(
+				"flex flex-nowrap flex-none text-zinc-600 items-center",
+				local.class,
+			)}
+		>
 			<svg
 				width={iconSize}
 				height={iconSize}
@@ -22,12 +29,11 @@ export function Logo(props: LogoProps) {
 					d="M182 112a6 6 0 0 1-6 6H96a6 6 0 0 1 0-12h80a6 6 0 0 1 6 6m-6 26H96a6 6 0 0 0 0 12h80a6 6 0 0 0 0-12m54-74v120a22 22 0 0 1-22 22H32a22 22 0 0 1-22-21.91V88a6 6 0 0 1 12 0v96a10 10 0 0 0 20 0V64a14 14 0 0 1 14-14h160a14 14 0 0 1 14 14m-12 0a2 2 0 0 0-2-2H56a2 2 0 0 0-2 2v120a21.84 21.84 0 0 1-2.41 10H208a10 10 0 0 0 10-10Z"
 				/>
 			</svg>
-			<div class="h-[36px] w-0.5 rounded bg-white" />
 			<div
 				class={cn(
 					"flex flex-col font-semibold leading-6 ml-1",
-					merged.size === "sm" && "text-base leading-5",
-					merged.size === "lg" && "text-xl leading-6",
+					local.size === "sm" && "text-base leading-5",
+					local.size === "lg" && "text-xl leading-6",
 				)}
 			>
 				<span>Newsletter</span>