Album Page Styling

This commit is contained in:
2024-11-22 21:34:21 +00:00
parent dd14aa0b4d
commit 21a17a8eb5
5 changed files with 115 additions and 44 deletions

View File

@ -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<_>>()
}

View File

@ -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>
}
}