Finished project card inside search

This commit is contained in:
Franklin 2023-03-16 13:16:22 -04:00
parent 7c2d6018b6
commit c1155e6226
6 changed files with 132 additions and 11 deletions

View File

@ -8,4 +8,6 @@ body {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
background-color: rgb(0, 0, 0, 0.02);
} }

View File

@ -4,7 +4,8 @@
flex-direction: column; flex-direction: column;
justify-content: stretch; justify-content: stretch;
align-items: center; align-items: center;
padding: 30px 30px; padding: 0px 30px;
margin-top: 30px;
} }
.project-search-filters-container { .project-search-filters-container {
@ -51,21 +52,94 @@
.project-search-divider { .project-search-divider {
width: 100%; width: 100%;
margin: 35px 30px; margin: 35px 20px;
height: 1px; height: 1px;
background-color:rgba(0, 0, 0, 0.1); background-color:rgba(0, 0, 0, 0.1);
} }
/* Results */
.project-search-results-container { .project-search-results-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
margin-bottom: 50px;
gap: 30px;
} }
.project-search-result-card { .project-search-result-card {
background-color: white; background-color: white;
height: 530px;
width: 390px;
min-width: 80%;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
gap: 6px;
}
@media only screen and (max-width: 400px) {
.project-search-result-card {
width: 90%;
}
}
.project-search-result-card:hover {
cursor: pointer;
border: 2px solid #252631;
transition-duration: 0.3s;
}
.project-search-result-card-picture {
width: 100%;
height: 390px;
background-color: rgba(0, 0, 0, 0.3);
object-fit: cover;
}
.project-search-result-card-title {
font-size: 18px;
font-family: Inter;
font-weight: 50;
text-transform: uppercase;
padding-top: 5px;
}
.project-search-result-card-location {
font-size: 14px;
font-family: Inter;
font-weight: 50;
text-transform: uppercase;
}
.project-search-result-card-price {
font-size: 21px;
font-family: Inter;
font-weight: bold;
text-transform: uppercase;
}
.project-search-result-card-details-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
width: 100%;
padding-top: 4px;
}
.project-search-result-card-details-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgba(0, 0, 0, 0.3);
font-size: 14px;
gap: 3px;
} }

View File

@ -13,6 +13,7 @@
<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">
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
<base data-trunk-public-url /> <base data-trunk-public-url />

View File

@ -1,10 +1,44 @@
use jl_types::domain::project::Project; use uuid::Uuid;
use yew::prelude::*; use yew::prelude::*;
use yew_router::prelude::use_navigator;
use crate::routes::main_router::Route;
#[function_component(ProjectCard)] #[function_component(ProjectCard)]
pub fn project_card(_props: &Project) -> Html { pub fn project_card() -> Html {
let navigator = use_navigator().unwrap();
let project_view_cb = Callback::from(move |_|{
navigator.push(&Route::Details { property_id: Uuid::default() });
});
html!{ html!{
<div class={"project-listing-card"}></div> <div class={"project-search-result-card"} onclick={project_view_cb}>
<img src={"https://refa.com.do/uploads/posiv.jpg"} alt={"project image"} class={"project-search-result-card-picture"}/>
<div class={"project-search-result-card-title"}>
{"Suites by refa Piantini"}
</div>
<div class={"project-search-result-card-location"}>
{"Apartamento en Piantini, Santo Domingo"}
</div>
<div class={"project-search-result-card-price"}>
{"Desde RD$1,000,000.00"}
</div>
<div class={"project-search-result-card-details-container"}>
<div class={"project-search-result-card-details-item"}>
<i class="fa-solid fa-ruler-vertical"></i>
<div>{"80-300m²"}</div>
</div>
<div class={"project-search-result-card-details-item"}>
<i class="fa-solid fa-hand-holding-hand"></i>
<div>{"Nuevo"}</div>
</div>
<div class={"project-search-result-card-details-item"}>
<i class="fa-regular fa-calendar-check"></i>
<div>{"8/2025"}</div>
</div>
</div>
</div>
} }
} }

View File

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

View File

@ -4,7 +4,7 @@ use yew::prelude::*;
use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with}; use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with};
use jl_types::domain::option_wrapper::OptionWrapper; use jl_types::domain::option_wrapper::OptionWrapper;
use crate::components::nav_bar::NavigationBar; use crate::components::{nav_bar::NavigationBar, project_card::ProjectCard};
#[function_component(SearchPage)] #[function_component(SearchPage)]
@ -136,8 +136,11 @@ pub fn search_page(_props: &SearchPageProperties) -> Html {
<div class={"project-search-divider"}/> <div class={"project-search-divider"}/>
</div> </div>
<div class={"property-search-results-container"}> // Search Results Content <div class={"project-search-results-container"}> // Search Results Content
<div class={"property-search-result-card"}></div> <ProjectCard/>
<ProjectCard/>
<ProjectCard/>
<ProjectCard/>
</div> </div>
</div> </div>
</> </>