Added media frame and connected it with logic for units (changes when selected too! :) ) wow
This commit is contained in:
parent
ee2f024488
commit
a4229ff451
|
@ -15,7 +15,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-slideshow-video {
|
.media-slideshow-video {
|
||||||
background-color: gray;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -193,3 +193,14 @@ Divide the Details page into 3 main sections:
|
||||||
font-size: 15px;
|
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;
|
||||||
|
}
|
|
@ -158,7 +158,6 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
<div class={"details-body-units"}>
|
<div class={"details-body-units"}>
|
||||||
<div class={"details-body-units-title"}>{"Unidades"}</div>
|
<div class={"details-body-units-title"}>{"Unidades"}</div>
|
||||||
<div class={"details-body-units-selection-container"}>
|
<div class={"details-body-units-selection-container"}>
|
||||||
|
|
||||||
{// Maps all the units to generate the unit selection menu
|
{// Maps all the units to generate the unit selection menu
|
||||||
listing.units.iter().enumerate().map(|(index, unit)| {
|
listing.units.iter().enumerate().map(|(index, unit)| {
|
||||||
let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
|
let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
|
||||||
|
@ -195,6 +194,27 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||||
}).collect::<Html>()
|
}).collect::<Html>()
|
||||||
}
|
}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue