franklinblanco
/
remax-frontend-rs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Search bar UI done

This commit is contained in:
Franklin 2023-03-13 12:36:14 -04:00
parent 276512841f
commit 83297fdab5
17 changed files with 186 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/body.css
View File

@ -1,3 +1,12 @@
body { body {
margin: 0; /* Remove body margins */ margin: 0; /* Remove body margins */
} }
.page-container {
padding-top: 74px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}

2
css/navbar.css
View File

@ -11,7 +11,7 @@
align-items: center; align-items: center;
align-items: stretch; align-items: stretch;
background-color: #252631; background-color: #252631;
min-height: 44px; min-height: 74px;
} }
.navbar-container { .navbar-container {
display: flex; display: flex;

54
css/search.css Normal file
View File

@ -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
}

3
dist/body-1dfd5cf65077c12.css vendored
View File

@ -1,3 +0,0 @@
body {
margin: 0; /* Remove body margins */
}

12
dist/body-546d222c63c2d8b.css vendored Normal file
View File

@ -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;
}

11
dist/index.html vendored
View File

@ -1,15 +1,16 @@
<!DOCTYPE html><html><head> <!DOCTYPE html><html><head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Yew App</title> <title>Yew App</title>
<link rel="stylesheet" href="/body-1dfd5cf65077c12.css"> <link rel="stylesheet" href="/body-546d222c63c2d8b.css">
<link rel="stylesheet" href="/navbar-c70cbfee705a9cf.css"> <link rel="stylesheet" href="/navbar-ae445ce41799b0c9.css">
<link rel="stylesheet" href="/landing-c920ca43256fdcb9.css"> <link rel="stylesheet" href="/landing-c920ca43256fdcb9.css">
<link rel="stylesheet" href="/search-b6fa05ad5c0c5cf2.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
<link rel="preload" href="/remax-template-frontend-139320c0b200f6ae_bg.wasm" as="fetch" type="application/wasm" crossorigin=""> <link rel="preload" href="/remax-template-frontend-88cf78e1286700d_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/remax-template-frontend-139320c0b200f6ae.js"></head> <link rel="modulepreload" href="/remax-template-frontend-88cf78e1286700d.js"></head>
<body><script type="module">import init from '/remax-template-frontend-139320c0b200f6ae.js';init('/remax-template-frontend-139320c0b200f6ae_bg.wasm');</script><script>(function () { <body><script type="module">import init from '/remax-template-frontend-88cf78e1286700d.js';init('/remax-template-frontend-88cf78e1286700d_bg.wasm');</script><script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws'; var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000; var poll_interval = 5000;

2
dist/navbar-c70cbfee705a9cf.css → dist/navbar-ae445ce41799b0c9.css vendored
View File

@ -11,7 +11,7 @@
align-items: center; align-items: center;
align-items: stretch; align-items: stretch;
background-color: #252631; background-color: #252631;
min-height: 44px; min-height: 74px;
} }
.navbar-container { .navbar-container {
display: flex; display: flex;

10
dist/remax-template-frontend-139320c0b200f6ae.js → dist/remax-template-frontend-88cf78e1286700d.js vendored
View File

@ -780,12 +780,12 @@ function getImports() {
const ret = wasm.memory; const ret = wasm.memory;
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper7530 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper7693 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 621, __wbg_adapter_36); const ret = makeMutClosure(arg0, arg1, 632, __wbg_adapter_36);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper7834 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper7997 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 656, __wbg_adapter_39); const ret = makeMutClosure(arg0, arg1, 667, __wbg_adapter_39);
return addHeapObject(ret); return addHeapObject(ret);
}; };
@ -824,7 +824,7 @@ function initSync(module) {
async function init(input) { async function init(input) {
if (typeof input === 'undefined') { if (typeof input === 'undefined') {
input = new URL('remax-template-frontend-139320c0b200f6ae_bg.wasm', import.meta.url); input = new URL('remax-template-frontend-88cf78e1286700d_bg.wasm', import.meta.url);
} }
const imports = getImports(); const imports = getImports();

BIN
dist/remax-template-frontend-139320c0b200f6ae_bg.wasm → dist/remax-template-frontend-88cf78e1286700d_bg.wasm vendored
View File

Binary file not shown.

54
dist/search-b6fa05ad5c0c5cf2.css vendored Normal file
View File

@ -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
}

1
index.html
View File

@ -6,6 +6,7 @@
<link data-trunk type="text/css" href="css/body.css" rel="css" /> <link data-trunk type="text/css" href="css/body.css" rel="css" />
<link data-trunk type="text/css" href="css/navbar.css" rel="css" /> <link data-trunk type="text/css" href="css/navbar.css" rel="css" />
<link data-trunk type="text/css" href="css/landing.css" rel="css" /> <link data-trunk type="text/css" href="css/landing.css" rel="css" />
<link data-trunk type="text/css" href="css/search.css" rel="css" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
</head> </head>

2
src/pages/contact.rs
View File

@ -8,7 +8,7 @@ pub fn contact_page() -> Html {
html!{ html!{
<> <>
<NavigationBar/> <NavigationBar/>
<div> <div class={"page-container"}>
{"Contact Page"} {"Contact Page"}
</div> </div>
</> </>

2
src/pages/details.rs
View File

@ -3,6 +3,6 @@ use yew::prelude::*;
#[function_component(DetailsPage)] #[function_component(DetailsPage)]
pub fn details_page() -> Html { pub fn details_page() -> Html {
html!{ html!{
<div>{"Details Page"}</div> <div class={"page-container"}>{"Details Page"}</div>
} }
} }

2
src/pages/landing.rs
View File

@ -8,7 +8,7 @@ pub fn landing_page() -> Html {
html!{ html!{
<> <>
<NavigationBar/> <NavigationBar/>
<div> <div class={"page-container"}>
{"Landing Page"} {"Landing Page"}
</div> </div>
</> </>

2
src/pages/not_found.rs
View File

@ -7,7 +7,7 @@ pub fn not_found_page() -> Html {
html! { html! {
<> <>
<NavigationBar/> <NavigationBar/>
<div> <div class={"page-container"}>
{"Not found page"} {"Not found page"}
</div> </div>
</> </>

50
src/pages/search.rs
View File

@ -4,6 +4,44 @@ use yew::prelude::*;
use crate::components::nav_bar::NavigationBar; 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!{
<>
<NavigationBar/>
<div class={"page-container"}>
<div class={"property-search-container"}>
<div class={"property-search-bar-container"}>
<i class={"fa-solid fa-magnifying-glass"}></i>
<input type={"text"} value={(*search_text).clone()} class={"property-search-bar"} placeholder={"Buscar propiedades..."}/>
<i class="fa-solid fa-circle-xmark" onclick={clear_search_input}></i>
</div>
<div class={"property-search-filters-container"}>
<div class={"property-search-filter-item"}></div>
</div>
</div>
<div class={"property-search-results-container"}>
<div class={"property-search-result-card"}></div>
</div>
</div>
</>
}
}
#[derive(Debug, Clone, PartialEq, Eq, PartialOrd, Ord, Properties)]
pub struct SearchPageProperties {
pub property_state: PropertyState
}
#[derive(Debug, Clone, Default, PartialEq, Eq, PartialOrd, Ord)] #[derive(Debug, Clone, Default, PartialEq, Eq, PartialOrd, Ord)]
pub enum PropertyState { pub enum PropertyState {
Finished, Finished,
@ -31,15 +69,3 @@ impl FromStr for PropertyState {
} }
} }
} }
#[function_component(SearchPage)]
pub fn search_page() -> Html {
html!{
<>
<NavigationBar/>
<div>
{"Search page"}
</div>
</>
}
}

2
src/routes/main_router.rs
View File

@ -24,7 +24,7 @@ pub enum Route {
pub fn switch(routes: Route) -> Html { pub fn switch(routes: Route) -> Html {
match routes { match routes {
Route::LandingPage => html! { <LandingPage/> }, Route::LandingPage => html! { <LandingPage/> },
Route::Search { property_state: _ } => html! { <SearchPage/> }, Route::Search { property_state } => html! { <SearchPage property_state={property_state}/> },
Route::Details { property_id: _ } => html! { <DetailsPage/> }, Route::Details { property_id: _ } => html! { <DetailsPage/> },
Route::NotFound => html! { <NotFoundPage/> }, Route::NotFound => html! { <NotFoundPage/> },
Route::Contact => html! { <ContactPage/> } Route::Contact => html! { <ContactPage/> }