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

Added media frame and connected it with logic for units (changes when selected too! :) ) wow

Browse Source
This commit is contained in:
Franklin 2023-03-26 20:22:18 -04:00
parent ee2f024488
commit a4229ff451
3 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/components/media_slideshow.css
View File

@ -15,7 +15,6 @@
}
.media-slideshow-video {
background-color: gray;
width: 100%;
height: 100%;
display: none;

11
css/details.css
View File

@ -192,4 +192,15 @@ Divide the Details page into 3 main sections:
font-family: Inter;
font-size: 15px;
}
.details-body-units-media-slideshow-frame {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 360px;
background-color: rgba(128, 128, 128, 0.151);
border-radius: 20px;
}

24
src/pages/details.rs
View File

@ -40,7 +40,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
"(Listo)"
} else {""});
let project_floors = &listing.project.floors.to_string();
let cloned_selected_unit_handle = selected_unit_handle.clone();
//TODO: Floating whatsapp button on this page
html!{
@ -158,7 +158,6 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
<div class={"details-body-units"}>
<div class={"details-body-units-title"}>{"Unidades"}</div>
<div class={"details-body-units-selection-container"}>
{// Maps all the units to generate the unit selection menu
listing.units.iter().enumerate().map(|(index, unit)| {
let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
@ -195,6 +194,27 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
}).collect::<Html>()
}
</div>
<div class={"details-body-units-media-slideshow-frame"}>
{
if let Some(unit) = listing.units.get(*cloned_selected_unit_handle) {
if unit.media.media_list.len() >= 1 {
html! {
<MediaSlideshow media_list={unit.media.media_list.clone()}/>
}
} else {
html! {
<div>{"No existen imágenes para esta Unidad."}</div>
}
}
} else {
html! {
<div>{"Esta unidad no existe. Esto No debería estar pasando."}</div>
}
}
}
</div>
</div>
</div>
</div>