Album Page Styling

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

src/pages/albumpage.rs

@@ -44,8 +44,10 @@ pub fn AlbumPage() -> impl IntoView {
     );
 
     view! {
+        <div class="album-page-container">
+            <div class="album-header">
                 <Suspense
-            fallback=move || view! { <p>"Loading..."</p> }
+                    fallback=move || view! { <p class="loading">"Loading..."</p> }
                 >
                     {move || {
                         albumdata.with( |albumdata| {
@@ -54,16 +56,17 @@ pub fn AlbumPage() -> impl IntoView {
                                     view! { <AlbumInfo albumdata=(*s).clone() /> }
                                 },
                                 Some(Err(e)) => {
-                            view! { <div>{format!("Error loading albums: : {}",e)}</div> }.into_view()
+                                    view! { <div class="error">{format!("Error loading album : {}",e)}</div> }.into_view()
                                 },
                                 None => {view! { }.into_view()}
                             }
                         })
                     }}
                 </Suspense>
+            </div>
         
             <Suspense
-            fallback=move || view! { <p>"Loading..."</p> }
+                fallback=move || view! { <p class="loading">"Loading..."</p> }
             >
                 {move || {
                     song_list.with( |song_list| {
@@ -72,13 +75,14 @@ pub fn AlbumPage() -> impl IntoView {
                                 view! { <SongList songs=(*s).clone()/> }
                             },
                             Some(Err(e)) => {
-                            view! { <div>{format!("Error loading albums: : {}",e)}</div> }.into_view()
+                                view! { <div class="error">{format!("Error loading albums: : {}",e)}</div> }.into_view()
                             },
                             None => {view! { }.into_view()}
                         }
                     })
                 }}
             </Suspense>
+        </div>
     }
 }
 

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;
+			}
+		}
+	}
+
+}

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;

style/theme.scss

@@ -10,6 +10,7 @@ $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;