From a0d926b3adb677853afd43568c4cfe0e39846d7b Mon Sep 17 00:00:00 2001 From: Franklin Date: Sun, 26 Mar 2023 18:26:38 -0400 Subject: [PATCH] Floating ws widget (ui only), agent inside project details page, feature list inside project details page, description as well. --- Cargo.lock | 1 + Cargo.toml | 2 + css/components/floating_widget.css | 34 ++++++++ css/components/media_slideshow.css | 12 +-- css/details.css | 123 ++++++++++++++++++++++++++++- index.html | 2 + src/components/floating_widget.rs | 18 +++++ src/components/mod.rs | 3 +- src/pages/details.rs | 120 +++++++++++++++++++++++----- 9 files changed, 288 insertions(+), 27 deletions(-) create mode 100644 css/components/floating_widget.css create mode 100644 src/components/floating_widget.rs diff --git a/Cargo.lock b/Cargo.lock index 48d4eb3..70ab70f 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -706,6 +706,7 @@ checksum = "453ad9f582a441959e5f0d088b02ce04cfe8d51a8eaf077f12ac6d3e94164ca6" name = "jl-frontend" version = "0.1.0" dependencies = [ + "chrono", "err", "jl-types", "js-sys", diff --git a/Cargo.toml b/Cargo.toml index cbab346..416360c 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -29,6 +29,8 @@ serde = { version = "1.0", features = ["derive"] } serde_json = "1.0.88" err = { git = "https://git.franklinblanco.dev/franklinblanco/err.git" } thousands = "0.2.0" +chrono = "0.4.23" + # Core jl-types = { path = "../jl-types", features = ["wasm"] } diff --git a/css/components/floating_widget.css b/css/components/floating_widget.css new file mode 100644 index 0000000..0fc6a3e --- /dev/null +++ b/css/components/floating_widget.css @@ -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; +} \ No newline at end of file diff --git a/css/components/media_slideshow.css b/css/components/media_slideshow.css index 690b39c..99db24b 100644 --- a/css/components/media_slideshow.css +++ b/css/components/media_slideshow.css @@ -1,17 +1,17 @@ .media-slideshow-frame { height: 360px; - background-color: gray; width: 100%; position: relative; + border-radius: 15px; } .media-slideshow-photo { - background-color: gray; object-fit: cover; width: 100%; height: 100%; display: none; + border-radius: 15px; } .media-slideshow-video { @@ -20,6 +20,7 @@ height: 100%; display: none; object-fit: cover; + border-radius: 15px; } .media-slideshow-arrow-left { @@ -65,9 +66,10 @@ font-size: 12px; padding: 8px 12px; position: absolute; - top: 0; - background-color: rgba(0,0,0,0.8); - border-radius: 2px; + top: 10px; + left: 10px; + background-color: rgba(0, 0, 0, 0.633); + border-radius: 5px; } diff --git a/css/details.css b/css/details.css index cfd8902..9fe5e74 100644 --- a/css/details.css +++ b/css/details.css @@ -9,7 +9,7 @@ Divide the Details page into 3 main sections: justify-content: stretch; align-items: start; padding: 0px 15px; - margin-top: 60px; + margin-top: 30px; } .details-head { @@ -18,10 +18,127 @@ Divide the Details page into 3 main sections: justify-content: stretch; align-items: center; width: 100%; - gap: 10px; + gap: 20px; + margin-bottom: 15px; } .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); +} \ No newline at end of file diff --git a/index.html b/index.html index 32cfd1a..f2bf7d3 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,8 @@ + + diff --git a/src/components/floating_widget.rs b/src/components/floating_widget.rs new file mode 100644 index 0000000..42de77d --- /dev/null +++ b/src/components/floating_widget.rs @@ -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! { +
+
+ +
+
+ } +} + +#[derive(Properties, PartialEq)] +pub struct FloatingWidgetProps { + +} \ No newline at end of file diff --git a/src/components/mod.rs b/src/components/mod.rs index 330b859..f5ec631 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,4 +1,5 @@ pub mod nav_bar; pub mod search_filter; pub mod project_card; -pub mod media_slideshow; \ No newline at end of file +pub mod media_slideshow; +pub mod floating_widget; \ No newline at end of file diff --git a/src/pages/details.rs b/src/pages/details.rs index cbd5f9f..360f54a 100644 --- a/src/pages/details.rs +++ b/src/pages/details.rs @@ -3,7 +3,7 @@ use log::{error, info}; use uuid::Uuid; 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)] pub fn details_page(props: &DetailsPageProps) -> Html { @@ -31,37 +31,121 @@ pub fn details_page(props: &DetailsPageProps) -> Html { let listing = (*listing_handle).clone(); 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_price = format!("Desde ${} USD", match listing.project.starts_from { - 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_type = &listing.project.project_type.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!{ <> +
{ if *finished_loading { html!{
-
{project_title}
-
{"RD$123,130.00"}
-
{project_description}
+ + + // Agent +
+ // Profile pic + {"agent_pfp"}/ + +
+
{"Vendido por Luis Jose"}
+
{"(809)-123-4567"}
+
+
+ + +
+ +
+ +
+
+

+ { + "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." + } +

+
+ +
+ +
+
+
+ +
+
+
+ {"Fecha de entrega"} +
+
+ {project_est_finish_date} +
+
+
+ +
+
+ +
+
+
+ {"Condición de venta"} +
+
+ {project_condition} +
+
+
+ +
+
+ +
+
+
+ {"Tipo de Proyecto"} +
+
+ {project_type} +
+
+
+ +
+
+ +
+
+
+ {"Cant. de Pisos"} +
+
+ {project_floors} +
+
+
+ + +
+ +
}