better search layout on mobile
404 unmodified linesExpand all40540640740840940941041141241351 unmodified lines404 unmodified linesExpand all }); });
return ( <nav ref={(element) => { topbar = element; }} class="mx-auto space-x-4 px-6 py-2"> <nav ref={(element) => { topbar = element; }} class="mx-auto space-x-4 px-4 sm:px-6 py-2"> <div class="flex justify-between gap-4 p-0 items-center"> <div class="flex shrink-0 items-center gap-2"> <A href="/" class="flex shrink-0 items-center gap-2 no-underline hover:no-underline"> <img src="/static/logos/dolly.svg" alt="" class="size-8" />51 unmodified lines578 unmodified linesExpand all57958058158258358358458558658758758858959059159259359459559659759859960060160260360460558858959059159259359459559659759859960060160260360460560660760860961061160760860961061161261361361461461561661761861962067 unmodified lines578 unmodified linesExpand all const returnedCount = createMemo(() => searchQuery.data ? hits().length : undefined);
return ( <> <h1 class="text-2xl font-bold mb-4 px-2">search</h1> <h1 class="text-2xl font-bold mb-1 px-2">search</h1>
<div class="untangled-search-grid px-2"> <div class="untangled-search-main"> <div class="sticky top-0 z-10 bg-slate-100 dark:bg-gray-900"> <form onSubmit={onSubmit} class="sticky top-0 z-10 py-3 bg-slate-100 dark:bg-gray-900 flex items-center gap-2"> <div class="flex relative w-full"> <div class="flex-1 flex relative"> <input id="search-q" value={draft()} onInput={(event) => setDraft(event.currentTarget.value)} placeholder="search..." class="untangled-search-page-input peer" /> <A href={clearHref()} class={clsx( 'absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300', !draft().trim() && 'hidden', )} > <X class="w-4 h-4" /> </A> <form onSubmit={onSubmit} class="py-1.5 flex items-center gap-2"> <div class="flex relative w-full"> <div class="flex-1 flex relative"> <input id="search-q" value={draft()} onInput={(event) => setDraft(event.currentTarget.value)} placeholder="search..." class="untangled-search-page-input peer" /> <A href={clearHref()} class={clsx( 'absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300', !draft().trim() && 'hidden', )} > <X class="w-4 h-4" /> </A> </div> <button type="submit" class="untangled-search-page-submit"> <Search class="w-4 h-4" /> </button> </div> <button type="submit" class="untangled-search-page-submit"> <Search class="w-4 h-4" /> </button> </div> </form> </form>
<div class="md:hidden mt-3"> <TypeFilters query={q()} active={kind()} /> <div class="md:hidden pb-1.5"> <TypeFilters query={q()} active={kind()} /> </div> </div>
<Show when={q().trim()}67 unmodified lines290 unmodified linesExpand all291292293294295295296297298299352 unmodified linesExpand all290 unmodified linesExpand all </div> </section>
{/* Comments section */} <div class="flex flex-col gap-4"> <div class="flex flex-col gap-4 px-2 md:px-0"> <Show when={commentsQuery.data}> <CommentThreadsSection threads={commentThreads()} authorDid={owner.did}352 unmodified linesExpand all