Added actual logo to navbar, changed a few colors to match it too.

This commit is contained in:
Franklin 2023-03-24 14:34:11 -04:00
parent 12095f4141
commit b0bb9a836c
13 changed files with 154 additions and 111 deletions

7
Cargo.lock generated
View File

@ -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"

View File

@ -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

View File

@ -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;

View File

@ -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 {

View File

@ -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;
} }

View File

@ -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;
}

View File

@ -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> {

View File

@ -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>

View File

@ -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
} }

View File

@ -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";

View File

@ -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 {

View File

@ -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();