Floating ws widget (ui only), agent inside project details page, feature list inside project details page, description as well.

This commit is contained in:
Franklin 2023-03-26 18:26:38 -04:00
parent 66e932a6a0
commit a0d926b3ad
9 changed files with 288 additions and 27 deletions

1
Cargo.lock generated
View File

@ -706,6 +706,7 @@ checksum = "453ad9f582a441959e5f0d088b02ce04cfe8d51a8eaf077f12ac6d3e94164ca6"
name = "jl-frontend" name = "jl-frontend"
version = "0.1.0" version = "0.1.0"
dependencies = [ dependencies = [
"chrono",
"err", "err",
"jl-types", "jl-types",
"js-sys", "js-sys",

View File

@ -29,6 +29,8 @@ 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" thousands = "0.2.0"
chrono = "0.4.23"
# Core # Core
jl-types = { path = "../jl-types", features = ["wasm"] } jl-types = { path = "../jl-types", features = ["wasm"] }

View File

@ -0,0 +1,34 @@
.floating-widget-container {
position: fixed;
z-index: 2;
width: 60px;
height: 60px;
right: 30px;
bottom: 30px;
border-radius: 100%;
background-color: #25D366;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-size: 45px;
}
.floating-widget-container:hover {
width: 70px;
height: 70px;
font-size: 55px;
cursor: pointer;
right: 25px;
bottom: 25px;
transition-duration: 0.4s;
}
.floating-widget-logo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: white;
}

View File

@ -1,17 +1,17 @@
.media-slideshow-frame { .media-slideshow-frame {
height: 360px; height: 360px;
background-color: gray;
width: 100%; width: 100%;
position: relative; position: relative;
border-radius: 15px;
} }
.media-slideshow-photo { .media-slideshow-photo {
background-color: gray;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: none; display: none;
border-radius: 15px;
} }
.media-slideshow-video { .media-slideshow-video {
@ -20,6 +20,7 @@
height: 100%; height: 100%;
display: none; display: none;
object-fit: cover; object-fit: cover;
border-radius: 15px;
} }
.media-slideshow-arrow-left { .media-slideshow-arrow-left {
@ -65,9 +66,10 @@
font-size: 12px; font-size: 12px;
padding: 8px 12px; padding: 8px 12px;
position: absolute; position: absolute;
top: 0; top: 10px;
background-color: rgba(0,0,0,0.8); left: 10px;
border-radius: 2px; background-color: rgba(0, 0, 0, 0.633);
border-radius: 5px;
} }

View File

@ -9,7 +9,7 @@ Divide the Details page into 3 main sections:
justify-content: stretch; justify-content: stretch;
align-items: start; align-items: start;
padding: 0px 15px; padding: 0px 15px;
margin-top: 60px; margin-top: 30px;
} }
.details-head { .details-head {
@ -18,10 +18,127 @@ Divide the Details page into 3 main sections:
justify-content: stretch; justify-content: stretch;
align-items: center; align-items: center;
width: 100%; width: 100%;
gap: 10px; gap: 20px;
margin-bottom: 15px;
} }
.details-head-title { .details-head-title {
font-size: 25px; font-size: 21px;
font-family: Inter;
font-weight: bold;
text-transform: uppercase;
} }
.details-head-agent-container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 20px;
width: 100%;
margin: 10px 0px;
}
.details-head-agent-profile-picture {
width: 75px;
height: 75px;
background-color: gray;
border-radius: 100%;
object-fit: cover;
}
.details-head-agent-text-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
font-family: Inter;
}
.details-head-agent-heading {
font-size: 18px;
font-weight: 600;
}
.details-head-agent-subheading {
font-size: 15px;
font-weight: 400;
color: rgb(113, 113, 113);
}
.details-body {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: center;
width: 100%;
gap: 15px;
margin-top: -10px;
margin-bottom: 100px;
}
.details-body-description {
font-size: 14px;
font-family: Inter;
line-height: 30px;
white-space: pre-line;
color: rgba(34, 34, 34, 0.873);
}
.details-body-divider {
width: 100%;
height: 1px;
background-color: rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.details-body-features {
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: start;
gap: 25px;
width: 100%;
height: 200px;
margin-bottom: 60px;
}
.details-body-feature-item {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 20px;
font-family: Inter;
font-size: 24px;
}
.details-body-feature-item-icon-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
}
.details-body-feature-item-text-container {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
}
.details-body-feature-item-text-title {
font-size: 16px;
font-weight: 600;
}
.details-body-feature-item-text-subtitle {
font-size: 14px;
font-weight: 400;
color: rgb(113, 113, 113);
}

View File

@ -12,6 +12,8 @@
<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/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 href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">

View File

@ -0,0 +1,18 @@
use yew::prelude::*;
//TODO: Finish, add whatsapp link or email link?
#[function_component(FloatingWidget)]
pub fn floating_widget(_props: &FloatingWidgetProps) -> Html {
html! {
<div class={"floating-widget-container"}>
<div class={"floating-widget-logo"}>
<i class="fa-brands fa-whatsapp"></i>
</div>
</div>
}
}
#[derive(Properties, PartialEq)]
pub struct FloatingWidgetProps {
}

View File

@ -1,4 +1,5 @@
pub mod nav_bar; pub mod nav_bar;
pub mod search_filter; pub mod search_filter;
pub mod project_card; pub mod project_card;
pub mod media_slideshow; pub mod media_slideshow;
pub mod floating_widget;

View File

