fernando/jerguero-rs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show search preview with hyperscript

Browse Source
This commit is contained in:
Araozu 2024-05-21 19:46:48 -05:00
parent 91965d8901
commit 3e56fd875e
2 changed files with 48 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/view/mod.rs
View File

@ -2,8 +2,7 @@ use maud::{html, Markup, DOCTYPE};
mod icons;
use icons::{magnifying_glass, bird};
use icons::{bird, magnifying_glass};
pub fn skeleton(body: Markup) -> Markup {
html! {
@ -21,6 +20,8 @@ pub fn skeleton(body: Markup) -> Markup {
link rel="preconnect" href="https://fonts.googleapis.com";
link rel="preconnect" href="https://fonts.gstatic.com" crossorigin;
link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap" rel="stylesheet";
// hyperscript
script src="https://unpkg.com/hyperscript.org@0.9.12" defer {}
}
body {
(body)
@ -31,28 +32,54 @@ pub fn skeleton(body: Markup) -> Markup {
fn navbar() -> Markup {
html! {
nav class="grid grid-cols-[3.5rem_auto_3.5rem] bg-c-primary fixed z-50 bottom-0 left-0 w-full h-14" {
// nav class="navbar gap-1 fixed z-50 bottom-0 left-0 w-full border-t border-[rgba(150,150,150,0.5)] bg-base-200 text-base-content" {
div class="table" {
a href="/" class="table-cell align-middle h-14 text-center" {
(bird("var(--c-on-bg)".into(), 36))
}
}
div class="relative" {
svg class="absolute z-10 -left-[15px] top-[9px] scale-x-50" fill="white" width="20" height="20" viewBox="0 0 50 50" {
path d="M 57.29217,4.9844012 V 56.568575 C 44.512514,39.388798 29.429048,35.264265 12.536889,30.729102 29.111034,27.220159 45.273777,21.221938 57.29217,4.9844012 Z" {}
}
input type="text" placeholder="Buscá una palabra" class="w-full md:w-auto py-2 px-1 rounded-md my-2";
}
div class="table" {
button class="table-cell align-middle h-14 text-center w-full" {
(magnifying_glass("var(--c-on-bg)".into(), 36))
nav class="fixed z-50 bottom-0 left-0 w-full h-14" {
div id="search-results" class="hidden absolute bottom-14 w-full bg-c-bg text-c-on-bg text-white border-t-4 border-l-4 border-r-4 border-c-primary rounded-tr-md rounded-tl-md" {
(inline_definition())
(inline_definition())
(inline_definition())
}
div class="grid grid-cols-[3.5rem_auto_3.5rem] bg-c-primary" {
div class="table" {
a href="/" class="table-cell align-middle h-14 text-center" {
(bird("var(--c-on-bg)".into(), 36))
}
}
div class="relative" {
svg class="absolute z-10 -left-[15px] top-[9px] scale-x-50" fill="white" width="20" height="20" viewBox="0 0 50 50" {
path d="M 57.29217,4.9844012 V 56.568575 C 44.512514,39.388798 29.429048,35.264265 12.536889,30.729102 29.111034,27.220159 45.273777,21.221938 57.29217,4.9844012 Z" {}
}
input
_="on keyup debounced at 300ms
set :x to my.value.length
if :x > 0
remove .hidden from #search-results
else
add .hidden to #search-results
end
"
type="text"
placeholder="Buscá una palabra"
class="w-full md:w-auto py-2 px-1 rounded-md my-2 bg-white text-black";
}
div class="table" {
button class="table-cell align-middle h-14 text-center w-full" {
(magnifying_glass("var(--c-on-bg)".into(), 36))
}
}
}
}
}
}
fn inline_definition() -> Markup {
html! {
div class="py-2 mx-2" {
span class="font-bold pr-2" { "Polola" }
span class="opacity-75" { "Otra palabra para decir enamorado/a" }
}
}
}
pub fn homepage() -> Markup {
skeleton(html! {
(navbar())

4
tailwind.config.js
View File

@ -13,7 +13,9 @@ module.exports = {
'serif': ["'Playfair Display'", "serif"],
},
colors: {
"c-primary": "var(--c-primary)"
"c-primary": "var(--c-primary)",
"c-bg": "var(--c-bg)",
"c-on-bg": "var(--c-on-bg)",
},
},
},