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 class="album-info">
-			<div>
+			<img class="album-image" src={albumdata.image_path} alt="dashboard-tile" />
-				<img src={albumdata.image_path} alt="dashboard-tile" />
+			<div class="album-body">
-			</div>
+				<p class="album-title">{albumdata.title}</p>
-			<div>
+				<div class="album-artists">
-				<p>{albumdata.title}</p>
-				<div>
 					{
 						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,41 +44,45 @@ pub fn AlbumPage() -> impl IntoView {
     );
 
     view! {
-        <Suspense
+        <div class="album-page-container">
-            fallback=move || view! { <p>"Loading..."</p> }
+            <div class="album-header">
-        >
+                <Suspense
-            {move || {
+                    fallback=move || view! { <p class="loading">"Loading..."</p> }
-                albumdata.with( |albumdata| {
+                >
-                    match albumdata {
+                    {move || {
-                        Some(Ok(s)) => {
+                        albumdata.with( |albumdata| {
-                            view! { <AlbumInfo albumdata=(*s).clone()/> }
+                            match albumdata {
-                        },
+                                Some(Ok(s)) => {
-                        Some(Err(e)) => {
+                                    view! { <AlbumInfo albumdata=(*s).clone() /> }
-                            view! { <div>{format!("Error loading albums: : {}",e)}</div> }.into_view()
+                                },
-                        },
+                                Some(Err(e)) => {
-                        None => {view! { }.into_view()}
+                                    view! { <div class="error">{format!("Error loading album : {}",e)}</div> }.into_view()
-                    }
+                                },
-                })
+                                None => {view! { }.into_view()}
-            }}
+                            }
-        </Suspense>
+                        })
-
+                    }}
-        <Suspense
+                </Suspense>
-            fallback=move || view! { <p>"Loading..."</p> }
+            </div>
-        >
+        
-            {move || {
+            <Suspense
-                song_list.with( |song_list| {
+                fallback=move || view! { <p class="loading">"Loading..."</p> }
-                    match song_list {
+            >
-                        Some(Ok(s)) => {
+                {move || {
-                            view! { <SongList songs=(*s).clone()/> }
+                    song_list.with( |song_list| {
-                        },
+                        match song_list {
-                        Some(Err(e)) => {
+                            Some(Ok(s)) => {
-                            view! { <div>{format!("Error loading albums: : {}",e)}</div> }.into_view()
+                                view! { <SongList songs=(*s).clone()/> }
-                        },
+                            },
-                        None => {view! { }.into_view()}
+                            Some(Err(e)) => {
-                    }
+                                view! { <div class="error">{format!("Error loading albums: : {}",e)}</div> }.into_view()
-                })
+                            },
-            }}
+                            None => {view! { }.into_view()}
-        </Suspense>
+                        }
+                    })
+                }}
+            </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,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;