From 21a17a8eb52ca3594099dabebc2e7f74b2680c74 Mon Sep 17 00:00:00 2001
From: Aidan Westphal <kylesteine1@gmail.com>
Date: Fri, 22 Nov 2024 21:34:21 +0000
Subject: [PATCH] Album Page Styling

---
 src/components/album_info.rs | 14 +++----
 src/pages/albumpage.rs       | 74 +++++++++++++++++++-----------------
 style/album_page.scss        | 67 ++++++++++++++++++++++++++++++++
 style/main.scss              |  1 +
 style/theme.scss             |  3 +-
 5 files changed, 115 insertions(+), 44 deletions(-)
 create mode 100644 style/album_page.scss

diff --git a/src/components/album_info.rs b/src/components/album_info.rs
index b44a1f5..03b2950 100644
--- a/src/components/album_info.rs
+++ b/src/components/album_info.rs
@@ -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<_>>()
 					}
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! {
-        <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>
     }
 }
 
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