Retouched more things and added agents page

This commit is contained in:
Franklin 2023-04-14 10:08:23 -04:00
parent 090d285ff9
commit 1dfcec0247
13 changed files with 160 additions and 24 deletions

View File

@ -15,8 +15,12 @@
- [x] Cambiar orden de el menu de unidades (poner area comun de ultimo) y quitar que se pueda varias areas comunes - [x] Cambiar orden de el menu de unidades (poner area comun de ultimo) y quitar que se pueda varias areas comunes
- [x] Spacing de menu de unidades - [x] Spacing de menu de unidades
- [x] Poner Features arriba de la desc y las imagenes de la unidad - [x] Poner Features arriba de la desc y las imagenes de la unidad
- [ ] Poner el logo de remax en el footer - [x] Poner el logo de remax en el footer
- [ ] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces) - [x] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces)
- [ ] Poner boton de solicita tu prestamo, que rediriga a remax (Se te dará el enlace), abajo de el disclaimer en la página de detalles de proyecto - [ ] Poner boton de solicita tu prestamo, que rediriga a remax (Se te dará el enlace), abajo de el disclaimer en la página de detalles de proyecto
- [ ] Contenido statico folder de imagenes para la imagen de portada de inicio, que se roten aleatoriamente cada día - [ ] Contenido statico folder de imagenes para la imagen de portada de inicio, que se roten aleatoriamente cada día
- [x] Space between Unit selection menu and unit media on empty unit features - [x] Space between Unit selection menu and unit media on empty unit features
- [x] Make the navbar logo bigger
- [x] Finish agents screen
- [ ] Finish Contact us screen
- [ ] Link agent info with details screen, remove hardcoded pic and details

16
css/agent.css Normal file
View File

@ -0,0 +1,16 @@
.agents-title {
font-size: 34px;
font-family: Space Grotesk;
text-align: center;
margin-bottom: 50px;
}
.agents-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-flow: row wrap;
gap: 30px;
padding: 20px;
}

View File

@ -4,10 +4,9 @@ body {
} }
.page-container { .page-container {
padding-top: 83px; padding-top: 90px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: stretch; align-items: stretch;
} }

View File

@ -0,0 +1,50 @@
.agent-card-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 350px;
height: 150px;
border-radius: 0px 20px 20px 0px;
border-left: 3px solid #04B2D9;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 10px;
}
.agent-card-text-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 0px;
width: 200px;
}
.agent-card-picture {
object-fit: cover;
width: 120px;
height: 120px;
border-radius: 100%;
border: #02114A solid 0.5px;
background-color: white;
}
.agent-card-name {
font-family: Inter;
font-size: 20px;
color: #02114A;
font-weight: bold;
margin-bottom: 20px;
}
.agent-card-description {
font-family: Inter;
font-size: 12px;
color: rgb(19, 19, 19);
font-weight: bold;
}
.agent-card-phone {
font-size: 15px;
font-weight: 100;
color: rgba(0, 0, 0, 0.607);
font-family: Source Sans Pro;
}

View File

