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

Finished project card inside search

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/body.css
View File

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

82
css/search.css
View File

@ -4,7 +4,8 @@
flex-direction: column;
justify-content: stretch;
align-items: center;
padding: 30px 30px;
padding: 0px 30px;
margin-top: 30px;
}
.project-search-filters-container {
@ -51,21 +52,94 @@
.project-search-divider {
width: 100%;
margin: 35px 30px;
margin: 35px 20px;
height: 1px;
background-color:rgba(0, 0, 0, 0.1);
}
/* Results */
.project-search-results-container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
margin-bottom: 50px;
gap: 30px;
}
.project-search-result-card {
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;
}

1
index.html
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=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>
<base data-trunk-public-url />

40
src/components/project_card.rs
View File

@ -1,10 +1,44 @@
use jl_types::domain::project::Project;
use uuid::Uuid;
use yew::prelude::*;
use yew_router::prelude::use_navigator;
use crate::routes::main_router::Route;
#[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!{
<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>
}
}

9
src/pages/details.rs
View File

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

9
src/pages/search.rs
View File

@ -4,7 +4,7 @@ use yew::prelude::*;
use yew_utils::{components::drop_down::{DropDownProps, DropDown}, vdom::comp_with};
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)]
@ -136,8 +136,11 @@ pub fn search_page(_props: &SearchPageProperties) -> Html {
<div class={"project-search-divider"}/>
</div>
<div class={"property-search-results-container"}> // Search Results Content
<div class={"property-search-result-card"}></div>
<div class={"project-search-results-container"}> // Search Results Content
<ProjectCard/>
<ProjectCard/>
<ProjectCard/>
<ProjectCard/>
</div>
</div>
</>