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

Cargo.lock

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

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

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

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

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);
+}

index.html

@@ -12,6 +12,8 @@
         <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/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=Sacramento" rel="stylesheet">

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! {
+        <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 {
+    
+}

src/components/mod.rs

@@ -2,3 +2,4 @@ pub mod nav_bar;
 pub mod search_filter;
 pub mod project_card;
 pub mod media_slideshow;
+pub mod floating_widget;

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 {
+    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_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!{
         <>
             <NavigationBar/>
+            <FloatingWidget/>
             <div class={"page-container"}>
                 {
                     if *finished_loading {
                         html!{
                             <div class={"details-container"}>
                                 <div class={"details-head"}>
-                                    <MediaSlideshow media_list={project_media_list}/>
                                     <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>
                         }