Finished project card inside search
This commit is contained in:
parent
7c2d6018b6
commit
c1155e6226
|
@ -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);
|
||||||
|
|
||||||
}
|
}
|
|
@ -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;
|
||||||
}
|
}
|
|
@ -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 />
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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>
|
||||||
|
</>
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
Loading…
Reference in New Issue