+
{albumdata.title}
+
{
albumdata.artists.iter().map(|artist| {
view! {
-
{artist.name.clone()}
+
{artist.name.clone()}
}
}).collect::
>()
}
diff --git a/src/pages/albumpage.rs b/src/pages/albumpage.rs
index 62c4ed1..47332ac 100644
--- a/src/pages/albumpage.rs
+++ b/src/pages/albumpage.rs
@@ -44,41 +44,45 @@ pub fn AlbumPage() -> impl IntoView {
);
view! {
- "Loading..." }
- >
- {move || {
- albumdata.with( |albumdata| {
- match albumdata {
- Some(Ok(s)) => {
- view! { }
- },
- Some(Err(e)) => {
- view! { {format!("Error loading albums: : {}",e)}
}.into_view()
- },
- None => {view! { }.into_view()}
- }
- })
- }}
-
-
- "Loading..." }
- >
- {move || {
- song_list.with( |song_list| {
- match song_list {
- Some(Ok(s)) => {
- view! { }
- },
- Some(Err(e)) => {
- view! { {format!("Error loading albums: : {}",e)}
}.into_view()
- },
- None => {view! { }.into_view()}
- }
- })
- }}
-
+
+
+
+
"Loading..." }
+ >
+ {move || {
+ song_list.with( |song_list| {
+ match song_list {
+ Some(Ok(s)) => {
+ view! { }
+ },
+ Some(Err(e)) => {
+ view! { {format!("Error loading albums: : {}",e)}
}.into_view()
+ },
+ None => {view! { }.into_view()}
+ }
+ })
+ }}
+
+
}
}
diff --git a/style/album_page.scss b/style/album_page.scss
new file mode 100644
index 0000000..55b306b
--- /dev/null
+++ b/style/album_page.scss
@@ -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;
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/style/main.scss b/style/main.scss
index a19abe7..e2be23c 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -15,6 +15,7 @@
@import 'song_list.scss';
@import 'profile.scss';
@import 'loading.scss';
+@import 'album_page.scss';
body {
font-family: sans-serif;
diff --git a/style/theme.scss b/style/theme.scss
index b0cea43..0569ca6 100644
--- a/style/theme.scss
+++ b/style/theme.scss
@@ -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;
\ No newline at end of file