Break27/sprachbund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tweak: navigation font size on mobile devices

Browse Source
This commit is contained in:
Break27 2024-09-20 18:31:34 +08:00
parent 24a026c58e
commit 23c1cc6b72
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/scripts/object.js
View File

@ -183,7 +183,7 @@ export class Folder extends BaseNode {
data-[active=true]:text-red-600 hover:text-neutral-950 data-[active=true]:text-red-600 hover:text-neutral-950
data-[active=true]:border-red-600 hover:border-neutral-800" data-[active=true]:border-red-600 hover:border-neutral-800"
> >
<a class="truncate" href="/${node.path}" <a class="truncate md:text-base text-lg" href="/${node.path}"
@click="router.emit('navigate'); router.from($event)" @click="router.emit('navigate'); router.from($event)"
>${node.name}</a> >${node.name}</a>
</div> </div>
@ -199,9 +199,11 @@ export class Folder extends BaseNode {
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" :class="open ? 'rotate-90' : ''"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" :class="open ? 'rotate-90' : ''">
<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg> </svg>
<span class="md:order-last order-first">${this.name}</span> <span class="md:order-last order-first md:text-base text-lg">
${this.name}
</span>
</div> </div>
<div x-show="open" style="--max: ${maxHeight}px" class="flex flex-col md:ml-4 ml-1 mb-1 md:pr-0 pr-8 overflow-hidden transition-[max-height]" <div x-show="open" style="--max: ${maxHeight}px" class="flex flex-col md:ml-4 ml-1 mb-1 md:pr-0 pr-1.5 overflow-hidden transition-[max-height]"
x-transition:enter="ease-out duration-100" x-transition:enter="ease-out duration-100"
x-transition:enter-start="max-h-0" x-transition:enter-start="max-h-0"
x-transition:enter-end="max-h-[var(--max)]" x-transition:enter-end="max-h-[var(--max)]"

15
src/scripts/search.js
View File

@ -25,14 +25,21 @@ export class Engine {
template(namespace) { template(namespace) {
return ` return `
<div x-data="{ value: '', active: false }" class="relative mx-5 mt-6" @focusin="active = true" @focusout="active = false"> <div class="relative mx-5 mt-6 md:text-base text-xl"
x-data="{ value: '', active: false }"
@focusin="active = true" @focusout="active = false"
>
<div class="flex focus-within:ring-2 ring-neutral-300 transition w-full items-center rounded-md border pl-1 py-0.5"> <div class="flex focus-within:ring-2 ring-neutral-300 transition w-full items-center rounded-md border pl-1 py-0.5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-neutral-400"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-neutral-400">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z" clip-rule="evenodd" />
</svg> </svg>
<input type="text" x-model="value" class="w-full px-2 placeholder:text-neutral-300 focus:outline-none" placeholder="Search page or heading..."> <input x-model="value"
class="w-full px-2 placeholder:text-neutral-300 placeholder:text-sm focus:outline-none"
type="text"
placeholder="Search page or heading..."
>
</div> </div>
<div x-show="active && value" class="absolute rounded-md border bg-white left-0 top-0 mt-9 min-w-48 max-h-96 shadow-xl overflow-y-auto overscroll-contain"> <div x-effect="console.log(active)" x-show="active && value" class="absolute rounded-md border bg-white left-0 top-0 mt-9 min-w-48 max-h-96 shadow-xl overflow-y-auto overscroll-contain">
<div x-data="{ results: [] }" x-effect="results = ${namespace}.search(value)" class="empty:hidden flex flex-col p-1.5"> <div x-data="{ results: [] }" x-effect="results = ${namespace}.search(value)" class="empty:hidden flex flex-col p-1.5">
<template x-for="result in results"> <template x-for="result in results">
<div x-html="${namespace}.generateHTML(result)" class="flex size-full"></div> <div x-html="${namespace}.generateHTML(result)" class="flex size-full"></div>
@ -51,7 +58,7 @@ export class Engine {
generateHTML(result) { generateHTML(result) {
return ` return `
<button class="flex flex-col size-full gap-y-1.5 text-start rounded-md hover:bg-neutral-200 p-2" <button class="flex flex-col size-full gap-y-1.5 text-start rounded-md hover:bg-neutral-200 p-2"
@click="router.goto(&quot;${result.path}&quot;); active = false" @click="$nextTick(() => active = false); router.goto(&quot;${result.path}&quot;)"
> >
<span>${result.name}</span> <span>${result.name}</span>
<span class="text-xs text-neutral-500" <span class="text-xs text-neutral-500"