CSS Fixes - Scrollbars, Album page, and making constants

src/pages/albumpage.rs

@@ -63,7 +63,7 @@ pub fn AlbumPage() -> impl IntoView {
                     }}
                 </Suspense>
             </div>
-        
+            <div class="album-songs">
             <Suspense
                 fallback=move || view! { <p class="loading">"Loading..."</p> }
             >
@@ -81,6 +81,7 @@ pub fn AlbumPage() -> impl IntoView {
                     })
                 }}
             </Suspense>
+            </div>
         </div>
     }
 }

style/album_page.scss

@@ -1,15 +1,23 @@
 @import 'theme.scss';
 
 .album-page-container {
-	width: 90vw;
+	$album-header-height: calc(40% - 2px);
+	
+	width: $center-viewport-width;
+	max-height: $center-viewport-height;
+
+	overflow: hidden;
+
+	margin-top:2px;
 
 	.album-header {
-		height: 40vh;
+		$album-header-padding: 20px;
-		width: 65vw;
-		margin: auto;
 
+		height: $album-header-height;
+		width: calc(100% - 2*$album-header-padding);
+		margin: 2px;
 		
-		padding:20px;
+		padding: $album-header-padding;
 
 		background-image: linear-gradient($accent-color, $background-color);
 		border-radius: 15px;
@@ -19,6 +27,13 @@
 			height: 100%;
 		}
 	}
+
+	.album-songs {
+		width: 100%;
+		max-height: calc(100% - $album-header-height);
+		overflow-x: hidden;
+		overflow-y: scroll;
+	}
 }
 
 .album-info {

style/dashboard.scss

@@ -1,6 +1,9 @@
 @import "theme.scss";
 
 .dashboard-container {
+  max-width: $center-viewport-width;
+  max-height: $center-viewport-height;
+
   .dashboard-header {
     font-size: 1.2rem;
     font-weight: 300;

style/home.scss

@@ -1,17 +1,20 @@
 @import "theme.scss";
 
 .home-container {
-  margin-top: 0;
+  width: 100vw;
-  width: 100%;
   height: 100vh;
   display: flex;
   flex-direction: row;
 }
+
 .home-component {
   background: #1c1c1c;
-  width: calc(100% - 22rem - 16rem);
+
+  width: calc($center-viewport-width - 4px - 2rem);
+  height: calc($center-viewport-height - 4px - 1rem);
+
   margin: 2px;
-  padding: 0.2rem 1.5rem $playbar-size 1rem;
+  padding: 0.5rem 1rem;
   border-radius: 0.5rem;
   overflow: scroll;
 }

style/main.scss

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

style/personal.scss

@@ -1,9 +1,9 @@
 @import "theme.scss";
 
 .personal-container {
-  width: 16rem;
+  width: $personal-width;
   background: #1c1c1c;
-  margin: 2px;
+  margin: $personal-margin;
   border-radius: 0.5rem;
 
   .profile-container {

style/scrollbar.scss

@@ -0,0 +1,12 @@
+::-webkit-scrollbar {
+    width: 10px;
+    background-blend-mode: $scrollbar-background-color;
+}
+
+::-webkit-scrollbar-thumb {
+    background: $scrollbar-handle-color;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: $scrollbar-handle-hover-color;
+}

style/sidebar.scss

@@ -2,13 +2,15 @@
 
 .sidebar-container {
   background-color: transparent;
-  width: 22rem;
+  width: $sidebar-width;
-  height: calc(100% - 75px);
+  height: $center-viewport-height;
+  margin: 2px;
+
   .sidebar-top-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
     height: 9rem;
-    margin: 3px;
+    margin: 2px 0px;
     padding: 0.1rem 1rem 1rem 1rem;
     position: relative;
     .header {
@@ -68,7 +70,7 @@
   .sidebar-bottom-container {
     border-radius: 1rem;
     background-color: #1c1c1c;
-    margin: 3px;
+    margin: 2px 0px;
     margin-top: 6px;
     padding: 0.2rem 1rem 1rem 1rem;
     height: calc(100% - 9rem);

style/theme.scss

@@ -13,8 +13,20 @@ $play-grad-end: $accent-color;
 $border-color: #7851ed;
 $queue-background-color: $play-bar-background-color;
 
+$scrollbar-background-color: #101010;
+$scrollbar-handle-color:#292929;
+$scrollbar-handle-hover-color:#5c5b5b;
+
 $auth-inputs: #796dd4;
 $auth-containers: white;
 
 $dashboard-tile-size: 200px;
 $playbar-size: 75px;
+$personal-width: 16rem;
+$sidebar-width: 22rem;
+
+$personal-margin: 2px;
+$sidebar-margin: 2px;
+
+$center-viewport-width: calc(100vw - $personal-width - $sidebar-width - 2*$personal-margin - 2*$sidebar-margin);
+$center-viewport-height: calc(100vh - $playbar-size);