Added actual logo to navbar, changed a few colors to match it too.
This commit is contained in:
parent
12095f4141
commit
b0bb9a836c
|
@ -715,6 +715,7 @@ dependencies = [
|
||||||
"serde_json",
|
"serde_json",
|
||||||
"stdweb",
|
"stdweb",
|
||||||
"stylist",
|
"stylist",
|
||||||
|
"thousands",
|
||||||
"uuid",
|
"uuid",
|
||||||
"wasm-bindgen",
|
"wasm-bindgen",
|
||||||
"wasm-bindgen-futures",
|
"wasm-bindgen-futures",
|
||||||
|
@ -1442,6 +1443,12 @@ dependencies = [
|
||||||
"syn",
|
"syn",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "thousands"
|
||||||
|
version = "0.2.0"
|
||||||
|
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||||
|
checksum = "3bf63baf9f5039dadc247375c29eb13706706cfde997d0330d05aa63a77d8820"
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "time"
|
name = "time"
|
||||||
version = "0.1.45"
|
version = "0.1.45"
|
||||||
|
|
|
@ -28,7 +28,7 @@ log = "0.4"
|
||||||
serde = { version = "1.0", features = ["derive"] }
|
serde = { version = "1.0", features = ["derive"] }
|
||||||
serde_json = "1.0.88"
|
serde_json = "1.0.88"
|
||||||
err = { git = "https://git.franklinblanco.dev/franklinblanco/err.git" }
|
err = { git = "https://git.franklinblanco.dev/franklinblanco/err.git" }
|
||||||
|
thousands = "0.2.0"
|
||||||
|
|
||||||
# Core
|
# Core
|
||||||
jl-types = { path = "../jl-types", features = ["wasm"] }
|
jl-types = { path = "../jl-types", features = ["wasm"] }
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 310 KiB |
|
@ -3,7 +3,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-container {
|
.page-container {
|
||||||
padding-top: 75.5px;
|
padding-top: 80px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
/* Mobile View */
|
/* Mobile View */
|
||||||
.navbar-background {
|
.navbar-background {
|
||||||
|
border-top: 3px solid #04B2D9;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -80,7 +81,8 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 250px;
|
gap: 10px;
|
||||||
|
max-width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-brand-container:hover {
|
.navbar-brand-container:hover {
|
||||||
|
@ -89,8 +91,9 @@
|
||||||
|
|
||||||
.navbar-title {
|
.navbar-title {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 23pt;
|
font-size: 18pt;
|
||||||
font-family: Sacramento;
|
font-weight: 100;
|
||||||
|
font-family: 'Gill Sans';
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-image {
|
.navbar-image {
|
||||||
|
|
|
@ -1,4 +1,85 @@
|
||||||
|
|
||||||
|
|
||||||
.project-listing-card {
|
.project-listing-card {
|
||||||
border-radius: 10px;
|
background-color: white;
|
||||||
|
height: 495px;
|
||||||
|
width: 390px;
|
||||||
|
min-width: 80%;
|
||||||
|
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
border-bottom: 6px solid #04B2D9;
|
||||||
|
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-listing-card {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-listing-card:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
/*border: 3px solid #04B2D9;*/
|
||||||
|
transition-duration: 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-search-result-card-picture {
|
||||||
|
border-radius: 6px 6px 0px 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 390px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-search-result-card-title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Inter;
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 20px;
|
||||||
|
color: rgb(79, 79, 79);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-search-result-card-price {
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
max-lines: 1;
|
||||||
|
font-size: 21px;
|
||||||
|
font-family: Inter;
|
||||||
|
font-weight: bold;
|
||||||
|
color: rgb(29, 29, 29);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-search-result-card-details-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
gap: 75px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-search-result-card-details-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
color: rgba(0, 0, 0, 0.527);
|
||||||
|
font-size: 16px;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
|
@ -60,15 +60,22 @@
|
||||||
.project-search-button {
|
.project-search-button {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: #252631;
|
background-color: #5D6A73;
|
||||||
color: white;
|
color: white;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: large;
|
font-size: 20px;
|
||||||
font-family: Source Sans Pro;
|
font-family: Source Sans Pro;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.project-search-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 24px;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
background-color: #252631;
|
||||||
|
}
|
||||||
|
|
||||||
/* Results */
|
/* Results */
|
||||||
|
|
||||||
.project-search-results-container {
|
.project-search-results-container {
|
||||||
|
@ -79,79 +86,3 @@
|
||||||
margin-bottom: 50px;
|
margin-bottom: 50px;
|
||||||
gap: 30px;
|
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,6 +1,6 @@
|
||||||
use std::collections::HashSet;
|
use std::collections::HashSet;
|
||||||
|
|
||||||
use jl_types::{dto::{filters::Filter, listing::Listing}, domain::project::Project};
|
use jl_types::{dto::{filters::Filter, listing::Listing, project_card::ProjectCardDto}};
|
||||||
use reqwest::Method;
|
use reqwest::Method;
|
||||||
use uuid::Uuid;
|
use uuid::Uuid;
|
||||||
|
|
||||||
|
@ -16,8 +16,8 @@ pub async fn get_all_districts_in_city(city: &String) -> Result<HashSet<String>,
|
||||||
perform_request_without_client::<String, HashSet<String>>(BASE_URL.into(), Method::GET, format!("read/locations/{city}"), None, 200, Vec::new(), None).await
|
perform_request_without_client::<String, HashSet<String>>(BASE_URL.into(), Method::GET, format!("read/locations/{city}"), None, 200, Vec::new(), None).await
|
||||||
}
|
}
|
||||||
|
|
||||||
pub async fn get_all_projects_with_filters_paged(page: &i64, filters: Vec<Filter>) -> Result<Vec<Project>, err::Error> {
|
pub async fn get_all_projects_with_filters_paged(page: &i64, filters: Vec<Filter>) -> Result<Vec<ProjectCardDto>, err::Error> {
|
||||||
perform_request_without_client::<String, Vec<Project>>(BASE_URL.into(), Method::GET, format!("read/projects/{page}"), None, 200, Vec::new(), Some(filters.into_iter().map(|filter| filter.to_param()).collect())).await
|
perform_request_without_client::<String, Vec<ProjectCardDto>>(BASE_URL.into(), Method::GET, format!("read/projects/{page}"), None, 200, Vec::new(), Some(filters.into_iter().map(|filter| filter.to_param()).collect())).await
|
||||||
}
|
}
|
||||||
|
|
||||||
pub async fn get_project_listing(project_id: &Uuid) -> Result<Listing, err::Error> {
|
pub async fn get_project_listing(project_id: &Uuid) -> Result<Listing, err::Error> {
|
||||||
|
|
|
@ -25,7 +25,7 @@ pub fn navigation_bar() -> Html {
|
||||||
<div class={"navbar-background"}>
|
<div class={"navbar-background"}>
|
||||||
<div class={"navbar-container"}>
|
<div class={"navbar-container"}>
|
||||||
<div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_5.push(&Route::LandingPage)}>
|
<div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_5.push(&Route::LandingPage)}>
|
||||||
<img class={"navbar-image"} src="images/remax-logo.png" alt=""/>
|
<img class={"navbar-image"} src="images/proyectosenconstruccion_logo_transparent_bg.png" alt=""/>
|
||||||
<div class={"navbar-title"}>
|
<div class={"navbar-title"}>
|
||||||
{NAVBAR_TITLE}
|
{NAVBAR_TITLE}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
use jl_types::domain::{project::Project, media::Media};
|
use jl_types::{domain::{media::Media}, dto::project_card::ProjectCardDto};
|
||||||
|
use stylist::css;
|
||||||
|
use thousands::Separable;
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use yew_router::prelude::use_navigator;
|
use yew_router::prelude::use_navigator;
|
||||||
|
|
||||||
|
@ -12,6 +14,8 @@ pub fn project_card(props: &ProjectCardProps) -> Html {
|
||||||
let project_view_cb = Callback::from(move |_|{
|
let project_view_cb = Callback::from(move |_|{
|
||||||
navigator.push(&Route::Details { project_id });
|
navigator.push(&Route::Details { project_id });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Card properties
|
||||||
let cover_image_url;
|
let cover_image_url;
|
||||||
if let Some(first_media) = props.project.media.media_list.get(0) {
|
if let Some(first_media) = props.project.media.media_list.get(0) {
|
||||||
cover_image_url = match first_media {
|
cover_image_url = match first_media {
|
||||||
|
@ -21,38 +25,52 @@ pub fn project_card(props: &ProjectCardProps) -> Html {
|
||||||
} else {
|
} else {
|
||||||
cover_image_url = String::new()
|
cover_image_url = String::new()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let project_title = format!("{} en {}, {}", props.project.project_type, props.project.district, props.project.city);
|
||||||
|
|
||||||
|
let project_price = format!("Desde ${} USD", match props.project.starts_from {
|
||||||
|
Some(price) => {
|
||||||
|
let price_separated = price.separate_with_commas();
|
||||||
|
if price_separated.contains(".") {
|
||||||
|
price_separated
|
||||||
|
} else {
|
||||||
|
format!("{price_separated}.00")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
None => "N/A".into()
|
||||||
|
});
|
||||||
|
|
||||||
|
let project_condition = props.project.project_condition.to_string();
|
||||||
|
|
||||||
|
let project_est_finish_date = props.project.finish_date.format("%m/%Y");
|
||||||
|
//let project_location_written;
|
||||||
|
|
||||||
|
|
||||||
html!{
|
html!{
|
||||||
<div class={"project-search-result-card"} onclick={project_view_cb}>
|
<div class={"project-listing-card"} onclick={project_view_cb}>
|
||||||
<img src={cover_image_url} alt={"project image"} class={"project-search-result-card-picture"}/>
|
<img src={cover_image_url} alt={"project image"} class={"project-search-result-card-picture"}/>
|
||||||
|
|
||||||
<div class={"project-search-result-card-title"}>
|
<div class={"project-search-result-card-title"}>
|
||||||
{"Suites by refa Piantini"}
|
{project_title}
|
||||||
</div>
|
|
||||||
<div class={"project-search-result-card-location"}>
|
|
||||||
{"Apartamento en Piantini, Santo Domingo"}
|
|
||||||
</div>
|
</div>
|
||||||
<div class={"project-search-result-card-price"}>
|
<div class={"project-search-result-card-price"}>
|
||||||
{"Desde RD$1,000,000.00"}
|
{project_price}
|
||||||
</div>
|
</div>
|
||||||
<div class={"project-search-result-card-details-container"}>
|
<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"}>
|
<div class={"project-search-result-card-details-item"}>
|
||||||
<i class="fa-solid fa-hand-holding-hand"></i>
|
<i class="fa-solid fa-hand-holding-hand"></i>
|
||||||
<div>{"Nuevo"}</div>
|
<div>{project_condition}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class={"project-search-result-card-details-item"}>
|
<div class={"project-search-result-card-details-item"}>
|
||||||
<i class="fa-regular fa-calendar-check"></i>
|
<i class="fa-regular fa-calendar-check"></i>
|
||||||
<div>{"8/2025"}</div>
|
<div>{format!("Entrega Est: {}", project_est_finish_date)}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Properties, PartialEq, Eq, PartialOrd, Ord)]
|
#[derive(Properties, PartialEq, PartialOrd)]
|
||||||
pub struct ProjectCardProps {
|
pub struct ProjectCardProps {
|
||||||
pub project: Project
|
pub project: ProjectCardDto
|
||||||
}
|
}
|
|
@ -1,5 +1,8 @@
|
||||||
pub const NAVBAR_TITLE: &str = "Jorge Ledesma";
|
pub const NAVBAR_TITLE: &str = "Proyectos en Construcción";
|
||||||
pub const NAVBAR_COL_LANDING: &str = "Inicio";
|
pub const NAVBAR_COL_LANDING: &str = "Inicio";
|
||||||
pub const NAVBAR_COL_PROYECTOS_ACABADOS: &str = "Listos para entrega";
|
pub const NAVBAR_COL_PROYECTOS_ACABADOS: &str = "Listos para entrega";
|
||||||
pub const NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION: &str = "En construcción";
|
pub const NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION: &str = "En construcción";
|
||||||
pub const NAVBAR_COL_CONTACTO: &str = "Contacto";
|
pub const NAVBAR_COL_CONTACTO: &str = "Contacto";
|
||||||
|
|
||||||
|
pub const PRIMARY_COLOR: &str = "#41BDD9";
|
||||||
|
pub const SECONDARY_COLOR: &str = "#5D6A73";
|
|
@ -1,14 +1,14 @@
|
||||||
pub mod api;
|
pub mod api;
|
||||||
pub mod components;
|
pub mod components;
|
||||||
pub mod routes;
|
|
||||||
pub mod pages;
|
|
||||||
pub mod constants;
|
pub mod constants;
|
||||||
|
pub mod pages;
|
||||||
|
pub mod routes;
|
||||||
pub mod utils;
|
pub mod utils;
|
||||||
|
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use yew_router::{BrowserRouter, Switch};
|
use yew_router::{BrowserRouter, Switch};
|
||||||
|
|
||||||
use crate::routes::main_router::{Route, switch};
|
use crate::routes::main_router::{switch, Route};
|
||||||
|
|
||||||
#[function_component]
|
#[function_component]
|
||||||
fn App() -> Html {
|
fn App() -> Html {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
use jl_types::{domain::{project_state::ProjectState, project_type::ProjectType, project_condition::ProjectCondition, project::Project}, dto::filters::Filter};
|
use jl_types::{domain::{project_state::ProjectState, project_type::ProjectType, project_condition::ProjectCondition, project::Project}, dto::{filters::Filter, project_card::ProjectCardDto}};
|
||||||
use log::info;
|
use log::info;
|
||||||
use yew::prelude::*;
|
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};
|
||||||
|
@ -12,7 +12,7 @@ pub fn search_page(props: &SearchPageProperties) -> Html {
|
||||||
// let force_update_trigger = use_force_update();
|
// let force_update_trigger = use_force_update();
|
||||||
let cities_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
|
let cities_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
|
||||||
let districts_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
|
let districts_handle = use_state(|| Vec::from([OptionWrapper::new(None)]));
|
||||||
let search_results_handle: UseStateHandle<Vec<Project>> = use_state(|| Vec::new());
|
let search_results_handle: UseStateHandle<Vec<ProjectCardDto>> = use_state(|| Vec::new());
|
||||||
let page_counter: UseStateHandle<i64> = use_state(|| 1);
|
let page_counter: UseStateHandle<i64> = use_state(|| 1);
|
||||||
|
|
||||||
let mut filters = Vec::new();
|
let mut filters = Vec::new();
|
||||||
|
|
Loading…
Reference in New Issue