From bab6b136983799d76132b67f181b08742ac96545 Mon Sep 17 00:00:00 2001 From: eraden Date: Mon, 24 Apr 2023 21:46:14 +0200 Subject: [PATCH] Add Trunk.toml --- crates/web/Cargo.toml | 1 + crates/web/assets/tailwind.css | 2 ++ crates/web/index.html | 1 + crates/web/src/components/header.rs | 45 ++++++++++++++++++++++++ crates/web/src/pages/local_businesses.rs | 19 ++++++++++ 5 files changed, 68 insertions(+) diff --git a/crates/web/Cargo.toml b/crates/web/Cargo.toml index 9da5182..038b645 100644 --- a/crates/web/Cargo.toml +++ b/crates/web/Cargo.toml @@ -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 = "*" } diff --git a/crates/web/assets/tailwind.css b/crates/web/assets/tailwind.css index b5c61c9..c82d0dc 100644 --- a/crates/web/assets/tailwind.css +++ b/crates/web/assets/tailwind.css @@ -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; diff --git a/crates/web/index.html b/crates/web/index.html index 626c88c..1f18dcc 100644 --- a/crates/web/index.html +++ b/crates/web/index.html @@ -3,6 +3,7 @@ My first Sycamore app + diff --git a/crates/web/src/components/header.rs b/crates/web/src/components/header.rs index 2012898..8a91a2f 100644 --- a/crates/web/src/components/header.rs +++ b/crates/web/src/components/header.rs @@ -13,6 +13,51 @@ pub fn Header(cx: Scope) -> View { ) { 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" } + } + } + } + } + } } } } diff --git a/crates/web/src/pages/local_businesses.rs b/crates/web/src/pages/local_businesses.rs index e4add66..29e9925 100644 --- a/crates/web/src/pages/local_businesses.rs +++ b/crates/web/src/pages/local_businesses.rs @@ -29,11 +29,30 @@ async fn LocalBusinessesList(cx: Scope<'_>) -> View { 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,