eta357/LibreTunes-Nix-Test
1
0
Fork 0
Code Pull Requests Actions Activity

Album Page Styling

Browse Source
This commit is contained in:
Aidan Westphal 2024-11-22 21:34:21 +00:00
parent dd14aa0b4d
commit 21a17a8eb5
5 changed files with 115 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/album_info.rs
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<_>>()
}

74
src/pages/albumpage.rs
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>
}
}

67
style/album_page.scss Normal file
View File

@ -0,0 +1,67 @@
@import 'theme.scss';
.album-page-container {
width: 90vw;
.album-header {
height: 40vh;
width: 65vw;
margin: auto;
padding:20px;
background-image: linear-gradient($accent-color, $background-color);
border-radius: 15px;
.album-info {
width: 100%;
height: 100%;
}
}
}
.album-info {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
.album-image {
max-width: 80%;
max-height: 80%;
box-shadow: 10px 10px 50px -10px $background-color;
}
.album-body {
display: flex;
flex-flow: column nowrap;
justify-content: center;
.album-title {
color: $text-controls-color;
font-size: 40px;
font-weight: bold;
margin:15px;
text-align: center;
}
.album-artists {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-content: space-around;
margin:15px;
color: $text-controls-color;
font-size: 20px;
.album-artist {
margin: 5px;
text-align: center;
}
}
}
}

1
style/main.scss
View File

@ -15,6 +15,7 @@
@import 'song_list.scss';
@import 'profile.scss';
@import 'loading.scss';
@import 'album_page.scss';
body {
font-family: sans-serif;

3
style/theme.scss
View File

@ -10,10 +10,11 @@ $controls-click-color: #909090;
$play-bar-background-color: #212121;
$play-grad-start: #0a0533;
$play-grad-end: $accent-color;
$border-color: #7851ed;
$queue-background-color: $play-bar-background-color;
$auth-inputs: #796dd4;
$auth-containers: white;
$dashboard-tile-size: 200px;
$playbar-size: 75px;
$playbar-size: 75px;