Add Trunk.toml

This commit is contained in:
eraden 2023-04-24 21:46:14 +02:00
parent 759c12ee9a
commit bab6b13698
5 changed files with 68 additions and 0 deletions

View File

@ -5,6 +5,7 @@ edition = "2021"
[dependencies]
sycamore = { version = "0.8.2", features = ['suspense'] }
sycamore-router = { version = "0.8" }
wasm_request = { version = "0.1.1" }
serde = { version = "*", features = ['derive'] }
serde_json = { version = "*" }

View File

@ -1,3 +1,5 @@
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<title>My first Sycamore app</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/tailwind.css"/>
</head>
<body></body>

View File

@ -13,6 +13,51 @@ pub fn Header<G: Html>(cx: Scope) -> View<G> {
) {
img(class = "rounded-full mr-2", style = "width: 30px") {}
span() { "OS Wilno" }
button(class="ml-auto cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-blueGray-400 rounded bg-transparent block outline-none focus:outline-none text-blueGray-300 lg:hidden", type="button") {
i(class="fas fa-bars")
}
div(class="items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out hidden") {
ul(class="lg:items-center flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row") {
li {
a(class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-500") {
i(class="lg:text-blueGray-300 text-blueGray-500 far fa-file-alt text-lg leading-lg mr-2")
"Docs"
}
}
}
ul(class="lg:items-center lg:ml-auto flex flex-wrap list-none pl-0 mb-0 flex flex-col list-none pl-0 mb-0 lg:flex-row") {
li {
a(class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out") {
"Elements"
}
}
li {
a(class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out") {
"Sections"
}
}
li(class = "relative") {
a(class="hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-800", href="") {
"Demo Pages"
i(class="ml-1 fas fa-caret-down transition-all duration-200 ease-in-out transform")
}
div(class="hidden z-50") {
div(class="origin-top-right bg-white text-base float-left p-2 border list-none text-left rounded-lg shadow-lg min-w-48 transition-all duration-100 ease-in-out transform scale-95 opacity-0 absolute") {
span(class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400") {
"Group 1"
}
a(class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100") {
"Demo page 1"
}
a(class="text-sm px-3 py-2 block w-full whitespace-nowrap bg-transparent hover:bg-blueGray-100 rounded transition-all duration-100") {
"Demo page 2"
}
span(class="uppercase font-bold text-xs px-3 pt-4 block w-full whitespace-nowrap bg-transparent text-blueGray-400") { "Group 2" }
}
}
}
}
}
}
}
}

View File

@ -29,11 +29,30 @@ async fn LocalBusinessesList<G: Html>(cx: Scope<'_>) -> View<G> {
create_signal(cx, businesses)
};
let page = create_signal(cx, || page);
let search = create_signal(cx, "".to_string());
view! {
cx,
div(class = "container mx-auto px-4") {
div(class = "items-center w-full lg:flex lg:w-auto flex-grow duration-300 transition-all ease-in-out lg:h-auto-important hidden") {
form(class = "flex flex-row flex-wrap items-center ml-auto mr-3 mt-4") {
div(class = "hover:opacity-75 px-3 py-4 lg:py-2 flex items-center text-xs uppercase font-bold transition-all duration-150 ease-in-out text-blueGray-500 pr-4") {
i(class = "lg:text-blueGray-300 text-blueGray-500 far text-lg leading-lg mr-2 fa-regular fa-magnifying-glass")
"Search"
}
div(class = "mb-3 pt-0") {
input(
id="search-local-business",
bind:value=search,
type="search",
placeholder = "Znajdź",
class="border-transparent shadow px-3 py-2 text-sm w-full placeholder-blueGray-200 text-blueGray-700 relative bg-white rounded-md outline-none focus:ring focus:ring-lightBlue-500 focus:ring-1 focus:border-lightBlue-500 border border-solid transition duration-200"
)
}
}
}
div(class = "mb-12 flex flex-wrap -mx-4") {
Indexed(
iterable=businesses,
view=|cx, business| view! { cx,