@ -34,12 +34,9 @@
height: 100px; height: 100px;
} }
.footer-remax-logo { .footer-remax-logo {
position: absolute;
margin-left: 140px;
margin-top: -15px;
object-fit: cover; object-fit: cover;
width: 40px; width: 85px;
height: 40px; height: 85px;
} }
.footer-copyright-text { .footer-copyright-text {
font-size: 9px; font-size: 9px;
@ -63,7 +60,8 @@
.footer-credit-url { .footer-credit-url {
font-size: 13px; font-size: 13px;
font-family: Inter; font-family: Space Grotesk;
text-decoration: none;
color: #04B2D9; color: #04B2D9;
border-bottom: 1px solid #04B2D9; border-bottom: 1px solid #04B2D9;
} }

View File

@ -156,7 +156,7 @@
background-color: rgb(250, 248, 248); background-color: rgb(250, 248, 248);
border-radius: 0px; border-radius: 0px;
border-bottom: solid 0.5px #d8d8d8; border-bottom: solid 0.5px #d8d8d8;
min-height: 60px; min-height: 75px;
} }
.navbar-container { .navbar-container {
@ -191,6 +191,13 @@
margin-top: 0px; margin-top: 0px;
} }
.navbar-image {
width: 60px;
height: 75px;
object-fit: cover;
margin-left: 20px;
}
.navbar-item { .navbar-item {
color: #000000; color: #000000;
font-size: 12pt; font-size: 12pt;
@ -232,11 +239,11 @@
justify-content: center; justify-content: center;
padding: 0px; padding: 0px;
margin-top: 10px; margin-top: 17px;
margin-right: 30px; margin-right: 30px;
max-height: 35px; max-height: 40px;
min-width: 30px; min-width: 45px;
padding: 2px 10px; padding: 2px 10px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;

View File

@ -11,11 +11,13 @@
<link data-trunk type="text/css" href="css/project_card.css" rel="css" /> <link data-trunk type="text/css" href="css/project_card.css" rel="css" />
<link data-trunk type="text/css" href="css/details.css" rel="css" /> <link data-trunk type="text/css" href="css/details.css" rel="css" />
<link data-trunk type="text/css" href="css/admin-login.css" rel="css" /> <link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
<link data-trunk type="text/css" href="css/agent.css" rel="css" />
<link data-trunk type="text/css" href="css/components/loading.css" rel="css" /> <link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
<link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" /> <link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />
<link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" /> <link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" />
<link data-trunk type="text/css" href="css/components/footer.css" rel="css" /> <link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
<link data-trunk type="text/css" href="css/components/agent_card.css" rel="css" />

View File

@ -1,6 +1,6 @@
use std::collections::HashSet; use std::collections::HashSet;
use jl_types::{dto::{filters::Filter, listing::Listing, project_card::ProjectCardDto}}; use jl_types::{dto::{filters::Filter, listing::Listing, project_card::ProjectCardDto}, domain::agent::Agent};
use reqwest::Method; use reqwest::Method;
use uuid::Uuid; use uuid::Uuid;
@ -23,3 +23,7 @@ pub async fn get_all_projects_with_filters_paged(page: &i64, filters: Vec<Filter
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> {
perform_request_without_client::<String, Listing>(BASE_URL.into(), Method::GET, format!("read/project/{project_id}"), None, 200, Vec::new(), None).await perform_request_without_client::<String, Listing>(BASE_URL.into(), Method::GET, format!("read/project/{project_id}"), None, 200, Vec::new(), None).await
} }
pub async fn get_all_agents() -> Result<Vec<Agent>, err::Error> {
perform_request_without_client::<String, Vec<Agent>>(BASE_URL.into(), Method::GET, format!("read/agent"), None, 200, Vec::new(), None).await
}

View File

@ -0,0 +1,33 @@
use jl_types::domain::{agent::Agent, credential::CredentialType};
use yew::prelude::*;
#[function_component(AgentCard)]
pub fn agent_card(props: &AgentCardProps) -> Html {
html! {
<div class={"agent-card-container"}>
<img class={"agent-card-picture"} alt={"agent_pfp"} src={props.agent.profile_picture_url.clone()}/>
<div class={"agent-card-text-container"}>
<div class={"agent-card-description"}>
{"Nombre:"}
</div>
<div class={"agent-card-name"}>
{props.agent.full_name.clone()}
</div>
<div class={"agent-card-description"}>
{match props.agent.credential_type {
CredentialType::PhoneNumber => {"Teléfono:"},
CredentialType::Email => {"Correo:"}
}}
</div>
<div class={"agent-card-phone"}>
{props.agent.credential.clone()}
</div>
</div>
</div>
}
}
#[derive(Properties, PartialEq)]
pub struct AgentCardProps {
pub agent: Agent,
}

View File

@ -23,7 +23,7 @@ pub fn page_footer() -> Html {
<div class={"footer-copyright-text"}>{"© 2023 Proyectos en Construcción - Todos los derechos Reservados"}</div> <div class={"footer-copyright-text"}>{"© 2023 Proyectos en Construcción - Todos los derechos Reservados"}</div>
<div class={"footer-credit-container"}> <div class={"footer-credit-container"}>
<div class={"footer-credit"}>{"Powered by"}</div> <div class={"footer-credit"}>{"Powered by"}</div>
<div class={"footer-credit-url"}>{"Blanco Studios"}</div> <a href={"https://blancolorenzo.pro"} class={"footer-credit-url"}>{"Blanco Lorenzo"}</a>
</div> </div>
</div> </div>

View File

@ -5,3 +5,4 @@ pub mod media_slideshow;
pub mod floating_widget; pub mod floating_widget;
pub mod feature; pub mod feature;
pub mod footer; pub mod footer;
pub mod agent_card;

View File

@ -1,15 +1,38 @@
use jl_types::domain::agent::Agent;
use yew::prelude::*; use yew::prelude::*;
use crate::components::{nav_bar::NavigationBar, footer::PageFooter}; use crate::{components::{nav_bar::NavigationBar, footer::PageFooter, agent_card::AgentCard}, api::backend::get_all_agents};
#[function_component(AgentsPage)] #[function_component(AgentsPage)]
pub fn agents_page() -> Html { pub fn agents_page() -> Html {
let finished_loading = use_state(|| false);
let agents: UseStateHandle<Vec<Agent>> = use_state(|| Vec::new());
use_state(|| {
let agents = agents.clone();
let finished_loading = finished_loading.clone();
wasm_bindgen_futures::spawn_local(async move {
match get_all_agents().await {
Ok(fetched_agents) => {
agents.set(fetched_agents);
finished_loading.set(true);
},
Err(error) => {
log::error!("Error fetching listing. Error: {:?}", error);
}
};
});
});
html! { html! {
<> <>
<NavigationBar/> <NavigationBar/>
<div class={"page-container"} style={"margin-bottom: 72vh"}> //TODO: remove this margin when landing page done <div class={"page-container"} style={"margin-bottom: 20vh"}> //TODO: remove this margin when landing page done
{"Agents Page"} <div class={"agents-title"}>
{"Nuestros Agentes"}
</div>
<div class={"agents-container"}>
{(*agents).iter().map(|agent| html!{ <AgentCard agent={agent.clone()}/> }).collect::<Html>()}
</div>
</div> </div>
<PageFooter/> <PageFooter/>
</> </>

View File

@ -1,5 +1,5 @@
use jl_types::{dto::listing::Listing, domain::{unit_type::UnitType, unit::Unit}}; use jl_types::{dto::listing::Listing, domain::{unit_type::UnitType, unit::Unit}};
use log::{error, info}; use log::{error};
use thousands::Separable; use thousands::Separable;
use uuid::Uuid; use uuid::Uuid;
use yew::prelude::*; use yew::prelude::*;
@ -22,7 +22,6 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
Ok(listing) => { Ok(listing) => {
listing_handle.set(listing); listing_handle.set(listing);
finished_loading.set(true); finished_loading.set(true);
info!("Finshed loading listing");
}, },
Err(error) => { Err(error) => {
error!("Error fetching listing. Error: {:?}", error); error!("Error fetching listing. Error: {:?}", error);