diff --git a/Cargo.lock b/Cargo.lock index 11933d3..48d4eb3 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -715,6 +715,7 @@ dependencies = [ "serde_json", "stdweb", "stylist", + "thousands", "uuid", "wasm-bindgen", "wasm-bindgen-futures", @@ -1442,6 +1443,12 @@ dependencies = [ "syn", ] +[[package]] +name = "thousands" +version = "0.2.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "3bf63baf9f5039dadc247375c29eb13706706cfde997d0330d05aa63a77d8820" + [[package]] name = "time" version = "0.1.45" diff --git a/Cargo.toml b/Cargo.toml index 8fc9029..cbab346 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -28,7 +28,7 @@ log = "0.4" serde = { version = "1.0", features = ["derive"] } serde_json = "1.0.88" err = { git = "https://git.franklinblanco.dev/franklinblanco/err.git" } - +thousands = "0.2.0" # Core jl-types = { path = "../jl-types", features = ["wasm"] } diff --git a/assets/images/proyectosenconstruccion_logo_transparent_bg.png b/assets/images/proyectosenconstruccion_logo_transparent_bg.png new file mode 100644 index 0000000..f76995f Binary files /dev/null and b/assets/images/proyectosenconstruccion_logo_transparent_bg.png differ diff --git a/css/body.css b/css/body.css index 77c3545..53e22ac 100644 --- a/css/body.css +++ b/css/body.css @@ -3,11 +3,11 @@ body { } .page-container { - padding-top: 75.5px; + padding-top: 80px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; background-color: rgb(0, 0, 0, 0.02); -} \ No newline at end of file +} diff --git a/css/navbar.css b/css/navbar.css index f1f1527..8efe8e4 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -1,5 +1,6 @@ /* Mobile View */ .navbar-background { + border-top: 3px solid #04B2D9; position: fixed; width: 100%; display: flex; @@ -80,7 +81,8 @@ flex-direction: row; justify-content: flex-start; align-items: center; - max-width: 250px; + gap: 10px; + max-width: 350px; } .navbar-brand-container:hover { @@ -89,8 +91,9 @@ .navbar-title { color: white; - font-size: 23pt; - font-family: Sacramento; + font-size: 18pt; + font-weight: 100; + font-family: 'Gill Sans'; } .navbar-image { diff --git a/css/project_card.css b/css/project_card.css index 3c9ca7c..5132a45 100644 --- a/css/project_card.css +++ b/css/project_card.css @@ -1,4 +1,85 @@ + .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; } \ No newline at end of file diff --git a/css/search.css b/css/search.css index cee4d9d..780623a 100644 --- a/css/search.css +++ b/css/search.css @@ -60,15 +60,22 @@ .project-search-button { margin-top: 20px; height: 50px; - background-color: #252631; + background-color: #5D6A73; color: white; border: 0px; border-radius: 5px; - font-size: large; + font-size: 20px; font-family: Source Sans Pro; font-weight: lighter; } +.project-search-button:hover { + cursor: pointer; + font-size: 24px; + transition-duration: 0.3s; + background-color: #252631; +} + /* Results */ .project-search-results-container { @@ -78,80 +85,4 @@ 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; } \ No newline at end of file diff --git a/src/api/backend/mod.rs b/src/api/backend/mod.rs index 4b5e12d..f9b264a 100644 --- a/src/api/backend/mod.rs +++ b/src/api/backend/mod.rs @@ -1,6 +1,6 @@ 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 uuid::Uuid; @@ -16,8 +16,8 @@ pub async fn get_all_districts_in_city(city: &String) -> Result, perform_request_without_client::>(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) -> Result, err::Error> { - perform_request_without_client::>(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_all_projects_with_filters_paged(page: &i64, filters: Vec) -> Result, err::Error> { + perform_request_without_client::>(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 { diff --git a/src/components/nav_bar.rs b/src/components/nav_bar.rs index f65821c..9a1fe39 100644 --- a/src/components/nav_bar.rs +++ b/src/components/nav_bar.rs @@ -25,7 +25,7 @@ pub fn navigation_bar() -> Html {
- +
{NAVBAR_TITLE}
diff --git a/src/components/project_card.rs b/src/components/project_card.rs index 1c74f60..32e2518 100644 --- a/src/components/project_card.rs +++ b/src/components/project_card.rs @@ -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_router::prelude::use_navigator; @@ -12,6 +14,8 @@ pub fn project_card(props: &ProjectCardProps) -> Html { let project_view_cb = Callback::from(move |_|{ navigator.push(&Route::Details { project_id }); }); + + // Card properties let cover_image_url; if let Some(first_media) = props.project.media.media_list.get(0) { cover_image_url = match first_media { @@ -21,38 +25,52 @@ pub fn project_card(props: &ProjectCardProps) -> Html { } else { 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!{ -
+
{"project
- {"Suites by refa Piantini"} -
-
- {"Apartamento en Piantini, Santo Domingo"} + {project_title}
- {"Desde RD$1,000,000.00"} + {project_price}
-
- -
{"80-300m²"}
-
-
{"Nuevo"}
+
{project_condition}
-
{"8/2025"}
+
{format!("Entrega Est: {}", project_est_finish_date)}
} } -#[derive(Properties, PartialEq, Eq, PartialOrd, Ord)] +#[derive(Properties, PartialEq, PartialOrd)] pub struct ProjectCardProps { - pub project: Project + pub project: ProjectCardDto } \ No newline at end of file diff --git a/src/constants/mod.rs b/src/constants/mod.rs index e8d4160..406754a 100644 --- a/src/constants/mod.rs +++ b/src/constants/mod.rs @@ -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_PROYECTOS_ACABADOS: &str = "Listos para entrega"; pub const NAVBAR_COL_PROYECTOS_EN_CONSTRUCCION: &str = "En construcción"; pub const NAVBAR_COL_CONTACTO: &str = "Contacto"; + +pub const PRIMARY_COLOR: &str = "#41BDD9"; +pub const SECONDARY_COLOR: &str = "#5D6A73"; \ No newline at end of file diff --git a/src/main.rs b/src/main.rs index d47114e..3f0855a 100644 --- a/src/main.rs +++ b/src/main.rs @@ -1,14 +1,14 @@ pub mod api; pub mod components; -pub mod routes; -pub mod pages; pub mod constants; +pub mod pages; +pub mod routes; pub mod utils; use yew::prelude::*; use yew_router::{BrowserRouter, Switch}; -use crate::routes::main_router::{Route, switch}; +use crate::routes::main_router::{switch, Route}; #[function_component] fn App() -> Html { @@ -22,4 +22,4 @@ fn main() { wasm_logger::init(wasm_logger::Config::default()); stdweb::initialize(); yew::Renderer::::new().render(); -} \ No newline at end of file +} diff --git a/src/pages/search.rs b/src/pages/search.rs index 0afbdf7..bcaa9b6 100644 --- a/src/pages/search.rs +++ b/src/pages/search.rs @@ -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 yew::prelude::*; 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 cities_handle = use_state(|| Vec::from([OptionWrapper::new(None)])); let districts_handle = use_state(|| Vec::from([OptionWrapper::new(None)])); - let search_results_handle: UseStateHandle> = use_state(|| Vec::new()); + let search_results_handle: UseStateHandle> = use_state(|| Vec::new()); let page_counter: UseStateHandle = use_state(|| 1); let mut filters = Vec::new();