@ -3,7 +3,7 @@ use log::{error, info};
use uuid::Uuid; use uuid::Uuid;
use yew::prelude::*; use yew::prelude::*;
use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow}, api::backend::get_project_listing}; use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget}, api::backend::get_project_listing};
#[function_component(DetailsPage)] #[function_component(DetailsPage)]
pub fn details_page(props: &DetailsPageProps) -> Html { pub fn details_page(props: &DetailsPageProps) -> Html {
@ -31,37 +31,121 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
let listing = (*listing_handle).clone(); let listing = (*listing_handle).clone();
let project_title = format!("{} en {}, {}", &listing.project.project_type, &listing.location.district, &listing.location.city); let project_title = format!("{} en {}, {}", &listing.project.project_type, &listing.location.district, &listing.location.city);
let project_description = &listing.project.description; //let project_description = &listing.project.description;
let project_media_list = listing.project.media.media_list; let project_media_list = listing.project.media.media_list;
/*let project_price = format!("Desde ${} USD", match listing.project.starts_from { let project_type = &listing.project.project_type.to_string();
Some(price) => {
let price_separated = price.separate_with_commas();
if price_separated.contains(".") {
price_separated
} else {
format!("{price_separated}.00")
}
},
None => "0.00".into()
});*/
let project_condition = &listing.project.project_condition.to_string(); let project_condition = &listing.project.project_condition.to_string();
let project_est_finish_date = format!("{} {}", listing.project.finish_date.format("%m/%Y"), if listing.project.finish_date.timestamp_millis() <= chrono::Utc::now().timestamp_millis() {
"(Listo)"
} else {""});
let project_floors = &listing.project.floors.to_string();
let project_est_finish_date = &listing.project.finish_date.format("%m/%Y");
//TODO: Floating whatsapp button on this page
html!{ html!{
<> <>
<NavigationBar/> <NavigationBar/>
<FloatingWidget/>
<div class={"page-container"}> <div class={"page-container"}>
{ {
if *finished_loading { if *finished_loading {
html!{ html!{
<div class={"details-container"}> <div class={"details-container"}>
<div class={"details-head"}> <div class={"details-head"}>
<MediaSlideshow media_list={project_media_list}/>
<div class={"details-head-title"}>{project_title}</div> <div class={"details-head-title"}>{project_title}</div>
<div class={"details-head-price"}>{"RD$123,130.00"}</div> <MediaSlideshow media_list={project_media_list}/>
<div>{project_description}</div>
// Agent
<div class={"details-head-agent-container"}>
// Profile pic
<img class={"details-head-agent-profile-picture"} src={"https://a0.muscache.com/im/pictures/user/b3bc8258-30a6-4e62-b971-3abaeb37159b.jpg"} alt={"agent_pfp"}/>
<div class={"details-head-agent-text-container"}>
<div class={"details-head-agent-heading"}>{"Vendido por Luis Jose"}</div>
<div class={"details-head-agent-subheading"}>{"(809)-123-4567"}</div>
</div>
</div>
</div>
<div class={"details-body-divider"}></div>
<div class={"details-body"}>
<div class={"details-body-description"}>
<p>
{
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Phasellus vestibulum lorem sed risus. Tellus cras adipiscing enim eu turpis. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Quis commodo odio aenean sed adipiscing diam. Ipsum faucibus vitae aliquet nec ullamcorper. Egestas sed tempus urna et pharetra pharetra. Leo urna molestie at elementum eu facilisis sed odio. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Suspendisse in est ante in nibh mauris cursus mattis. Vel turpis nunc eget lorem dolor sed viverra. Sit amet nisl purus in mollis nunc sed id. Mattis vulputate enim nulla aliquet porttitor. Sit amet venenatis urna cursus. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt."
}
</p>
</div>
<div class={"details-body-divider"}></div>
<div class={"details-body-features"}>
<div class={"details-body-feature-item"}>
<div class={"details-body-feature-item-icon-container"}>
<i class="fa-solid fa-person-digging"></i>
</div>
<div class={"details-body-feature-item-text-container"}>
<div class={"details-body-feature-item-text-title"}>
{"Fecha de entrega"}
</div>
<div class={"details-body-feature-item-text-subtitle"}>
{project_est_finish_date}
</div>
</div>
</div>
<div class={"details-body-feature-item"}>
<div class={"details-body-feature-item-icon-container"}>
<i class="fa-solid fa-handshake"></i>
</div>
<div class={"details-body-feature-item-text-container"}>
<div class={"details-body-feature-item-text-title"}>
{"Condición de venta"}
</div>
<div class={"details-body-feature-item-text-subtitle"}>
{project_condition}
</div>
</div>
</div>
<div class={"details-body-feature-item"}>
<div class={"details-body-feature-item-icon-container"}>
<i class="fa-solid fa-house-chimney"></i>
</div>
<div class={"details-body-feature-item-text-container"}>
<div class={"details-body-feature-item-text-title"}>
{"Tipo de Proyecto"}
</div>
<div class={"details-body-feature-item-text-subtitle"}>
{project_type}
</div>
</div>
</div>
<div class={"details-body-feature-item"}>
<div class={"details-body-feature-item-icon-container"}>
<i class="fa-solid fa-building"></i>
</div>
<div class={"details-body-feature-item-text-container"}>
<div class={"details-body-feature-item-text-title"}>
{"Cant. de Pisos"}
</div>
<div class={"details-body-feature-item-text-subtitle"}>
{project_floors}
</div>
</div>
</div>
</div>
<div class={"details-body-divider"}></div>
</div> </div>
</div> </div>
} }