From 83297fdab5ae84ef3c59075d285a0fca9615c352 Mon Sep 17 00:00:00 2001 From: Franklin Date: Mon, 13 Mar 2023 12:36:14 -0400 Subject: [PATCH] Search bar UI done --- css/body.css | 9 +++ css/navbar.css | 2 +- css/search.css | 54 ++++++++++++++++++ dist/body-1dfd5cf65077c12.css | 3 - dist/body-546d222c63c2d8b.css | 12 ++++ dist/index.html | 11 ++-- ...05a9cf.css => navbar-ae445ce41799b0c9.css} | 2 +- ...emax-template-frontend-88cf78e1286700d.js} | 10 ++-- ...template-frontend-88cf78e1286700d_bg.wasm} | Bin 3120296 -> 3169536 bytes dist/search-b6fa05ad5c0c5cf2.css | 54 ++++++++++++++++++ index.html | 1 + src/pages/contact.rs | 2 +- src/pages/details.rs | 2 +- src/pages/landing.rs | 2 +- src/pages/not_found.rs | 2 +- src/pages/search.rs | 50 ++++++++++++---- src/routes/main_router.rs | 2 +- 17 files changed, 186 insertions(+), 32 deletions(-) create mode 100644 css/search.css delete mode 100644 dist/body-1dfd5cf65077c12.css create mode 100644 dist/body-546d222c63c2d8b.css rename dist/{navbar-c70cbfee705a9cf.css => navbar-ae445ce41799b0c9.css} (99%) rename dist/{remax-template-frontend-139320c0b200f6ae.js => remax-template-frontend-88cf78e1286700d.js} (98%) rename dist/{remax-template-frontend-139320c0b200f6ae_bg.wasm => remax-template-frontend-88cf78e1286700d_bg.wasm} (54%) create mode 100644 dist/search-b6fa05ad5c0c5cf2.css diff --git a/css/body.css b/css/body.css index b036c34..bdf296b 100644 --- a/css/body.css +++ b/css/body.css @@ -1,3 +1,12 @@ body { margin: 0; /* Remove body margins */ +} + +.page-container { + padding-top: 74px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + } \ No newline at end of file diff --git a/css/navbar.css b/css/navbar.css index 1f93ce3..70034d3 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -11,7 +11,7 @@ align-items: center; align-items: stretch; background-color: #252631; - min-height: 44px; + min-height: 74px; } .navbar-container { display: flex; diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..60e4652 --- /dev/null +++ b/css/search.css @@ -0,0 +1,54 @@ + + +.property-search-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px 50px; + flex-grow: 1; +} + +.property-search-bar-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + min-width: 400px; + max-width: 600px; + width: 100%; + padding: 0px 20px; + min-height: 50px; + border: 0.5px solid rgba(0, 0, 0, 0.08); + border-radius: 30px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px; + background-color: white; + flex-grow: 1; + + color: #252631; +} + +.property-search-bar { + border: 0px; + padding: 10px; + outline: none; + font-family: Source Sans Pro; + font-size: 15px; + flex-grow: 1; +} + +.property-search-filters-container { + color: black; +} + +.property-search-filter-item { + color: gray; +} + +.property-search-results-container { + color: purple; +} + +.property-search-result-card { + color: orange +} \ No newline at end of file diff --git a/dist/body-1dfd5cf65077c12.css b/dist/body-1dfd5cf65077c12.css deleted file mode 100644 index b036c34..0000000 --- a/dist/body-1dfd5cf65077c12.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - margin: 0; /* Remove body margins */ -} \ No newline at end of file diff --git a/dist/body-546d222c63c2d8b.css b/dist/body-546d222c63c2d8b.css new file mode 100644 index 0000000..bdf296b --- /dev/null +++ b/dist/body-546d222c63c2d8b.css @@ -0,0 +1,12 @@ +body { + margin: 0; /* Remove body margins */ +} + +.page-container { + padding-top: 74px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + +} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html index 1357e5a..f5420d2 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,15 +1,16 @@ Yew App - - + + + - - - diff --git a/src/pages/contact.rs b/src/pages/contact.rs index 4e687ca..e5636c3 100644 --- a/src/pages/contact.rs +++ b/src/pages/contact.rs @@ -8,7 +8,7 @@ pub fn contact_page() -> Html { html!{ <> -
+
{"Contact Page"}
diff --git a/src/pages/details.rs b/src/pages/details.rs index dfd83c7..f0f290e 100644 --- a/src/pages/details.rs +++ b/src/pages/details.rs @@ -3,6 +3,6 @@ use yew::prelude::*; #[function_component(DetailsPage)] pub fn details_page() -> Html { html!{ -
{"Details Page"}
+
{"Details Page"}
} } \ No newline at end of file diff --git a/src/pages/landing.rs b/src/pages/landing.rs index d355461..7561ee0 100644 --- a/src/pages/landing.rs +++ b/src/pages/landing.rs @@ -8,7 +8,7 @@ pub fn landing_page() -> Html { html!{ <> -
+
{"Landing Page"}
diff --git a/src/pages/not_found.rs b/src/pages/not_found.rs index b5bdcb6..7f3efc2 100644 --- a/src/pages/not_found.rs +++ b/src/pages/not_found.rs @@ -7,7 +7,7 @@ pub fn not_found_page() -> Html { html! { <> -
+
{"Not found page"}
diff --git a/src/pages/search.rs b/src/pages/search.rs index 476faac..dc9d5bd 100644 --- a/src/pages/search.rs +++ b/src/pages/search.rs @@ -4,6 +4,44 @@ use yew::prelude::*; use crate::components::nav_bar::NavigationBar; +#[function_component(SearchPage)] +pub fn search_page(_props: &SearchPageProperties) -> Html { + let search_text = use_state(|| String::new()); + let clear_search_input = { + let search_text = search_text.clone(); + Callback::from(move |_| { + search_text.set(String::new()) + }) + }; + html!{ + <> + +
+
+
+ + + +
+ +
+
+
+
+
+
+
+
+ + } +} + +#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Properties)] +pub struct SearchPageProperties { + pub property_state: PropertyState +} + + #[derive(Debug, Clone, Default, PartialEq, Eq, PartialOrd, Ord)] pub enum PropertyState { Finished, @@ -30,16 +68,4 @@ impl FromStr for PropertyState { _ => Err(()) } } -} - -#[function_component(SearchPage)] -pub fn search_page() -> Html { - html!{ - <> - -
- {"Search page"} -
- - } } \ No newline at end of file diff --git a/src/routes/main_router.rs b/src/routes/main_router.rs index b8a7ccf..a011bba 100644 --- a/src/routes/main_router.rs +++ b/src/routes/main_router.rs @@ -24,7 +24,7 @@ pub enum Route { pub fn switch(routes: Route) -> Html { match routes { Route::LandingPage => html! { }, - Route::Search { property_state: _ } => html! { }, + Route::Search { property_state } => html! { }, Route::Details { property_id: _ } => html! { }, Route::NotFound => html! { }, Route::Contact => html! { }