Album Page Styling
This commit is contained in:
@ -5,17 +5,15 @@ use crate::albumdata::AlbumData;
|
||||
#[component]
|
||||
pub fn AlbumInfo(albumdata: AlbumData) -> impl IntoView {
|
||||
view! {
|
||||
<div>
|
||||
<div>
|
||||
<img src={albumdata.image_path} alt="dashboard-tile" />
|
||||
</div>
|
||||
<div>
|
||||
<p>{albumdata.title}</p>
|
||||
<div>
|
||||
<div class="album-info">
|
||||
<img class="album-image" src={albumdata.image_path} alt="dashboard-tile" />
|
||||
<div class="album-body">
|
||||
<p class="album-title">{albumdata.title}</p>
|
||||
<div class="album-artists">
|
||||
{
|
||||
albumdata.artists.iter().map(|artist| {
|
||||
view! {
|
||||
<p>{artist.name.clone()}</p>
|
||||
<p class="album-artist">{artist.name.clone()}</p>
|
||||
}
|
||||
}).collect::<Vec<_>>()
|
||||
}
|
||||
|
@ -44,41 +44,45 @@ pub fn AlbumPage() -> impl IntoView {
|
||||
);
|
||||
|
||||
view! {
|
||||
<Suspense
|
||||
fallback=move || view! { <p>"Loading..."</p> }
|
||||
>
|
||||
{move || {
|
||||
albumdata.with( |albumdata| {
|
||||
match albumdata {
|
||||
Some(Ok(s)) => {
|
||||
view! { <AlbumInfo albumdata=(*s).clone()/> }
|
||||
},
|
||||
Some(Err(e)) => {
|
||||
view! { <div>{format!("Error loading albums: : {}",e)}</div> }.into_view()
|
||||
},
|
||||
None => {view! { }.into_view()}
|
||||
}
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
|
||||
<Suspense
|
||||
fallback=move || view! { <p>"Loading..."</p> }
|
||||
>
|
||||
{move || {
|
||||
song_list.with( |song_list| {
|
||||
match song_list {
|
||||
Some(Ok(s)) => {
|
||||
view! { <SongList songs=(*s).clone()/> }
|
||||
},
|
||||
Some(Err(e)) => {
|
||||
view! { <div>{format!("Error loading albums: : {}",e)}</div> }.into_view()
|
||||
},
|
||||
None => {view! { }.into_view()}
|
||||
}
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
<div class="album-page-container">
|
||||
<div class="album-header">
|
||||
<Suspense
|
||||
fallback=move || view! { <p class="loading">"Loading..."</p> }
|
||||
>
|
||||
{move || {
|
||||
albumdata.with( |albumdata| {
|
||||
match albumdata {
|
||||
Some(Ok(s)) => {
|
||||
view! { <AlbumInfo albumdata=(*s).clone() /> }
|
||||
},
|
||||
Some(Err(e)) => {
|
||||
view! { <div class="error">{format!("Error loading album : {}",e)}</div> }.into_view()
|
||||
},
|
||||
None => {view! { }.into_view()}
|
||||
}
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
<Suspense
|
||||
fallback=move || view! { <p class="loading">"Loading..."</p> }
|
||||
>
|
||||
{move || {
|
||||
song_list.with( |song_list| {
|
||||
match song_list {
|
||||
Some(Ok(s)) => {
|
||||
view! { <SongList songs=(*s).clone()/> }
|
||||
},
|
||||
Some(Err(e)) => {
|
||||
view! { <div class="error">{format!("Error loading albums: : {}",e)}</div> }.into_view()
|
||||
},
|
||||
None => {view! { }.into_view()}
|
||||
}
|
||||
})
|
||||
}}
|
||||
</Suspense>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user