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

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

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

7
Cargo.lock generated
View File

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

2
Cargo.toml
View File

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

BIN
assets/images/proyectosenconstruccion_logo_transparent_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

2
css/body.css
View File

@ -3,7 +3,7 @@ body {
}
.page-container {
padding-top: 75.5px;
padding-top: 80px;
display: flex;
flex-direction: column;
justify-content: center;

9
css/navbar.css
View File

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

83
css/project_card.css
View File

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

87
css/search.css
View File

@ -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 {
@ -79,79 +86,3 @@
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;
}

6
src/api/backend/mod.rs
View File

@ -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<HashSet<String>,
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> {
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
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<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> {

2
src/components/nav_bar.rs
View File

@ -25,7 +25,7 @@ pub fn navigation_bar() -> Html {
<div class={"navbar-background"}>
<div class={"navbar-container"}>
<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"}>
{NAVBAR_TITLE}
</div>

48
src/components/project_card.rs
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_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!{
<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"}/>
<div class={"project-search-result-card-title"}>
{"Suites by refa Piantini"}
</div>
<div class={"project-search-result-card-location"}>
{"Apartamento en Piantini, Santo Domingo"}
{project_title}
</div>
<div class={"project-search-result-card-price"}>
{"Desde RD$1,000,000.00"}
{project_price}
</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>{project_condition}</div>
</div>
<div class={"project-search-result-card-details-item"}>
<i class="fa-regular fa-calendar-check"></i>
<div>{"8/2025"}</div>
<div>{format!("Entrega Est: {}", project_est_finish_date)}</div>
</div>
</div>
</div>
}
}
#[derive(Properties, PartialEq, Eq, PartialOrd, Ord)]
#[derive(Properties, PartialEq, PartialOrd)]
pub struct ProjectCardProps {
pub project: Project
pub project: ProjectCardDto
}

5
src/constants/mod.rs
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_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";

6
src/main.rs
View File

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

4
src/pages/search.rs
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 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<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 mut filters = Vec::new();